将html复制到剪贴板(角度) [英] Copy html to clipboard (Angular)
本文介绍了将html复制到剪贴板(角度)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以将html复制到Angular剪贴板中?
Is there a way to copy html to clipboard in Angular?
我正在使用ngx剪贴板,并尝试格式化复制的文本(即,使用粗体,项目符号)
I'm using ngx-clipboard, and trying to format the copied text (i.e., use bold, bullets)
.ts
constructor(private _clipboardService: ClipboardService) {}
callServiceToCopy() {
this._clipboardService.copyFromContent('<B>This is an important message<\/B>\n These are the details');
}
组件:
<button class="btn btn-primary btn-sm" (click)="callServiceToCopy()">Copy</button>
Stackblitz: https://stackblitz.com/edit/github-ar12tp-irzz84
Stackblitz: https://stackblitz.com/edit/github-ar12tp-irzz84
推荐答案
app.component.ts:
copyToClipboard(id:string): void {
const fromHtml = this._elementRef.nativeElement.querySelector(id).innerHTML;
const newNode = this.renderer.createElement('div');
this.renderer.appendChild(this._elementRef.nativeElement, newNode);
this.renderer.setProperty(newNode, 'innerHTML', fromHtml);
this._clipboardService.copyFromContent(fromHtml);
}
app.component.html:
<textarea id="textId">This is a sample Text</textarea>
<button (click)="copyToClipboard('#textId')">Copy text</button>
请检查以下StackBlitz: https://stackblitz.com/edit/github-ar12tp-scrwbn
Please check this StackBlitz: https://stackblitz.com/edit/github-ar12tp-scrwbn
这篇关于将html复制到剪贴板(角度)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文