将整个 html 表复制到剪贴板 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26053004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
copy whole html table to clipboard javascript
提问by RKS
I have write javascript to select the table but I want to now automaticaly copy it after the click of the button.Please help me.My javascript is like this.
我已经写了 javascript 来选择表格，但我现在想在点击按钮后自动复制它。请帮帮我。我的 javascript 是这样的。
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
document.execCommand('Copy');
} catch (e) {
range.selectNode(el);
sel.addRange(range);
document.execCommand('Copy');
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand('Copy');
}
}
回答by Dio
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
document.execCommand("Copy");}
回答by vitorio
UPDATE
更新
Use this code instead.
请改用此代码。
Code:
代码：
<script type="text/javascript">
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand("Copy");
}
}
</script>
<table id="table">
<thead>
<tr><th>Heading</th><th>Heading</th></tr>
</thead>
<tbody>
<tr><td>cell</td><td>cell</td></tr>
</tbody>
</table>
<input type="button" value="select table"
onclick="selectElementContents( document.getElementById('table') );">
回答by penny chan
by using clicpboard.jsmaking it much easier.
for more info, check: https://webdesign.tutsplus.com/tutorials/copy-to-clipboard-made-easy-with-clipboardjs--cms-25086
通过使用clicpboard.js使它更容易。有关更多信息，请查看：https: //webdesign.tutsplus.com/tutorials/copy-to-clipboard-made-easy-with-clipboardjs--cms-25086
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js">
(function(){
new Clipboard('#copy-table-button');
})();
</script>
<button class="btn" id="copy-table-button" data-clipboard-target="#table_results">Copy</button>
<table id='table_results' >
</table>
回答by R Brewer
The previous scripts did not work for me because the .execCommand("Copy") was not triggering. By attaching it to the document itself, and moving it outside of the conditional, I was able to get it to work:
以前的脚本对我不起作用，因为 .execCommand("Copy") 没有触发。通过将它附加到文档本身，并将它移到条件之外，我能够让它工作：
I think this function is more robust:
我认为这个功能更健壮：
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
document.execCommand("Copy");
}
回答by Niente0
Try this:
尝试这个：
<script type="text/javascript">
function copytable(el) {
var urlField = document.getElementById(el)
var range = document.createRange()
range.selectNode(urlField)
window.getSelection().addRange(range)
document.execCommand('copy')
}
</script>
<input type=button value="Copy to Clipboard" onClick="copytable('stats')">
<table id=stats>
<tr>
<td>hello</td>
</tr>
</table>
回答by Svetoslav
You can use this custom script, if you need to copy to clipboard all data from table; html:
如果您需要将表中的所有数据复制到剪贴板，则可以使用此自定义脚本；html：
<button class='btnclipboard' data-source='tableStudents'> Copy table </button>
<table id="tableStudents">
<thead>
<th> user_id </th>
<th> Name </th>
</thead>
<tbody>
<tr>
<td> 123 </td>
<td> Proba </td>
</tr>
<tbody>
</table>
<script>
$('.btnclipboard').click(function(e) {
e.preventDefault();
copyTableToClipboard($(this).data('source'));
});
function copyTableToClipboard() {
var clipboard=new Clipboard('.btnclipboard',{
text: function(trigger) {
var txt=[];
var headColumns = [];
$("#tableStudents th").each(function(){
var textColumn = $(this).text();
if(textColumn == null || textColumn == "") {
textColumn = $(this).attr('title');
}
if(textColumn == undefined || textColumn == null) {
textColumn = "";
}
headColumns.push(textColumn);
// console.log($(this).text());
});
console.log('headColumns', headColumns);
var head=headColumns;
txt.push(head.join("\t"));
var rowColumns=[];
$("#tableStudents tr").each(function(){
var row=[];
$(this).find('td').each(function(){
var textColumn = $(this).text();
if($(this).find("i").hasClass('fa-check')){
textColumn = "1";
}
// if(textColumn == "") {
// // textColumn = $(this).attr('title');
// textColumn = "";
// }
// if(textColumn != null) {
row.push(textColumn);
// }
//console.log($(this).text());
});
if(row.length > 0) {
rowColumns.push(row);
txt.push(row.join("\t"));
}
});
console.log('rowColumns', rowColumns);
return txt.join("\n");
}
});
clipboard.on('success', function(e) {
console.info('Action:', e.action);
e.clearSelection();
if (Notification.permission == "granted")
{
var notification = new Notification('Data copied to clipboard', {
icon: '../dist/img/favicon.png',
body: "You can now paste (Ctrl+v) into your favorite spreadsheet editor !"
});
}else{
console.warn(Notification.permission);
}
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}
</script>
After you click on the button, your table data should be copied.
单击该按钮后，您的表数据应被复制。
回答by krupesh Anadkat
This has worked for me, it is not only restricted to table, but it can even select and copy to clipboard all elements inside Node specified with id.
I have tested in Mac Chrome as well as windows chrome.
Usescase : Copy Signature created by Signature Generator based on JS
这对我有用，它不仅限于表格，而且它甚至可以选择并复制到剪贴板中使用 id 指定的 Node 内的所有元素。
我已经在 Mac Chrome 和 windows chrome 中进行了测试。
用例：复制签名生成器基于JS创建的签名
Demo :
演示：
<div id="signature_container">
<p id="company_name" style="margin-top: 4px; margin-bottom: 0px; color: #522e64; font-weight: 700; font-size: 16px; letter-spacing: 1px; border-bottom: solid 2px #522e64; width:250px; padding-bottom: 3px;">The Company Name</p>
<p style="margin-top: 4px; margin-bottom: 0px; color: #00706a; font-weight: 700; font-size: 15px;"> <span id="first_name_output_2"></span>Firstname<span id="last_name_output_2"> Lastname</span> <span id="designation_output_2" style="color: #000000; font-weight: 500; font-size: 15px;">Designation</span></p>
<p style="margin-top: 0px; margin-bottom: 0px; color: #625469; font-weight: normal; font-size: 15px; letter-spacing: 0.6px;">[email protected]<span id="email_output_2"></span> </p>
</div>
<br><br>
<input type="button" onclick="selectElementContents( document.getElementById('signature_container') );" value="Copy to Clipboard">
<script>
function selectElementContents(el) {
var body = document.body,
range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
range.selectNodeContents(el);
sel.addRange(range);
}
document.execCommand("Copy");
}
</script>回答by alpc
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
CopiedTxt = document.selection.createRange();
CopiedTxt.execCommand("Copy");}
