我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
当前回答
对我来说document.execCommand('copy')给出了弃用警告,我需要复制的数据是在<div>作为textNode,而不是<input>或<textarea>。
这是我在Angular 7中的做法(灵感来自@Anantharaman和@Codemaker的回答):
<div id="myDiv"> <   This is the text to copy.   > </div>
<button (click)="copyToClipboard()" class="copy-btn"></button>
copyToClipboard() {
const content = (document.getElementById('myDiv') as HTMLElement).innerText;
navigator['clipboard'].writeText(content).then().catch(e => console.error(e));
}
}
绝对不是最好的方法,但它达到了目的。
其他回答
很简单,兄弟
在.html文件
<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>
在.ts文件
copyMessage(text: string) {
navigator.clipboard.writeText(text).then().catch(e => console.log(e));
}
// for copy the text
import { Clipboard } from "@angular/cdk/clipboard"; // first import this in .ts
constructor(
public clipboard: Clipboard
) { }
<button class="btn btn-success btn-block"(click) = "onCopy('some text')" > Copy< /button>
onCopy(value) {
this.clipboard.copy(value);
}
// for paste the copied text on button click :here is code
<button class="btn btn-success btn-block"(click) = "onpaste()" > Paste < /button>
onpaste() {
navigator['clipboard'].readText().then(clipText => {
console.log(clipText);
});
}
copyCurl(val: string){
navigator.clipboard.writeText(val).then( () => {
this.toastr.success('Text copied to clipboard');
}).catch( () => {
this.toastr.error('Failed to copy to clipboard');
});
}
你可以使用Angular模块来实现:
navigator.clipboard.writeText('your text').then().catch(e => console.error(e));
修改版本的jockeisorby的回答,修复事件处理程序没有被正确删除。
copyToClipboard(item): void {
let listener = (e: ClipboardEvent) => {
e.clipboardData.setData('text/plain', (item));
e.preventDefault();
};
document.addEventListener('copy', listener);
document.execCommand('copy');
document.removeEventListener('copy', listener);
}