In Browser JavaScript, I am trying to write some CSV data to the clipboard so that that user can paste to excel. Here is my code:

function onClick(){
      var txt=get_some_valid_csv_text()
      var items=[
          new ClipboardItem({
            'text/csv': new Blob([txt], { type: 'text/csv' })
          })
        ]
      navigator.clipboard.write(items)
}

The problem: It doesn't work, and I get this error message in the console:

Uncaught (in promise) DOMException: Sanitized MIME type text/csv not supported on write.

In Browser JavaScript, I am trying to write some CSV data to the clipboard so that that user can paste to excel. Here is my code:

function onClick(){
      var txt=get_some_valid_csv_text()
      var items=[
          new ClipboardItem({
            'text/csv': new Blob([txt], { type: 'text/csv' })
          })
        ]
      navigator.clipboard.write(items)
}

The problem: It doesn't work, and I get this error message in the console:

Uncaught (in promise) DOMException: Sanitized MIME type text/csv not supported on write.

• javascript
• google-chrome
• dom
• navigator

• CSV is text in essence, would using text/plain instead of text/csv work for you? – Florent Roques Commented May 5, 2020 at 2:31
• @FlorentRoques no, because it would paste like text in excel, so the user would need to further process it in excel. most likely though the text-to-data feature of excel. – yigal Commented May 5, 2020 at 2:40
• Is this code on a secure (HTTPS) site or in a web extension? – Jaromanda X Commented May 5, 2020 at 3:54
• @JaromandaX , its running on HTTPS – yigal Commented May 5, 2020 at 4:39

3 Answers 3

Chrome is still actively working on implementing this API, and while the specs ask for UAs to support a bunch of MIME types, they currently only support "text/plain" and "image/png".

So for the time being, we still have to rely on the ugly execCommand('copy') + wiring the copy event to set our own data...

document.querySelector('button').onclick = (e) => {
  const data = `A1,B1
A2,B2
A3,B3`;
  document.oncopy = e => {
    e.preventDefault(); // we handle it
    const dT = e.clipboardData;
    dT.setData( 'text/plain', 'this is plain text' ); // as plain text
    dT.setData( 'text/csv', data ); // as csv
  }
  document.execCommand( 'copy' );
  document.oncopy = null;
};

// to check what we have copied
document.querySelector('div[contenteditable]').onpaste = e => {
  e.preventDefault();
  const dT = e.clipboardData;
  console.log( 'retrieved "%s" as csv', dT.getData('text/csv') );
  console.log( 'retrieved "%s" as text', dT.getData('text/plain') );
};

<button>copy to clipboard</button>

<div contenteditable>paste here</div>

Though I shall note I didn't try to paste this in MS Excel, so I don't know if that will fix your issue, but both Google Sheets and Apple's Numbers do only look at the plain/text value but are able to recognize CSV and TSV automatically.

I just found the answer by trial an error. The secret, it seems, is to use text that is formatted as csv with tabs as separator rather than ma. No need for the ClipboardIteminterface, use can just use navigator.clipboard.writeText

This is the new code

function onClick(){
      var txt=get_some_valid_csv_text(sep='\t')
      navigator.clipboard.writeText(txt)
}

https://www.w3/TR/clipboard-apis/#writing-to-clipboard this is all I could find,
"These data types must be placed on the clipboard with a corresponding native type description if added to a DataTransfer object during copy and cut events."
I really don't understand it :( but I hope it helps :)