码迷,mamicode.com
首页 > 其他好文 > 详细

Vue纯前端表格导出excel

时间:2020-10-22 23:19:48      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:write   save   import   分页   格式   enter   表示   产品   一个   

开发前端时,需要导出表格数据,这里提供一段纯前端导出excel,不需要后端接口支持。

该代码特点:

  1. 所见即所得,前端展示什么样,导出的表格内容就是什么样。
  2. 支持多工作簿,可以一次导出同页面的多份数据。
  3. 缺点:如果数据有后端分页,请不要使用。
<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

标签:write   save   import   分页   格式   enter   表示   产品   一个   

原文地址:https://blog.51cto.com/yangrong/2542955

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!