Question

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

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

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

有人知道这是否可以通过Jquery或其他插件实现？对此我有任何建议。

Answer 1

我认为您不能使用按钮触发复制事件，但建议您使用解决方法：剪贴板API允许您在复制事件上设置自定义数据。所以你可以做的就是在你的桌子上听{4}}事件并发送copy作为文本。因此，从您的表格中触发复制事件的用户将在其剪贴板中获得HTML（或您想要的任何文本）。

在下面的代码段示例中，选择一些文字并将其复制：

HTML

document.getElementById('sample').addEventListener('copy', function (e) {
    var html_data = document.getElementById('sample').innerHTML;
  document.getElementById('result').textContent = html_data;
    e.clipboardData.setData('text/plain', html_data);
    e.preventDefault();
});

span
{
  color: red;
}

剪贴板API文档：http://www.w3.org/TR/clipboard-apis/

来自caniuse：http://caniuse.com/#feat=clipboard

Answer 2

您还可以使用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

将HTML表结构复制到剪贴板

2 个答案: