开发前端时,需要导出表格数据,这里提供一段纯前端导出excel,不需要后端接口支持。
该代码特点:
- 所见即所得,前端展示什么样,导出的表格内容就是什么样。
- 支持多工作簿,可以一次导出同页面的多份数据。
- 缺点:如果数据有后端分页,请不要使用。
<script>
import FileSaver from "file-saver"
import XLSX from "xlsx"
exportExcel() {
/*获取表格数据 */
var wb = XLSX.utils.book_new()
var centers = XLSX.utils.table_to_sheet(document.querySelector("#center_table"))
var products = XLSX.utils.table_to_sheet(document.querySelector("#product_table"))
var center_month = XLSX.utils.table_to_sheet(document.querySelector("#center_table_month"))
var departs = XLSX.utils.table_to_sheet(document.querySelector("#depart_table"))
/* 添加多个工作薄,如果只有一个,则只写一个 */
XLSX.utils.book_append_sheet(wb, center_month, "各中心月度费用统计")
XLSX.utils.book_append_sheet(wb, centers, "各中心申请费用类型统计")
XLSX.utils.book_append_sheet(wb, products, "各业务产品申请费用统计")
XLSX.utils.book_append_sheet(wb, departs, "各部门申请费用统计")
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
})
try {
FileSaver.saveAs(
// Blob 对象表示一个不可变、原始数据的类文件对象。
// Blob 表示的不一定是JavaScript原生格式的数据。
// File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// 返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
// 设置导出文件名称 xxx.xlsx
"中心申请费用类型统计.xlsx"
)
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout)
}
return wbout
},
</script>