navigator.clipboard.write : 'Clipboard': Iterator getter 不可调用答案

【问题标题】：navigator.clipboard.write : 'Clipboard': Iterator getter is not callablenavigator.clipboard.write : 'Clipboard': Iterator getter 不可调用
【发布时间】：2020-05-07 11:55:40
【问题描述】：

我正在尝试使用 navigator.clipboard.write(blob) 将 DOMString 复制到剪贴板。我可以使用 clipboard.writeText('text') 并复制它，但我需要 text/html。

失败的例子：

const copy = async () => {
 await navigator.permissions.query({name: "clipboard-write"}).then(result => {
    if (result.state == "granted" || result.state == "prompt") {
        const data = new Blob(['<div>test</div>'], {type : 'text/html'})
        navigator.clipboard.write(data);
    }
})}

当我运行它时，我收到以下错误：

Uncaught (in promise) TypeError: Failed to execute 'write' on 'Clipboard': Iterator getter is not callable.

我也尝试将 text/html 更改为 text/plain，我认为这会使它的功能与 writeText 相同，但没有。

然后我尝试将 blob 包装在一个新的 ClipboardItem 中，这是我从另一个问题中找到的：

const data = new Blob(['<div>test</div>'], {type: 'text/html'})
const item = new ClipboardItem({'text/html': data});
navigator.clipboard.write(item);

任何指导将不胜感激。

【问题讨论】：

标签： javascript blob clipboard

【解决方案1】：

根据https://www.w3.org/TR/clipboard-apis/#clipboard-interface，Clipboard.write 采用ClipboardItems 的序列。您是否尝试过类似的方法？

navigator.clipboard.write([item]);

但是，请注意 Chrome（在撰写本文时为 79.0.3945.2/Canary）似乎还不支持通过剪贴板 API 编写“text/html”——仅支持“text/plain”和“image/png” .

【讨论】：

复制为 text/html 适用于 Chrome (95.0.4638.69)

【解决方案2】：

我花了这么多时间在这上面，终于弄明白了！这适用于 Chrome，但不知道是否适用于其他浏览器。这都是关于 event.clipboardData.setData。希望这会有所帮助！

var textString = 'This is plain text';
var htmlString = `<p>${textString}
    new line here</p><p>new paragraph</p>`;
var clipboardDataEvt = event.clipboardData;
clipboardDataEvt.setData('text/plain', textString);
clipboardDataEvt.setData('text/html', htmlString);

确保它包含在剪贴板的事件侦听器中，例如剪切、复制或粘贴，因为我相信这可以让您通过以下方式访问 clipboardData 事件：

document.addEventListener('cut', function (e){});

【讨论】：