vue exceljs json数据转excel

json数据转excel

有时候我们会遇到这样一个需求，就是将数据转成excel下载，这一般都是由后端来处理，使用插件poi轻松搞定。如果只有少量数据，那么能不能避免调用后端接口，前端直接处理呢？

答案是：当然可以

使用exceljs? ??excel专用插件来实现前端json数据转成excel文件并进行下载。

直接看效果：json格式化

一、下载安装

yarn add exceljs;

?版本，可以安装最新版，不过推荐下面版本，不会出现问题：

"dependencies": {
? ? "exceljs": "^4.3.0",
? },

二、使用

1、引入插件；

import ExcelJS from "exceljs";//直接使用

完事之后，接下来就是具体应用了

三、将json数据写入excel并导出excel

直接看代码：-

exportExcel() {
? ? ? const workbook = new ExcelJS.Workbook();
? ? ? const worksheet = workbook.addWorksheet("Sheet1");//创建工作簿和工作sheet
? ? ? let json = this.getJSON();//这里是从方法中取到json，换成自己的数据即可
? ? ? if (Array.isArray(json)) {//判断json是否是数组，如果是数组，则进行遍历
? ? ? ? let title = [];
? ? ? ? for (let key in json[0]) {
? ? ? ? ? title.push(key);
? ? ? ? }
? ? ? ? worksheet.addRow(title);
? ? ? ? json.forEach((item, index) => {
? ? ? ? ? let v = [];
? ? ? ? ? for (let key in item) {
? ? ? ? ? ? v.push(item[key]);
? ? ? ? ? }
? ? ? ? ? worksheet.addRow(v);
? ? ? ? });

? ? ? } else {//非数组，直接填入工作sheet
? ? ? ? let title = [];
? ? ? ? for (let key in json) {
? ? ? ? ? title.push(key);
? ? ? ? }
? ? ? ? worksheet.addRow(title);
? ? ? ? let v = [];
? ? ? ? for (let key in json) {
? ? ? ? ? v.push(json[key]);
? ? ? ? }
? ? ? ? worksheet.addRow(v);
? ? ? }
? ? ? //开始导出，主要type类型，要设置为excel对应的格式
? ? ? workbook.xlsx.writeBuffer().then((buffer) => {
? ? ? ? const blob = new Blob([buffer], {
? ? ? ? ? type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
? ? ? ? });
 ? ? ? const url = URL.createObjectURL(blob);
? ? ? ? const link = document.createElement("a");
? ? ? ? link.href = url;
? ? ? ? link.download = "data.xlsx"; // 下载文件名
? ? ? ? link.click();
? ? ? });
? ? },