复制HTML表结构到剪贴板

Question

我只是想寻求关于这个问题的建议。我已经在互联网上搜索了可能的解决方案，以便将HTML表格结构及其文本复制到剪贴板中，但迄今为止没有什么好的解决方案。

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

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

请问是否有人知道是否可以使用Jquery或其他插件来完成这个任务？我将非常感激任何建议。

- Daniel Ellison

---

你能否配置Zero Clipboard来复制一个隐藏的输入框，然后将DOM结构放置在该输入框中？ - Jason W

以完全不同的角度来看待这个问题：为什么他们需要将内容复制/粘贴到电子邮件客户端中，而不是直接告诉你的页面发送当前高亮范围的电子邮件呢？（你的页面会将此信息告知服务器，然后服务器知道该向用户发送什么内容，以供其处理所需的任何操作？） - Mike 'Pomax' Kamermans

我考虑过使用某种电子邮件模板，并自动填充HTML表格的选项。我不是最擅长使用jquery来做这样的事情，但我会研究一下这个可能性。 - Daniel Ellison

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

- marianocodes

---

这个解决方案似乎适用于所有浏览器。谢谢您！但问题是......我该如何自定义它以使其与我的代码一起工作。我有一个带有id（如＃Table1）的表格，这将如何影响代码。您的JavaScript对我来说太高级了，我无法弄清楚任何内容:( - Aamir

@Aamir，您的问题中没有代码示例。请发布一个带有示例的链接。 - marianocodes

Answer 2

我不认为你可以通过按钮来触发复制事件，但是有一个解决方法的建议：剪贴板API允许你在复制事件上设置自定义数据。因此，你可以监听表格上的“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;
}

<div id='sample'>
    <div style="padding-bottom: 5px;">Select some of this text and copy it to clipboard using ctrl+c or right-click+copy.</div>
  
</div>
<div >The content of the clipboard is: <span id="result"></span></div>

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

来自 caniuse 网站的信息：http://caniuse.com/#feat=clipboard

- Julien Grégoire

---

HI Julien，感谢你的代码，请问我该如何从按钮中触发复制呢？我对这个工作原理有些困惑。 - Daniel Ellison

抱歉我表达不清楚，见编辑。我认为按钮不可能实现，这只是一个解决方法的建议。 - Julien Grégoire

感谢澄清，目前用户可以轻松地突出显示表格并右键复制或按CTRL-C并将其粘贴到电子邮件中。我真的在寻找一个按钮，可以自动为用户复制DIV内容。 - Daniel Ellison

我知道现在用户可以复制，但这个解决方案允许您在他们复制时推送您想要的内容。他们可以只选择一个单词或一个字母，当他们复制时，他们会得到整个表格的HTML。或者您可以有一个完全不同的div，上面写着“复制此内容以获取整个表格”，当他们这样做时，您就可以推送整个表格。无论如何，这是一个变通方法，但也许它并不能满足您的需求。 - Julien Grégoire