element-ui表格组件分页后完整导出到excel的方法

原创已于 2022-11-04 17:32:10 修改 · 1.1w 阅读

16 ·

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

标签

#element-ui #vue #表格 #导出 #分页

收录于

于 2018-08-02 15:27:19 首次发布

本文介绍了一种在前端实现表格导出为Excel的方法。通过临时调整表格的分页设置，可以确保导出文件包含所有数据行，而不会遗漏。这种方法适用于需要完整数据导出的应用场景。

表格分页后，突然有需求，说是要把表格导出到excel。可以在导出表格的时候先让表格长度变长，导出后再变回去，就能完整地导出整个表了

                exportExcel () {
                    this.pagesize = '30';//表格长度变长
                    this.currentPage= '1';
                    this.$nextTick(function () {
                        let wb = XLSX.utils.table_to_book(document.querySelector('#srpgtable'));
                        /* get binary string as output */
                        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.pagesize = '10';//表格还原
                        return wbout
                    })
                },