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

Question

我正在使用 HTML5 + javascript 开发共享 Canvas 。我正在开发复制/粘贴功能，使用 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”类型的文本...

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

谢谢!

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

和这三个 Action 类似(复制/剪切/粘贴)。这些按钮使用空参数从它们的处理程序调用函数。按钮有一个“剪贴板”，快捷方式有另一个“剪贴板”。肮脏，但可能会成功......

谢谢!