Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何将HTML源代码复制到剪贴板?_Html_Angular_Clipboard - Fatal编程技术网

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

如何将HTML源代码复制到剪贴板?,html,angular,clipboard,Html,Angular,Clipboard,我有一段代码要复制,然后粘贴到HTML阅读器(MS Word或Outlook)中 它应该保留HTML格式,但不能将HTML粘贴为文本 我有三个职能: copyHTMLToClipboard(id:string): void { const fromHtml = this._eRef.nativeElement.querySelector(id).innerHTML; const newNode = this.render.createElement('div'); thi

我有一段代码要复制,然后粘贴到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>


{{Employee_Name}}
{{Employee_Phone}}
这三个函数都成功地将HTML作为文本字符串获取,但是当我粘贴它时,我得到了所有HTML标记,而不仅仅是格式

我看过:

虽然它们引用了与我所做的类似的代码,但它们都没有回答如何将格式化的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>

无名氏
123-4567

因为您将innerHTML中的原始HTML放入剪贴板,所以它不必格式化。要获得所需内容,需要在将其放入剪贴板之前手动格式化。您可以使用任何格式来格式化HTML。

工作

copyMessage(file: string): void {
    var htmlFile = new clipboard.DT();
    htmlFile.setData("text/html", file);
    clipboard.write(htmlFile);
  }
文件是包含html的字符串。 htmlFile是文本/html格式的相同数据 clipboard.write-将HTML文件复制到剪贴板

在say Notepad++中,这不会粘贴为纯文本。

但它确实使用完全格式化的html粘贴到Outlook和MSWord

“保留HTML格式,但不将HTML粘贴为文本”是什么意思?你能举一个例子,说明你想要什么,以及你用当前代码得到什么吗?这能回答你的问题吗?异端猴子-如果我知道如何操纵copyToClip(str)来达到我的目的,这可能是你问题的一部分“我想得到这个”正是你想要的?我正要用编辑器的
{}
工具编辑这个问题,但后来我看到这个部分与“而不是得到这个”中显示的部分相同。。。