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

Question

我正在尝试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);

任何指导将不胜感激。

Answer 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”。