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

Question

我从后端收到 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 对象复制到剪贴板？

Answer 1

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

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

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”。希望链接答案中的格式设置选项适合您的需要。

Answer 2

angular cdk 中有一个内置的 Clipboard class 使这更容易做到。您还应该将 the space parameter 与 JSON.stringify

一起使用

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

在你的 @NgModule 中导入 ClipboardModule

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

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

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

在您的组件模板中

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

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

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

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

Angular 8 - copy to clipboard a JSON Object

html

css

json

less

angular