[英]Copy HTML table structure to clipboard
我只是在寻求建议。 我一直在互联网上寻找有关如何将带有文本的HTML表结构复制到剪贴板的可能解决方案,但到目前为止还没有那么幸运。
目前,我拥有的是一个简单的数据表,用户需要使用Outlook以及在复制/粘贴数据时将其复制到电子邮件中。 手动将其粘贴到Outlook中将显示表结构及其文本正确呈现。 唯一的问题是,有时用户可能有多个大表,有时有时笨拙地同时复制和向下滚动以到达页面底部。
因此,我希望获得一个简单的按钮,该按钮本质上将自动执行此操作。 因此,我正在寻找可以找到我的主要div容器并将其中的所有表结构和文本复制到用户剪贴板的东西。 我发现最受欢迎的解决方案称为ZeroClipboard,但是它仅复制文本,而不复制文本的实际HTML表结构。
有谁知道这是否可以通过Jquery或其他插件来完成? 我将不胜感激对此的任何建议。
我认为您无法通过按钮触发复制事件,但是建议采取一种解决方法:剪贴板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
您也可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.