vue element-ui 实现导出excel 所有分页的全部数据

最新推荐文章于 2023-08-03 16:16:59 发布

原创最新推荐文章于 2023-08-03 16:16:59 发布 · 4.3k 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#excel #elementui #vue

收录于

项目中遇到分页表格需要全部导出Excel的问题，通过实践发现原有方法存在错误，表单条数计算应使用this.page.pageSize而非this.pageSize。通过修正这一细节，成功实现了所有分页数据的导出功能。

项目场景：

含有分页的表单数据全部导出功能

问题描述：

实践相关博客.的方法失败

原因分析：

发现表单条数应为：this.page.pageSize 而不是this.pageSize

this.page.pageSize=this.tableData.length;

解决方案：

//Excel导出
        exportExcel() {
            //因为此处有分页，每页展示6条数据，在方法调用的开始，展示所有数据，导出之后再把条数更改过来
            this.page.pageSize = this.tableData.length;

            this.$nextTick(function () {
                let wb = XLSX.utils.table_to_book(
                    //el-table标签内设置的id="download"
                    document.querySelector("#download")
                ); 

                let wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array",
                });
                try {
                    FileSaver.saveAs(
                        new Blob([wbout], { type: "application/octet-stream" }),
                        "仓库汇总表.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                this.page.pageSize = 6; //表格还原
                return wbout;
            });
        }