在浏览器中复制二进制数据

Question

复制到剪贴板功能的最新技术探究

Flash替代方案

• 我找到了以下可供选择的替代方案：
  • Zclip：我们正在使用
  • zeroclipboard（祖先，zclip使用其按钮Flash电影）：仅限文本
  • Clippy：页面中仅限文本 https://github.com/mojombo/clippy
• 你可以在(ActionScript:Flash)代码中看到：http://code.google.com/p/zeroclipboard/source/browse/trunk/ZeroClipboard.as (第77行)
• 他们使用System.setClipboard(cliptText)调用，该调用仅支持纯文本字符串，正如我们可以在Adobe AIR API参考文档中看到的那样：http://help.adobe.com/en_US/air/reference/html/flash/system/System.html
• 因此，我们无法通过Flash传递格式化文本。

HTML5替代方案

有一个API处于草案阶段，用于标准化剪贴板事件，但目前尚未在任何浏览器中实现：http://dev.w3.org/2006/webapi/clipops/

我的Rails / Zclip实现

我正在使用zclip（基于zeroclipboard）将文本从restful服务复制到系统剪贴板：

$('.copy-to-clipboard').zclip
  path:'/ZeroClipboard.swf'
  setHandCursor: true
  copy: -> 
    ajaxReturn = $.ajax
     type: 'GET'
     async: false
     url: '/resources/copy_to_clipboard/' + $(this).attr("class").match(/[0-9]+/)
    return ajaxReturn.responseText

这是 CoffeeScript。

如果服务（/resources/copy_to_clipboard/）提供文本，它会被正确复制。但如果它提供 DOCX 文件，它就无法正确地复制到剪贴板。请查看 Rails 控制器：

  def copy_to_clipboard
    send_file @resource.resource_content.content.file.file, :type => 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  end

问题

你曾经解决过将二进制数据复制到剪贴板的问题吗？如果有，你是如何解决的？

谢谢

- jlebrijo

---

只是一点提示：剪贴板JS API现在在主流浏览器中得到了很好的支持。但我不知道这是否有助于二进制数据复制。 - Matouš Borák

也许你可以考虑一下这里描述的技术，它允许从服务器拖放文件到桌面？尽管据说只能在Chrome浏览器中工作。 - Matouš Borák

我的目标是将一个数据类型为“GVML”的ZIP blob放入剪贴板，最终实现从浏览器复制/粘贴图表到Office中作为可编辑对象。 - prototype

让网页复制二进制数据不会成为可能的安全问题吗？因为用户可能不知道内容。 - 16patsle

我认为二进制不可能。BoraMa提供的本地解决方案是针对文本的。有关更多信息，请参见此答案：https://dev59.com/fHRC5IYBdhLWcg3wJNcN#33928558。 - styfle

Answer 1

我阅读了剪贴板API和事件，并编写了以下代码，这对我很有效。唯一的问题是处理NULL (0x0)值。使用代码的方法是使用您想要的二进制值设置x数组，并调用document.execCommand('copy')函数，恭喜您，您的数据已经复制到剪贴板中！

var x = [0x1b, 0x68, 101, 108, 108, 0x6f, 0x7, 0x8];
var button = document.getElementById("copy-button");

button.addEventListener("click", function() {
  document.execCommand('copy');
}, false);

document.addEventListener('copy', function(e) {
  var str = '';
  x.forEach(function(d) {
    str += String.fromCharCode(d)
  })
  //You can ignore setting third parameter value
  e.clipboardData.setData('text', str, true);
  console.info('data copied');
  e.preventDefault();
});

<button type="button" id="copy-button">Copy to clipboard</button>

以下是在Notepad++中使用显示所有字符菜单项的粘贴结果：
希望这能帮到你；）

- Yashar Aliabbasi