在浏览器 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)
}

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

未捕获（承诺中）DOMException：写入时不支持净化的 MIME 类型 text/csv。

Answer 1

Chrome 仍在积极致力于实现此 API，虽然规范要求 UA 支持一堆 MIME 类型，但它们目前仅支持"text/plain"和"image/png"。

所以暂时我们还是要靠丑陋的execCommand('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 Sheets 和 Apple 的 Numbers 都只查看纯文本/文本值，但能够识别自动生成 CSV 和 TSV。