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

Just a note: the clipboard JS API is now [supported](http://caniuse.com/#feat=clipboard) quite well among the top browsers. But I don't know it this could help with binary data copying. — Matouš Borák, Jun 07 '16 at 09:43
Perhaps you might consider the technique described [here](http://stackoverflow.com/a/5416795/1544012) that allows to drag & drop files from the server to the desktop? It is said to work only in chrome though. — Matouš Borák, Jun 08 '16 at 09:49
My goal is to put a ZIP blob with data flavor 'GVML', with the end goal of copy/pasting charts from browser to Office as editable objects. — prototype, Jun 08 '16 at 14:17
Wouldn't letting web pages copy binary data be a possible security issue as the uses would not know the contents? — 16patsle, Feb 11 '17 at 14:36
I don't think binary is possible. The native solution BoraMa suggested is for text. See [this answer](http://stackoverflow.com/a/33928558/266535) for more info. — styfle, May 05 '17 at 14:55

score 1 · Answer 1 · answered Jun 01 '17 at 07:25

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