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

问题描述

我只是在寻求建议.我一直在互联网上寻找有关如何将带有文本的HTML表结构复制到剪贴板的可能解决方案，但到目前为止还不算幸运.

Im just looking for advice on this. Ive been looking trough the internet for possible solutions on how to copy an HTML table structure with it's text to clipboard but no so lucky so far.

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

What I have at the moment is a simple table with data and users would need to copy that into an email using Outlook and when you copy/paste it. Pasting this manually into Outlook would show the table structure and its text rendered correctly. The only issue is that sometimes users could have several large tables making it sometimes clumsy to copy and scroll down at the same time to reach the bottom of the page.

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

So I am looking to get a simple button that essentially will do that automatically. So I am looking for something that would find my main div container and copy all of the table structures and text within it to the user's clipboard. I found that the most popular solution is called ZeroClipboard however it only copies the text and not the actual HTML table structure with it.

有人会知道这是否可以用Jquery或其他插件来完成吗?我将对此有任何建议.

Would anyone know if this is something that is possible to accomplish with Jquery or other addons? I would appreciate any advice on this.

推荐答案

我不认为您可以通过按钮触发复制事件，但是建议采用一种解决方法:剪贴板API允许您在复制事件上设置自定义数据.因此，您可以做的是监听表上的copy事件，并以文本形式发送HTML.因此，从表中触发复制事件的用户将在剪贴板中获取HTML(或所需的任何文本).

I don't think you can trigger copy event with a button, but a suggestion for a workaround: clipboard API allows you to set custom data on copy event. So what you could do is listen for copy event on your table and send HTML as text instead. So a user triggering a copy event from your table would get the HTML (or whichever text you want) in his clipboard instead.

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

In snippet example below select some text and copy it:

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/

Doc for clipboard API: http://www.w3.org/TR/clipboard-apis/

从caniuse发送: http://caniuse.com/#feat=clipboard

And from caniuse: http://caniuse.com/#feat=clipboard

这篇关于将HTML表格结构复制到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！