最近做了个项目,用纯前端下载表格,后端返回了所有数据,但是前端给强行分页为多页,当只有一页时下载正常,但是有多页时只能下载第一页数据,这个时候翻阅资料,发现很多都是,将分页条数设置为表格数据总条数,将表格变为一页去下载,等下载完后再恢复以前的分页大小。该方法试了,可以实现下载全部数据,但是由于分页条数发生改变,在前端交互时页面表格会出现变化,个人感觉体验不是很好。但是如果对样式变化不在意的话,还是可以采纳的。(另外,如果实在要用这种方法,是否可以考虑将实际分页的模块隐藏起来,然后作个假的,此法费力),不过我这个后来还是采用了后端接口下载表格。此处写前端下载表格,以供实际需要的朋友使用参考。
利用纯前端下载表格,首先引入以下组件:
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
具体主要代码:
// 点击下载表格
exportExcel() {
this.oldPageSize = this.pageSize // 记录下一开始分页的每页大小
this.pageSize = this.tableData.length // 由于假分页所以将分页大小设置为表格包含总数据条数,使前端展示的只有一页数据
setTimeout(() => {
this.handleExport() // 开始真正的下载
}, 1000)
},
// 导出表格
handleExport() {
var id = '#' + this.id // 前端表格对应id
// ----普通导出
let tableDom, tableName
tableDom = document.querySelector(id)
// 表名 = **表 +下载时间
tableName = (this.title || this.$route.meta.title) + '_' + new Date().Format('yyyy-MM-dd hh:mm:ss') + '.xlsx'
var wb = XLSX.utils.table_to_book(tableDom, { raw: true })
/* get binary string as output */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), tableName)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
// ---以上为普通
// ❤恢复之前的pageSize-每页条数的值,还原表格
setTimeout(() => {
this.pageSize = this.oldPageSize
}, 1000)
return wbout
}