js将element的table表导出为excel

最新推荐文章于 2024-01-27 09:45:22 发布

养只猫

最新推荐文章于 2024-01-27 09:45:22 发布

阅读量562

点赞数 1

本文链接：https://blog.csdn.net/qq_40816649/article/details/93327801

版权

js 同时被 3 个专栏收录

112 篇文章 2 订阅

订阅专栏

vue

64 篇文章 1 订阅

订阅专栏

html

21 篇文章 0 订阅

订阅专栏

直接上代码

<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)

成果：

养只猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
js将element的table表导出为excel

直接上代码<el-table :data="item.data" cell-class-name="itemTd" row-class-name="itemRow" ...
复制链接

扫一扫