将图像和 json 对象写入剪贴板答案

【问题标题】：write image & json object to clipboard将图像和 json 对象写入剪贴板
【发布时间】：2020-04-16 09:33:15
【问题描述】：

我正在尝试使用剪贴板 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 以外的其他东西？

提前谢谢你！

【问题讨论】：

标签： javascript json vue.js electron clipboard

【解决方案1】：

我添加了一个 catch 来查看实际错误： DOMException: 不支持写入类型 application/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) 
          } ); 
      }
    });

【讨论】：

【解决方案2】：

Chrome 是actively working on it 不过暂时还不支持写"application/JSON"...

所以你还是要把它写成"text/plain"（对于大多数应用来说应该足够了）。

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

【讨论】：