使用javascript将自定义json对象复制到剪贴板

Posted 2023-05-07

【中文标题】使用javascript将自定义json对象复制到剪贴板

【英文标题】：Copying custom json object to clipboard with javascript

【发布时间】：2015-11-07 02:37:06

【问题描述】：

我正在使用 html5 + javascript 开发一个共享画布。我正在开发复制/粘贴功能，使用 Ctrl+C、+X、+V 没有问题，但我也想添加提供相同功能的典型按钮（主要是为了能够复制/粘贴在平板电脑中）。

管理标准事件的代码非常简单：

window.addEventListener("copy", copyFunc);

...

copyFunc(e)
  if (BDKanvasInstance.selection !== null)
    var data = BDKanvasInstance.selection.serialize();
    var jsonData = JSON.stringify(data);
    e.clipboardData.setData('application/json', jsonData);
    e.preventDefault();
  

但我必须通过按钮访问剪贴板数据...

copyBtn.addEventListener("click", copyBtnFunc);

copyBtnFunc(e)
  /* Any way to access clipboardData or to trigger the standard copy command? */

我见过几种解决方案，包括创建文本区域、插入文本、以编程方式选择文本并使用“execCommand('copy')”，但这不会复制“application/json”类型的文本...

有什么解决办法吗？在计算机上使用键盘快捷键是可以的，但在平板电脑上使用时它们不是解决方案...

谢谢！

【问题讨论】：

为了能够在没有来自用户的初始“复制”事件的情况下修改剪贴板数据，您需要 Flash（This plugin 做得非常好）。但是ios没有Flash。您只针对 android 设备吗？

我的目标是任何 HTML5 浏览器...这就是我不想使用 Flash 的原因，因为它不是跨平台的。谢谢！

好的，那么，我认为没有 Flash 就无法做到这一点（我过去对此进行了大量研究）。您是否打算在同一网站上复制和粘贴？如果是这样，您可以使用 cookie 或 localstorage 作为备份计划（即：当您点击“复制”按钮时，将您想要的值存储在 cookie 中，然后，当您点击另一个“粘贴”按钮时，插入数据从 cookie 到任何你想要的地方。）

是的，如果这一切都发生在同一个页面上，你可以像你一样使用一个简单的 JS 变量（cookie 方法只有在你想跨多个页面复制数据时才相关）。

【参考方案1】：

一切都在同一个页面上完成，所以我已经完成了：

window.addEventListener("copy", copyFunc);

...

copyFunc(e)
  if (BDKanvasInstance.selection !== null)
    var data = BDKanvasInstance.selection.serialize();
    if (e && e.clipboardData)
    
      var jsonData = JSON.stringify(data);
      e.clipboardData.setData('application/json', jsonData);
      e.preventDefault();
     else 
      internalClipboard = data;
    
  


copyBtn.addEventListener("click", copyBtnFunc);

copyBtnFunc(e)
  copyFunc(null);

与三个动作（复制/剪切/粘贴）类似。按钮从它们的处理程序调用函数，参数为空。按钮有一个“剪贴板”，快捷方式有另一个。很脏，但可以解决问题...

谢谢！