Question

我在angular5上工作，我必须从HTML复制一些clipboard代码并将其粘贴到Outlook中。我已经针对IE实现了此功能，但chrome中无法使用相同的代码，chrome不会复制任何内容，也不会显示任何控制台错误。

基本上，一旦我复制，我就必须创建一个hyperlink并在Outlook中越过该超链接，并且当用户单击该链接时，应该打开带有该超链接引用的新页面。我的代码如下，请帮助我实现chrome的复制功能？

public copyToClipboard {
  const body = document.createElement('body');
  const breakLine = document.createElement('br');
  const ol = document.createElement('ol');

  const range = document.createRange();
  document.body.appendChild(body);
  body.appendChild(ol);

  let name: string;
  this.selectedFiles.forEach(doc => {
    const docURL = this.serviceCall();
    const anchor = document.createElement('a');
    const li = document.createElement('li');

    anchor.href = docURL;
    anchor.text = doc.fileName;
    name = doc.name;
    body.appendChild(li).appendChild(anchor);
   });
    range.selectNode(body);

    window.getSelection().addRange(range);
    document.execCommand('copy');
    document.body.removeChild(body);
}

//HTML
<button pButton (click)="copyToClipboard()"></button>

（请忽略我输入的代码中是否存在拼写错误，因为我键入的是代码而不是复制粘贴，此代码在IE中是完美的）

Answer 1

我想他们最近对异步ClipboardAPI的实现使Chrome改变了行为。 execCommand('copy')，因为它现在似乎是异步方法。
execCommand应该是一种同步方法，因此有资格视为浏览器错误。

现在的解决方法是在删除源元素之前等待一会儿。

（还要注意，在此处使用元素是个坏主意，实际上是问题的另一部分）。

const obj = {
  serviceCall() { return Math.random();},
  selectedFiles: [
    { name: 'foo', fileName: 'foo.bar' },
    { name: 'bar', fileName: 'bar.foo' }
  ],
  copyToClipboard() {
    // don't use a <body> element
    const body = document.createElement('div');
    const breakLine = document.createElement('br');
    const ol = document.createElement('ol');

    const range = document.createRange();
    document.body.appendChild(body);
    body.appendChild(ol);

    let name = ""; // we're in pure js
    this.selectedFiles.forEach(doc => {
      const docURL = this.serviceCall();
      const anchor = document.createElement('a');
      const li = document.createElement('li');

      anchor.href = docURL;
      anchor.text = doc.fileName;
      name = doc.name;
      body.appendChild(li).appendChild(anchor);
    });
    range.selectNode(body);

    window.getSelection().addRange(range);
    document.execCommand('copy');
    // wait just a bit
    requestAnimationFrame(() =>
      document.body.removeChild(body)
    );
  }
}

btn.onclick = e => obj.copyToClipboard();

<button id='btn'>
  copy to clipboard
</button>
<textarea>paste here to check your clipboard's content</textarea>

无法将HTML格式的字符串复制到Chrome中的剪贴板

1 个答案: