我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
当前回答
你可以使用Angular模块来实现:
navigator.clipboard.writeText('your text').then().catch(e => console.error(e));
其他回答
我知道这已经高度投票在这里到现在为止,但我宁愿去一个自定义指令的方法,并依赖于ClipboardEvent的@jockeisorby建议,同时也确保侦听器被正确删除(相同的功能需要为添加和删除事件侦听器提供)
stackblitz试样
import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";
@Directive({ selector: '[copy-clipboard]' })
export class CopyClipboardDirective {
@Input("copy-clipboard")
public payload: string;
@Output("copied")
public copied: EventEmitter<string> = new EventEmitter<string>();
@HostListener("click", ["$event"])
public onClick(event: MouseEvent): void {
event.preventDefault();
if (!this.payload)
return;
let listener = (e: ClipboardEvent) => {
let clipboard = e.clipboardData || window["clipboardData"];
clipboard.setData("text", this.payload.toString());
e.preventDefault();
this.copied.emit(this.payload);
};
document.addEventListener("copy", listener, false)
document.execCommand("copy");
document.removeEventListener("copy", listener, false);
}
}
然后像这样使用它
<a role="button" [copy-clipboard]="'some stuff'" (copied)="notify($event)">
<i class="fa fa-clipboard"></i>
Copy
</a>
public notify(payload: string) {
// Might want to notify the user that something has been pushed to the clipboard
console.info(`'${payload}' has been copied to clipboard`);
}
注意:IE需要窗口["clipboardData"],因为IE不理解e.clipboardData
从Angular Material v9开始,它现在有了一个剪贴板CDK
剪贴板|角材料
它可以简单地使用
<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>
修改版本的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);
}
很简单,兄弟
在.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));
}
对我来说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));
}
}
绝对不是最好的方法,但它达到了目的。