时间戳

首页 > 解决方案 > Angular 8 - 将 JSON 对象复制到剪贴板

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

问题描述

我有一个从后端得到的 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);}

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

标签： htmlcssjsonangularless

解决方案

angular cdk 中有一个内置Clipboard类，这使得这更容易做到。您还应该将空间参数与您的JSON.stringify

@angular/cdk如果您还没有安装包，请先npm install 。

在您的@NgModule导入中ClipboardModule

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

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

在组件的打字稿文件中导入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"
  }
}

推荐阅读