HTML表格复制|极客教程

HTML表格复制

在网页开发中，表格是一种常见的数据展示方式。有时候我们需要将表格中的数据复制到其他地方进行分析或处理。本文将介绍如何使用HTML表格复制功能，实现在网页中复制表格数据的功能。

1. 复制表格数据到剪贴板

在HTML中，我们可以通过JavaScript来实现复制表格数据到剪贴板的功能。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>表格复制</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <td>geek-docs.com</td>
            <td>HTML</td>
            <td>表格</td>
        </tr>
        <tr>
            <td>geek-docs.com</td>
            <td>CSS</td>
            <td>样式</td>
        </tr>
    </table>

    <button onclick="copyTable()">复制表格数据</button>

    <script>
        function copyTable() {
            var table = document.getElementById("myTable");
            var range = document.createRange();
            range.selectNode(table);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand("copy");
            window.getSelection().removeAllRanges();
            alert("表格数据已复制到剪贴板");
        }
    </script>
</body>
</html>

Output:

HTML表格复制

在上面的示例中，我们创建了一个包含表格和一个按钮的HTML页面。当点击按钮时，会调用copyTable函数，将表格数据复制到剪贴板中。运行该示例，点击按钮后会弹出提示框，表示表格数据已成功复制到剪贴板。

2. 复制表格数据到Excel

有时候我们需要将表格数据复制到Excel中进行进一步处理。下面是一个示例代码，演示如何将表格数据复制到Excel中：

<!DOCTYPE html>
<html>
<head>
    <title>表格复制到Excel</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <td>geek-docs.com</td>
            <td>HTML</td>
            <td>表格</td>
        </tr>
        <tr>
            <td>geek-docs.com</td>
            <td>CSS</td>
            <td>样式</td>
        </tr>
    </table>

    <button onclick="copyToExcel()">复制表格数据到Excel</button>

    <script>
        function copyToExcel() {
            var table = document.getElementById("myTable");
            var html = table.outerHTML;

            var uri = 'data:application/vnd.ms-excel;base64,';
            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{table}</body></html>';
            var base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))); };
            var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }); };

            var ctx = {
                worksheet: 'Table',
                table: html
            };

            var link = document.createElement("a");
            link.href = uri + base64(format(template, ctx));
            link.download = "table.xls";
            link.click();
        }
    </script>
</body>
</html>

Output:

HTML表格复制

在上面的示例中，我们创建了一个包含表格和一个按钮的HTML页面。当点击按钮时，会调用copyToExcel函数，将表格数据复制到Excel中并下载。运行该示例，点击按钮后会下载一个名为table.xls的Excel文件，其中包含了表格数据。

3. 复制表格数据到文本文件

除了复制到Excel，我们还可以将表格数据复制到文本文件中。下面是一个示例代码，演示如何将表格数据复制到文本文件中：

<!DOCTYPE html>
<html>
<head>
    <title>表格复制到文本文件</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <td>geek-docs.com</td>
            <td>HTML</td>
            <td>表格</td>
        </tr>
        <tr>
            <td>geek-docs.com</td>
            <td>CSS</td>
            <td>样式</td>
        </tr>
    </table>

    <button onclick="copyToText()">复制表格数据到文本文件</button>

    <script>
        function copyToText() {
            var table = document.getElementById("myTable");
            var rows = table.rows;
            var text = "";

            for (var i = 0; i < rows.length; i++) {
                var cells = rows[i].cells;
                for (var j = 0; j < cells.length; j++) {
                    text += cells[j].innerText + "\t";
                }
                text += "\n";
            }

            var blob = new Blob([text], { type: "text/plain;charset=utf-8" });
            saveAs(blob, "table.txt");
        }

        function saveAs(blob, fileName) {
            var url = URL.createObjectURL(blob);
            var link = document.createElement("a");
            link.href = url;
            link.download = fileName;
            link.click();
        }
    </script>
</body>
</html>