我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
当前回答
从Angular Material v9开始,它现在有了一个剪贴板CDK
剪贴板|角材料
它可以简单地使用
<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>
其他回答
以下是@Sangram的回答(以及@Jonathan的评论)的解决方案1:
(支持“不要在angular中使用普通文档”和“如果你没有必要,不要从代码中添加HTML元素……”)
// TS @ViewChild('textarea') textarea: ElementRef; constructor(@Inject(DOCUMENT) private document: Document) {} public copyToClipboard(text): void { console.log(`> copyToClipboard(): copied "${text}"`); this.textarea.nativeElement.value = text; this.textarea.nativeElement.focus(); this.textarea.nativeElement.select(); this.document.execCommand('copy'); } /* CSS */ .textarea-for-clipboard-copy { left: -10000; opacity: 0; position: fixed; top: -10000; } <!-- HTML --> <textarea class="textarea-for-clipboard-copy" #textarea></textarea>
解决方案1:复制任何文本
HTML
<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>
.ts文件
copyMessage(val: string){
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);
}
解决方案2:从文本框复制
HTML
<input type="text" value="User input Text to copy" #userinput>
<button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>
.ts文件
/* To copy Text from Textbox */
copyInputMessage(inputElement){
inputElement.select();
document.execCommand('copy');
inputElement.setSelectionRange(0, 0);
}
演示
解决方案3:导入第三方指令ngx-clipboard
<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>
解决方案4:自定义指令
如果你更喜欢使用自定义指令,查看Dan Dohotaru的答案,这是一个使用ClipboardEvent实现的优雅解决方案。
解决方案5:角材质
Angular material 9 +用户可以利用内置的剪贴板功能复制文本。还有一些更多的定制可用,例如限制复制数据的尝试次数。
你可以使用Angular模块来实现:
navigator.clipboard.writeText('your text').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));
}
以下方法可用于复制消息:-
export function copyTextAreaToClipBoard(message: string) {
const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
x.value = cleanText;
document.body.appendChild(x);
x.select();
document.execCommand('copy');
document.body.removeChild(x);
}