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

这会被复制成 [object object]，因为 response 是一个对象。我可以通过将响应转换为字符串来复制它，如 let val = JSON.stringyfy(response)。但是这样并不会按照我显示的格式进行复制，而是像字符串一样将 json 复制在一行中。那么如何以适当的格式将 JSON 对象复制到剪贴板中呢？

- dsh

---

https://dev59.com/6W445IYBdhLWcg3wia2V - x4rf41

Answer 1

Angular cdk中有内置的Clipboard类，这使得操作更加容易。您应该使用JSON.stringify的space参数。

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

在@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"
  }
}

- Jmaurier

Answer 2

参考x4rf41提供的答案，您可以使用let val = JSON.stringify(response,null,2)使您的stringify函数将JSON格式化为带有空格的形式。如果您想要语法高亮，则可以使用user123444555621的函数。

更加整洁的复制文本的方式是添加一个复制事件的监听器，并设置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"。希望链接答案中的格式选项能够满足您的需求。

- Leaf the Legend

---

修改了事件监听器，以避免阻止默认的复制行为。 - Leaf the Legend