js将element的table表导出为excel

最新推荐文章于 2024-07-31 10:23:55 发布

养只猫

最新推荐文章于 2024-07-31 10:23:55 发布

阅读量634

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40816649/article/details/93327801

js 同时被 3 个专栏收录

112 篇文章

订阅专栏

vue

64 篇文章

订阅专栏

html

21 篇文章

订阅专栏

博客介绍了在Vue中实现表格数据下载的代码操作。由于Vue渲染DOM需要时间，不能直接定义先下载的表格，需将JS操作放到setTimeout中。同时，element表格表头和表单分开，还需对表单数据进行拼接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

<el-table
                            :data="item.data"
                            cell-class-name="itemTd"
                            row-class-name="itemRow"
                            style="width: 100%"
                        >
                            <el-table-column prop="name" :label='"sku名称" + "(" + item.name + ")"'></el-table-column>
                            <el-table-column prop="sales" label="必笔数" width="150"></el-table-column>
                            <el-table-column prop="value" width="150" label="笔数占比（%）"></el-table-column>
                        </el-table>

<a id="downland">导出全部</a>

只要左边的表格就行了

因为vue渲染dom需要一定的时间所以不能直接定义先下载的表格因为获取不到table标签，所以我将js的操作放到了setTimeout中
element的表格中表头和表单是分开的所以还需要对表单数据进行拼接。

setTimeout(function() {
                        let str = null
                        for(let i = 0;i < document.getElementsByTagName("table").length;i++) {
                            str = str + document.getElementsByTagName("table")[i].outerHTML
                        }
                        var html = "<html><head><meta charset='utf-8' /></head><body>" + str + "</body></html>";
                        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                        var a = document.getElementById("downland");
                        // 利用URL.createObjectURL()方法为a元素生成blob URL
                        a.href = URL.createObjectURL(blob);
                        // 设置文件名
                        a.download = "商品sku统计.xls";
                    },50)

成果：