在浏览器 JavaScript 中，我在将 csv 文本写入剪贴板时收到错误消息

Question

在浏览器 JavaScript 中，我试图将一些 CSV 数据写入剪贴板，以便用户可以粘贴到 excel。这是我的代码：

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

问题：它不起作用，我在控制台中收到此错误消息：

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

Answer 1

https://www.w3.org/TR/clipboard-apis/#writing-to-clipboard 这是我能找到的所有内容，
"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."
我真的不明白:(但我希望它能有所帮助:)

Answer 2

Chrome还是actively working on implementing this API, and while the specs要求UA支持一堆MIME类型，目前只支持"text/plain"和"image/png".

所以暂时还是要靠丑execCommand('copy')+连线copy事件来设置自己的数据...

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>

虽然我会注意到我没有尝试将其粘贴到 MS Excel 中，所以我不知道这是否会解决您的问题，但是 Google 表格和 Apple 的 Numbers 都可以仅查看 plain/text 值，但能够自动识别 CSV 和 TSV。

Answer 3

我刚刚通过试错找到了答案。秘诀似乎是使用格式为 csv 的文本，其中 tabs 作为分隔符而不是逗号。不需要ClipboardItem接口，直接使用navigator.clipboard.writeText

即可

这是新代码

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

在浏览器 JavaScript 中，我在将 csv 文本写入剪贴板时收到错误消息

in browser JavaScript, I get error message when writing csv text to clipboard

javascript

dom

google-chrome

navigator