复制到剪贴板需要花费大量时间

Question

我有以下代码将大约25MB的数据复制到剪贴板：

// star time after populating HTML and Text
const start_time = new Date().getTime();
navigator.clipboard.write([
    new ClipboardItem({
        "text/html": new Blob([html], {
            type: "text/html",
        }),
        "text/plain": new Blob([text], {
            type: "text/plain",
        }),
    }),
]).then(() => {
    // end time after async clipbaord api method is completed
    const end_time = new Date().getTime();
    console.log("writing to clipboard : DONE in", (end_time - start_time) / 1000, "s");
});

这需要 45 秒！

clipboard.write(...) 为什么要执行这么长时间？有没有一些方法可以改进这个问题呢？或者说它不适用于复制大量数据？

- samuelbrody1249

---

Blob数据的来源在哪里？（来自本地数据库或文件吗？/远程站点？/通过浏览器提供的数据源？） - Ken Lee

@KenLee 在浏览器中使用本地数据。零网络传输。 - samuelbrody1249

你正在使用哪个浏览器？（IE？） - Ken Lee

@KenLee Chrome。 - samuelbrody1249

@KenLee，最好的复现方式可能就是复制一些大小约为20MB的HTML或XML文档，并将其用于测试。 - samuelbrody1249

Answer 1

这可能是因为他们在将其附加到剪贴板之前对您的HTML进行了清理，因此，例如，如果您的脚本尝试将恶意脚本作为HTML插入，则当用户将其粘贴到可编辑元素中时，它不会被执行。

清理25MB的HTML确实需要一些时间，但应该并行完成，而不会阻塞您的UI。

不幸的是，StackSnippets沙箱iframe不允许使用Clipboard API，因此这里有一个glitch项目，您可以在其中看到输入确实已经过清理。

glitch的代码：

btn.onclick = (evt) => {
  const dangerous_content = `<script>alert("I'm bad");<\/script><img src="" onerror="alert('Me too')">`;
  navigator.clipboard.write([
    new ClipboardItem({
      "text/html": new Blob([dangerous_content, "Hey"], { type: "text/html" })
    })
  ]);
};
document.onpaste = (evt) => {
  log.textContent = `raw "text/html" data from paste event: 
${ evt.clipboardData.getData("text/html") }`;
};

输出：

富文本格式： brokenHey
原始标记格式： <meta charset='utf-8'><img src="https://highfalutin-handy-count.glitch.me/" alt="broken">Hey

- Kaiido

---

我看了，但对我来说复制一些东西需要40秒，即使是异步完成的，这仍然是一个非常糟糕的用户体验（相比之下，同步复制相同数量的数据只需要1.1秒）。有没有任何解决方法，或者其他异步复制的方式？ - samuelbrody1249

嗯...25MB是“很多”。你为什么需要复制25MB的HTML到剪贴板呢？复制或粘贴那么多数据会导致大多数应用程序崩溃。难道你不能创建一个HTML文件的下载链接吗？ - Kaiido