前端 table 导出excel表格方法

最新推荐文章于 2024-04-22 15:36:45 发布

其斤r

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量759

点赞数

分类专栏： js 小记录 Blob 文章标签：前端 excel javascript

本文链接：https://blog.csdn.net/weixin_38817361/article/details/127746036

版权

js 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

小记录

7 篇文章 0 订阅

订阅专栏

Blob

1 篇文章 0 订阅

订阅专栏

需求：获取后台数据，动态生成table后，导出excel表格，要求格式与table格式一致

直接上代码：

<a id="export">导出</a>
<table id="table" class="table table-hover table-bordered" border="1" cellspacing="0">
    <thead>
        <th>
            <td>序号</td>    
        </th>
        <th>
            <td>单元</td>    
        </th>
        <th>
            <td>措施</td>    
        </th>
    </thead>
    <tbody id="TuTable"></tbody>
</table>

以上是html基础部分，调取后台接口获取数据后渲染 tbody 中的内容，通过 new Blob()，导出excel表格：

$("#export").click(()=>{
        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
        var a = document.getElementsByTagName("a")[0];
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        a.href = URL.createObjectURL(blob);
        // 设置文件名
        a.download = "xxx.xls";
})

学习Blob请参考：Blob - Web API 接口参考 | MDN