Question

我有一段代码要复制，然后粘贴到HTML阅读器（MS Word或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标记，而不仅仅是格式。

我看过：

Javascript - copy all html code into clipboard

Copy html to clipboard (Angular)

，尽管他们引用的代码与我正在执行的操作类似，但都没有回答如何将格式化的html代码放入剪贴板的问题。

我想得到这个：约翰·杜 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>

Answer 1

由于您将剪贴板中的innerHTML原始HTML放入剪贴板，因此不必对其进行格式化。要获得所需的内容，需要在将其放入剪贴板之前对其进行手动格式化。您可以使用任何library来格式化HTML。

Answer 2

https://www.npmjs.com/package/clipboard-polyfill

有效！！！

copyMessage(file: string): void {
    var htmlFile = new clipboard.DT();
    htmlFile.setData("text/html", file);
    clipboard.write(htmlFile);
  }

file是一个包含html的字符串。 htmlFile是text / html格式的相同数据 Clipboard.write-将htmlFile复制到剪贴板。

这不会以纯文本形式粘贴在记事本++中。
但是，它确实使用完全格式化的html粘贴到Outlook和MSWord。

如何将HTML源代码复制到剪贴板？

2 个答案: