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是一个对象，因此这将复制为[对象对象]。我可以复制它，将响应转换为字符串let val = JSON.stringyfy(response)。但这并没有以格式化的方式复制它，而是像字符串一样在一行中复制json。那么，如何以正确的格式将JSON对象复制到剪贴板呢？

Answer 1

在angular cdk中有一个内置的Clipboard类，这使它更容易实现。您还应该在JSON.stringify中使用空间参数

如果您还没有@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"
}
}

Answer 2

参考x4rf41链接的答案，您可以使用let val = JSON.stringify(response,null,2)将字符串函数空白作为JSON。如果您想要突出显示语法，可以使用user123445555621的函数。

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