如何将HTML源代码复制到剪贴板中？
如何将HTML源代码复制到剪贴板中？
提问于 2020-03-11 20:05:39
我有一段代码要复制，然后粘贴到HTML阅读器(MS或Outlook)中。
它应保留HTML格式，但不应将HTML粘贴为文本。
我有三项职能：
copyHTMLToClipboard(id:string): void {
const fromHtml = this._eRef.nativeElement.querySelector(id).innerHTML;
const newNode = this.render.createElement('div');
this.render.appendChild(this._eRef.nativeElement, newNode);
this.render.setProperty(newNode, 'innerHTML', fromHtml);
this._clipboardService.copyFromContent(fromHtml);
alert(fromHtml);
}
copyToClipboard(): void {
this._clipboardService.copyFromContent(this.buildFile());
}
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);
}由三个按钮调用：
<button mat-raised-button (click)="copyMessage(buildFile())" value="click to copy" >Copy</button>
<button mat-raised-button ngxClipboard (click)="buildFile();copyToClipboard()" >Copy</button>
<button mat-raised-button (click)="copyHTMLToClipboard('#ExistingUserBox')">Copy text</button>buildFile()创建下面的HTML代码字符串，因此可以将其保存为.htm文件。
按钮/函数试图复制：
<div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox >
<div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;">
<div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" >{{Employee_Name}}</div>
<div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:400; color:#464646; line-height: 12pt;">{{Employee_Phone}}</div>
</div>
</div>所有三个函数都成功地将HTML作为文本字符串获得，但是当我粘贴它时，我会得到所有的HTML标记，而不仅仅是格式。
我看过：
虽然他们将类似的代码引用到我正在做的事情，但这两个问题都没有回答如何将格式化的html代码格式化到剪贴板上的问题。
我想得到这个: John Doe 123-4567
而不是得到这个：
<div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox >
<div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;">
<div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" >John Doe</div>
<div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:bold; color:#002a5f; line-height: 12pt;">123-4567</div>
</div>
</div>回答 2
Stack Overflow用户
发布于 2020-03-11 20:16:41
因为您将来自innerHTML的原始HTML放入剪贴板，所以不必对其进行格式化。要得到您想要的，您需要手动格式化，然后再将它放入剪贴板。您可以使用任何图书馆来格式化HTML。
Stack Overflow用户
发布于 2020-03-12 15:11:38
https://www.npmjs.com/package/clipboard-polyfill
工作！
copyMessage(file: string): void {
var htmlFile = new clipboard.DT();
htmlFile.setData("text/html", file);
clipboard.write(htmlFile);
}文件是包含html的字符串。htmlFile是文本/html格式的相同数据，clipboard.write -将htmlFile复制到剪贴板。
这将不会粘贴为纯文本在比如说Notepad++。
但是它确实使用完全格式化的html粘贴到Outlook和MSWord。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60643731
复制相关文章
相似问题
腾讯云开发者
