如何以 Excel 兼容的方式將帶有 colspan 的 HTML 表復制到剪貼板？

Question

下面的復制到剪貼板示例演示了如何將簡單的 HTML 表復制到剪貼板。 一切都或多或少按預期工作，表格可以插入到 Apple Notes、Microsoft Word 等中； 所有應用程序都尊重 colspan 並正確呈現表格。

將此表粘貼到 Excel 時出現問題。 colspan 被簡單地忽略，如下所示：

有誰知道如何修復或解決此問題，例如 Excel 插入尊重單元格跨度的表格？

 const table = document.querySelector('#table'); const copyButton = document.querySelector('#copy'); const pre = document.querySelector('#pre'); copyButton.addEventListener('click', () => { const content = { 'text/html': table.outerHTML }; navigator.clipboard.write([new ClipboardItem(content)]); pre.innerText = JSON.stringify(content); })

 <table id="table" contenteditable="true"> <tr> <td colspan="2">row 0, col 0 - 1</td> <td>row 0, col 2</td> </tr> <tr> <td>row 1, col 0</td> <td>row 1, col 1</td> <td>row 1, col 2</td> </tr> </table> <button id="copy">Copy</button> <br> clipboard content: <pre id="pre" style="overflow:scroll; width:inherit"><pre>

Answer 1

您可以通過復制完整的 HTML 來保留列和行。

const table = document.querySelector("#mytable")
if (table) {
 const blob = new Blob([table.outerHTML], { type: "text/html" });
  const tableHtml = new ClipboardItem({ "text/html": blob });

  navigator.clipboard.write([tableHtml]).then(function () {
  console.log('Async: Copying to clipboard was successful!');
       }, function (err) {
         console.error('Async: Could not copy text: ', err);
       });
};