Angular 8 - copy to clipboard a JSON Object

Question

I have a JSON response I get from backend which I'm displaying as {{ response | json }}. There's a copy to clipboard option where i need to copy the contents of response. I have the following code

copy(response){
  let val = response;
  const selBox = document.createElement('textarea');
  selBox.style.position = 'fixed';
  selBox.style.left = '0';
  selBox.style.top = '0';
  selBox.style.opacity = '0';
  selBox.value = val;
  document.body.appendChild(selBox);
  selBox.focus();
  selBox.select();
  document.execCommand('copy');
  document.body.removeChild(selBox);}

This copies as [object object] since response is an object. I can copy it converting the response to a string as let val = JSON.stringyfy(response) . But this does not copy it in a formatted way I display it, instead copies the json in one single line like a string. So how to copy to clipboard a JSON object in a proper formatted way?

https://stackoverflow.com/questions/4810841/pretty-print-json-using-javascript — x4rf41, Jul 09 '20 at 05:26

score 10 · Answer 1 · answered Dec 07 '20 at 23:20

There is a built-in Clipboard class in the angular cdk that makes this a little easier to do. You should also use the space parameter with your JSON.stringify

First npm install the @angular/cdk package if you don't have it already.

In your @NgModule import ClipboardModule

import { ClipboardModule } from '@angular/cdk/clipboard';

@NgModule({
    imports: [
        ClipboardModule
    ],
})

In your component's typescript file import the Clipboard class

import { Clipboard } from '@angular/cdk/clipboard';

@Component({ /* ... */ })
export class MyComponent {

    constructor(private clipboard: Clipboard) { }

    public copy() {
        // replace this object with your data
        const object = {abc:'abc',xy:{x:'1',y:'2'}}

        // Note the parameters
        this.clipboard.copy(JSON.stringify(object, null, 2));
    }
}

In your component's template

<button (click)="copy()">
    Copy Data
</button>

The result of stringifying {abc:'abc',xy:{x:'1',y:'2'}} when pasted:

{
  "abc": "abc",
  "xy": {
    "x": "1",
    "y": "2"
  }
}

Leaf the Legend · Accepted Answer · 2020-07-09T06:02:47.553

With reference to the answer linked by x4rf41, you can make your stringify function whitespace your JSON with let val = JSON.stringify(response,null,2). If you want syntax highlighting, you can use user123444555621's function.

A much neater way to copy text is to add an event listener for the copy event, and set the clipboardData dataTransfer object:

window.addEventListener('copy', (event) => {
if(copying){
    let val = JSON.stringify(response,null,2);
    event.preventDefault(); //stop the browser overwriting the string
    event.clipboardData.setData("text/plain",val); //encode the appropriate string with MIME type "text/plain"
copying = false;}
});
copy = function (){
copying = true;
document.execCommand('copy');}

If you are using the afore-mentioned syntax highlighting function, you probably want to specify MIME type "text/html". Hopefully the formatting options in the linked answer suit your needs.

Edited so the event listener doesn't block default copying behaviour — Leaf the Legend, Jul 09 '20 at 06:03

Angular 8 - copy to clipboard a JSON Object

2 Answers2