时间戳

首页 > 解决方案 > 将图像和 json 对象写入剪贴板

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

问题描述

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

先感谢您！

标签： javascriptjsonvue.jselectronclipboard

解决方案

我添加了一个 catch 来查看实际错误：DOMException: Write type application/json not supported。

如果您使用纯文本或 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) 
          } ); 
      }
    });

推荐阅读