javascript - 将图像和json对象写入剪贴板

Question

我正在尝试使用剪贴板API将图像和json对象写入窗口剪贴板。
(我正在使用vue和 Electron )
我成功编写了图像和纯文本，但是当我尝试编写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

我添加了一个陷阱来查看实际错误:
DOMException:不支持写入类型application/json。

如果您使用纯文本/文本或utf，则应该能够将json重新读入对象。

如果将对象粘贴到另一个应用程序中，则只会使用剪贴板，否则，我将使用本地或 session 存储。

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) 
          } ); 
      }
    });