vue 使用 xlsx 导出excel

最新推荐文章于 2024-08-03 18:47:21 发布

干啥啥不行，bug第一名

最新推荐文章于 2024-08-03 18:47:21 发布

阅读量974

点赞数 2

分类专栏： Js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40822000/article/details/104848307

版权

本文介绍了如何在 Vue.js 项目中利用 xlsx 库导出 Excel 文件。首先，需要安装 xlsx 和 FileSaver 包。导出Excel时，可以传入table节点或JSON数据对象。为了调整样式，可以使用 xlsx-style 或其他替代方案。通过深入研究源码，发现可以设置WorkSheet的行列属性以满足自定义样式的需求。

摘要由CSDN通过智能技术生成

安装

npm i xlsx

引用

  import XLSX from 'xlsx'

导出

传入table节点：

		let xlsxParam = { raw: true }
        let wb = XLSX.utils.table_to_book(document.querySelector('#id'), xlsxParam)
        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '表.xlsx')

FileSaver是我引入的包,为了保存文件,当然也可以使用浏览器的saveAs()。

 npm install file-saver --save

传入JSON数据对象：

  let fields = ["姓名", "性别", "年龄", "住址"] // 表头，因为我们不可能用汉字做键值吧
        let workBook = XLSX.utils.json_to_sheet(arr); // arr 数组对象
        const range = XLSX.utils.decode_range(workBook['!ref']) //获取工作表