Angular 8 - 将 JSON 对象复制到剪贴板答案

【问题标题】：Angular 8 - copy to clipboard a JSON ObjectAngular 8 - 将 JSON 对象复制到剪贴板
【发布时间】：2020-10-29 15:23:03
【问题描述】：

我从后端收到一个 JSON 响应，显示为{{ response | json }}。有一个复制到剪贴板选项，我需要复制response 的内容。我有以下代码

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);}

因为response 是一个对象，所以它复制为[object object]。我可以将其复制为将响应转换为字符串 let val = JSON.stringyfy(response) 。但这不会以我显示它的格式化方式复制它，而是像字符串一样将 json 复制到一行中。那么如何以正确的格式将 JSON 对象复制到剪贴板呢？

【问题讨论】：

stackoverflow.com/questions/4810841/…

标签： html css json angular less

【解决方案1】：

在 Angular cdk 中有一个内置的 Clipboard 类，这使得这更容易做到。您还应该将the space parameter 与您的JSON.stringify 一起使用

首先 npm 安装 @angular/cdk 包，如果你还没有的话。

在你的@NgModule 中导入ClipboardModule

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

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

在组件的 typescript 文件中导入 Clipboard 类

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));
    }
}

在你的组件模板中

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

粘贴时字符串化{abc:'abc',xy:{x:'1',y:'2'}}的结果：

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

【讨论】：

【解决方案2】：

参考 x4rf41 链接的答案，您可以使用 let val = JSON.stringify(response,null,2) 将您的字符串化函数留空您的 JSON。如果要语法高亮，可以使用user123444555621的function。

一个更简洁的复制文本的方法是为复制事件添加一个事件监听器，并设置clipboardDatadataTransfer对象：

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');}

如果您使用上述语法高亮功能，您可能需要指定 MIME 类型“text/html”。希望链接答案中的格式选项能满足您的需求。

【讨论】：

已编辑，因此事件侦听器不会阻止默认复制行为