纯js实现，导出动态生成的TABLE到EXCEL文件并下载

最新推荐文章于 2023-03-21 17:56:29 发布

djk8888

最新推荐文章于 2023-03-21 17:56:29 发布

阅读量764

点赞数

分类专栏： JS代码

本文链接：https://blog.csdn.net/djk8888/article/details/120083995

版权

JavaScript Excel导出动态表格 Blob对象 HTML5

关键词由CSDN通过智能技术生成

JS代码专栏收录该内容

76 篇文章 1 订阅

订阅专栏

直接上代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>纯js导出动态生成的Table到Excel文件</title>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
        /* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */
        table {
            border-collapse: collapse;
        }
    </style>
    <script>
        //初始化表格
        $(function () {
            BindTable();
        });
        //绑定表格
        function BindTable() {
            $("#tbody1").empty();
            var html = TbodyHtml();
            $("#tbody1").append(html);
        }
        //拼接tbody的html,用于填充表格数据
        function TbodyHtml() {
            //重点：这里可以用ajax到后台获取json数据后再循环生成html
            var html = "";
            for (var i = 0; i < 10; i++) {
                html += "<tr>";
                html += "<td>" + (i + 1) + "</td>";
                html += "<td>2021_" + (i + 1) + "</td>";
                html += "<td>张三" + (i + 1) + "</td>";
                html += "<td>男</td>";
                html += "<td>22</td>";
                html += "<td>66</td>";
                html += "<td>77</td>";
                html += "<td>88</td>";
                html += "</tr>";
            }
            return html;
        }
        //拼接整个table的html用于导出excel
        function TableHtml() {
            var html = '';
            html += '<table border="1">';
            html += '<thead><tr><th>编号</th><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>语文</th><th>数学</th><th>英语</th></tr ></thead >';
            html += TbodyHtml();
            html += "</table>";
            return html;
        }
    </script>
</head>
<body>
    <a id="btnExcel" onclick="TableToExcel()" style="color:blue; cursor:pointer;" href="#">导出表格</a>
    <!-- 设置border="1"以显示表格框线 -->
    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody id="tbody1"></tbody>
    </table>
    <script>
        //将table导出到excel文件并下载
        function TableToExcel() {
            // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
            var html = "<html><head><meta charset='utf-8' /></head><body>" + TableHtml() + "</body></html>";
            // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            //获取一个<a>标签对象
            var a = document.getElementById("btnExcel");
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(blob);
            // 设置文件名
            a.download = new Date().getTime() + ".xlsx";
        }
    </script>
</body>
</html>

(复制以上代码，粘贴到 html文件内，即可查看实际效果^_^)

页面效果：