Copy to clipboard BINARY data in browsers

Question

State of the art in Copy to Clipboard feature (My investigations)

Flash alternative

• I have found the following alternatives:
  • Zclip: we are using
  • zeroclipboard (ancestor, zclip uses its button flash movie): only text
  • Clippy: only text in the page https://github.com/mojombo/clippy
• You can see in the (ActionScript:Flash) code: http://code.google.com/p/zeroclipboard/source/browse/trunk/ZeroClipboard.as (line 77)
• They use System.setClipboard(cliptText) call, which only supports plain text strings, as we can see in Adobe AIR API refference: http://help.adobe.com/en_US/air/reference/html/flash/system/System.html
• So we cant pass formatted text through flash.

HTML5 alternative

There is an API in draft to standardize clipboard events, but is not implemented in any browser for the moment http://dev.w3.org/2006/webapi/clipops/

My Rails/Zclip implementation

I'm using zclip (based on zeroclipboard) to copy text from a restfule service to the system clipboard:

$('.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

It's coffeescript.

If the service (/resources/copy_to_clipboard/) serves text it's copied right. But if it servers a DOCX file, it doesn't copy right to the clipboard. Take a look at the rails controller:

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

The question

Have you solved the copy BINARY data to clipboard any time ? and how ?

Thanks

Answer 1

I read Clipboard API and events and write following code and that works for me.The only issue is working with NULL (0x0) value.Way of using code is setting x array with your desired binary values and call document.execCommand('copy') function,congratulation your data is in clipboard!

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>

And here is paste result in Notepad++ with Show All Characters menu item on:
I hope this helps ;)