将图像和 JSON 对象写入剪贴板

Question

我正在尝试使用剪贴板API将图像和json对象写入窗口剪贴板。 (我正在使用 vue 和电子( 我成功地编写了图像和纯文本，但是当我尝试编写json对象时，它返回了一个错误：

Uncaught (in promise) DOMException localhost/:1

我的代码是(this.object是一个JSON对象(

const textBlob = new Blob(['this.object.data','this.object.data2',...], {type: 'text/plain'});
const objBlob = new Blob([JSON.stringify(this.object)], {type: 'application/json'});
// defined a canvas with an image
canvas.toBlob(function(blob) {
const item = new ClipboardItem({
'image/png': blob,
'text/plain': textBlob,
'application/json': objBlob
});
navigator.permissions.query({name: 'clipboard-write'}).then((result) => {
if (result.state === 'granted' || result.state === 'prompt') {
navigator.clipboard.write([item]);
}
} 
}, 'image/png');

在这种情况下， 它向我显示了错误，但是如果我删除项目中的'application/json': objBlob，那么它可以工作。看起来剪贴板不接受 json 对象。很奇怪。

但是，我想将对象与图像一起写入剪贴板。 有没有解决这个问题的解决方案？也许我应该使用剪贴板 API 以外的其他东西？

提前谢谢你！

Answer 1

Chrome 正在积极研究它，但目前，他们仍然不支持编写"application/JSON"......

因此，您仍然必须将其编写为"text/plain"(这对于大多数应用程序来说应该足够了(。

const item = new ClipboardItem({
'image/png': blob,
'text/plain': objBlob
});

Answer 2

我添加了一个捕获以查看实际错误： DOMException：不支持写入类型应用程序/json。

如果您使用纯文本或 utf，那么您应该能够将 json 读回对象。

仅当对象粘贴到另一个应用程序中时，我才会使用剪贴板，否则我将使用本地或会话存储。

const objBlob = new Blob([JSON.stringify({'myobjLabel' : 'myObj'})], {type: 'text/plain'});
const item = new ClipboardItem({
'text/plain': objBlob
});
navigator.permissions.query({name: 'clipboard-write'}).then((result) => {
if (result.state === 'granted' || result.state === 'prompt') {
navigator.clipboard.write([item]).catch((ex) => { 
console.log(ex) 
} ); 
}
});