Vue纯前端表格导出excel

开发前端时，需要导出表格数据，这里提供一段纯前端导出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>

Vue纯前端表格导出excel

猜你喜欢