使用 Javascript 选择一个完整的表(要复制到剪贴板)
Posted
技术标签:
【中文标题】使用 Javascript 选择一个完整的表(要复制到剪贴板)【英文标题】:Select a complete table with Javascript (to be copied to clipboard) 【发布时间】:2011-01-03 21:59:09 【问题描述】:我想知道是否有人知道如何使用 js 选择完整的表格,以便用户可以右键单击选择,将其复制到剪贴板,然后将其粘贴到 Excel 上。如果您手动选择表格,该过程将完美运行。但有时,如果表格高度比屏幕大几倍,拖动鼠标选择它会变得乏味。所以,我想让用户可以点击“选择整个表格”按钮,一切都准备好被复制了。
有什么想法吗?
【问题讨论】:
【参考方案1】:是的。这不是太棘手,以下将适用于所有主流浏览器(包括IE 6,实际上是5):
(2012 年 9 月 7 日更新,在 Jukka Korpela 的评论指出以前的版本不能在 IE 9 标准模式下工作)
演示:http://jsfiddle.net/timdown/hGkGp/749/
代码:
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();
<table id="tableId" border="1">
<thead>
<tr><th>Heading 1</th><th>Heading 2</th></tr>
</thead>
<tbody>
<tr><td>cell 1</td><td>cell 2</td></tr>
</tbody>
</table>
<input type="button" value="select table" onclick="selectElementContents( document.getElementById('tableId') );">
【讨论】:
在 IE 9 上,这在“标准模式”下不起作用。控制台显示有关无法完成操作的错误消息,错误代码为 800a025e,与行range.select();
相关。在 Quirks 模式下,以及当浏览器模式设置为 IE 8 时,它也可以工作。
@JukkaK.Korpela 有趣,谢谢。我已经用解决方法更新了我的答案。
很好的解决方案。再添加一个提示,如果像我一样,您希望在不导致重绘的情况下发生这种情况:1. 让 selectElementComments 返回 false(即添加 return false;
作为 selectElementComments 的最后一行。2. 使用 onclick="return selectElementContents(.....)
谢谢你,请复制剪贴板
确定它选择了表格,但是如何自动将其复制到剪贴板?用户仍然必须按 ctrl-c 或复制粘贴并不理想。【参考方案2】:
只是为了让Tim Down提出的代码更完整,让de选择的内容自动复制到剪贴板:
<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);
document.execCommand("copy");
else if (body.createTextRange)
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand("Copy");
</script>
<table id="tableId">
<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('tableId') );">
【讨论】:
【参考方案3】:我终于通过使用以下脚本让它在 IE9 中工作
注意:它不适用于 html 表格。它必须是一个 DIV。因此,只需在您需要选择的表格周围放置一个包装器 DIV!
首先我稍微更改了 HTML 按钮代码:
<input type="button" value="Mark table" onclick="SelectContent('table1');">
然后将javascript更改为:
function SelectContent (el)
var elemToSelect = document.getElementById (el);
if (window.getSelection) // all browsers, except IE before version 9
var selection = window.getSelection ();
var rangeToSelect = document.createRange ();
rangeToSelect.selectNodeContents (elemToSelect);
selection.removeAllRanges ();
selection.addRange (rangeToSelect);
else // Internet Explorer before version 9
if (document.body.createTextRange) // Internet Explorer
var rangeToSelect = document.body.createTextRange ();
rangeToSelect.moveToElementText (elemToSelect);
rangeToSelect.select ();
else if (document.createRange && window.getSelection)
range = document.createRange();
range.selectNodeContents(el);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
【讨论】:
当我指向一个封装 所以 onclick="SelectContent('dv');" .........数据 |
这是我用过的。它还制作了复制命令,因此您所要做的就是在要将其放入的文档中使用粘贴命令。基本上,您将要复制的内容包装在一个 div 中,使用 innerHTML 抓取它并将其复制到剪贴板。我没有在所有浏览器上测试过它,但它可以在 Chrome、Safari、Firefox 中运行。
<div id="copycontent">
<table>
</table>
</div>
<input type="button" value="Mark table" onclick="SelectContent('copycontent');">
<script type="text/javascript">
function SelectContent (el)
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById("main").innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
</script>
【讨论】:
以上是关于使用 Javascript 选择一个完整的表(要复制到剪贴板)的主要内容,如果未能解决你的问题,请参考以下文章