将 HTML 表格结构复制到剪贴板

Question

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

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

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

有谁知道这是否可以用 Jquery 或其他插件来完成？我将不胜感激。

Answer 1

我不认为您可以使用按钮触发复制事件，但建议解决方法：剪贴板 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