选择表格并将其复制到剪贴板

发布于 2024-10-29 11:37:46 字数 2240 浏览 6 评论 0原文

我想选择没有标题的表格,它可以工作,但我无法将其复制到剪贴板。

这是页面:http://tuudik.lohv.eu/Asjad/EURXML/

这里是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ECB kursid seisuga: 2011-04-01 </title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
<script type="text/javascript">
    function selectElementContents(el) {
        var body = document.body, range, sel;
        if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
            range.execCommand('Copy');
        } else if (document.createRange && window.getSelection) {
            range = document.createRange();
            range.selectNodeContents(el);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            sel.execCommand('Copy');
        }

    }
</script>
</head>

<body>
<table cellpadding="2">
<thead>

    <tr>
        <th>Valuuta</th>
        <th>Kurss</th>
    </tr>
</thead>
<tbody id="currencies">
<tr><td>USD</td><td>1,4141</td></tr><tr><td>JPY</td><td>118,56</td></tr><tr><td>DKK</td><td>7,4564</td></tr><tr><td>GBP</td><td>0,88150</td></tr><tr><td>NOK</td><td>7,8055</td></tr><tr><td>RUB</td><td>40,1500</td></tr><tr><td>CAD</td><td>1,3686</td></tr></tbody>

</table>
<input type="button" value="select table"
   onclick="selectElementContents( document.getElementById('currencies') );">
</body>
</html>

I want to select table without headers, and it works, but I cannot get it so, that it would copy to clipboard.

Here's the page: http://tuudik.lohv.eu/Asjad/EURXML/

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ECB kursid seisuga: 2011-04-01 </title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
<script type="text/javascript">
    function selectElementContents(el) {
        var body = document.body, range, sel;
        if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
            range.execCommand('Copy');
        } else if (document.createRange && window.getSelection) {
            range = document.createRange();
            range.selectNodeContents(el);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            sel.execCommand('Copy');
        }

    }
</script>
</head>

<body>
<table cellpadding="2">
<thead>

    <tr>
        <th>Valuuta</th>
        <th>Kurss</th>
    </tr>
</thead>
<tbody id="currencies">
<tr><td>USD</td><td>1,4141</td></tr><tr><td>JPY</td><td>118,56</td></tr><tr><td>DKK</td><td>7,4564</td></tr><tr><td>GBP</td><td>0,88150</td></tr><tr><td>NOK</td><td>7,8055</td></tr><tr><td>RUB</td><td>40,1500</td></tr><tr><td>CAD</td><td>1,3686</td></tr></tbody>

</table>
<input type="button" value="select table"
   onclick="selectElementContents( document.getElementById('currencies') );">
</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

好久不见√ 2024-11-05 11:37:46

这对我在 IE8 上有效:

    var table = document.getElementById('copyHtmlToClipboard');
    // Below line is essential !!!
    table.contentEditable = 'true';   

    var controlRange = document.body.createControlRange();
    controlRange.addElement(table);
    controlRange.execCommand("Copy");

This works for me on IE8:

    var table = document.getElementById('copyHtmlToClipboard');
    // Below line is essential !!!
    table.contentEditable = 'true';   

    var controlRange = document.body.createControlRange();
    controlRange.addElement(table);
    controlRange.execCommand("Copy");
予囚 2024-11-05 11:37:46

在大多数浏览器中,无法复制到系统剪贴板。为此,您需要使用 hack。最常见的方法是使用Flash。 ZeroClipboard 可以做到这一点,并且看起来效果很好。

顺便说一句,execCommand()documentTextRange对象的方法,而不是Selection对象,所以< code>sel.execCommand("Copy") 不可能工作。

更新

我从未真正使用过 ZeroClipboard。看过文档后,它看起来并没有达到我所希望的效果(似乎无法复制富文本),而且比我想象的更可怕。您可以使用 ZeroClipboard 通过 innerHTML 将表格内容复制为文本,但这是否可以接受取决于您希望用户可以对复制的内容执行什么操作。

In most browsers it isn't possible to copy to the system clipboard. To do this you need to use a hack. The most common way is to use Flash. ZeroClipboard does this and appears to work quite well.

By the way, execCommand() is a method of document and TextRange objects, not Selection objects, so sel.execCommand("Copy") couldn't possibly work.

UPDATE

I've never actually used ZeroClipboard. Having looked at the docs, it doesn't look like it does what I had hoped (there seems to be no way to copy rich text) and is even more of a gruesome hack than I thought. You could copy the table's content as text via innerHTML using ZeroClipboard, but whether this is acceptable or not depends on what you're hoping the user can do with the copied content.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文