javascript - 将 HTML 表结构复制到剪贴板

Question

我只是在寻求这方面的建议。我一直在互联网上寻找可能的解决方案，以了解如何将带有文本的 HTML 表格结构复制到剪贴板，但到目前为止还没有那么幸运。

我目前拥有的是一个包含数据的简单表格，用户需要使用 Outlook 将其复制到电子邮件中，然后再复制/粘贴它。将其手动粘贴到 Outlook 中会正确显示表格结构及其文本。唯一的问题是，有时用户可能有几个大表格，这使得同时复制和向下滚动以到达页面底部有时很笨拙。

所以我希望获得一个简单的按钮，基本上可以自动执行此操作。所以我正在寻找可以找到我的主 div 容器并将其中的所有表结构和文本复制到用户剪贴板的东西。我发现最流行的解决方案称为 ZeroClipboard，但它只复制文本而不是实际的 HTML 表格结构。

有人知道这是否可以用 Jquery 或其他插件来完成吗？如果有任何建议，我将不胜感激。

Answer 1

您也可以使用 execCommand 方法。

例子:

const btnCopyText = document.querySelector('#btn-copy-text');
const btnCopyTable = document.querySelector('#btn-copy-table');

const elText = document.querySelector('p');
const elTable = document.querySelector('table');

const copyEl = (elToBeCopied) => {
  let range, sel;

  // Ensure that range and selection are supported by the browsers
  if (document.createRange && window.getSelection) {

    range = document.createRange();
    sel = window.getSelection();
    // unselect any element in the page
    sel.removeAllRanges();

    try {
      range.selectNodeContents(elToBeCopied);
      sel.addRange(range);
    } catch (e) {
      range.selectNode(elToBeCopied);
      sel.addRange(range);
    }

    document.execCommand('copy');
  }

  sel.removeAllRanges();

  console.log('Element Copied! Paste it in a file')
};

btnCopyText.addEventListener('click', () => copyEl(elText));
btnCopyTable.addEventListener('click', () => copyEl(elTable));

HTML:

<div>
  <button id="btn-copy-text">Copy this text 👇🏻</button>
  <p id="text-to-copied">Text to be copied</p>
</div>

<div class="table-container">
  <button id="btn-copy-table">Copy Table</button>
  <table id="table-to-copied" border="1">
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
  </table>
</div>  

实例:https://stackblitz.com/edit/js-copy-element