纯前端实现Excel导出数据
场景：大部分时候数据导出可以直接请求后端的接口完成导出，但是有时候需要前端自己完成导出，相关数据在后端返回展示的数据列表中有，本文主要介绍纯前端导出，笔者是在vue的管理后台使用插件FileSaver.js和ExcelJS来完成的，以下简单介绍一下这两款
FileSaver.js是一款基于HTML5完成文件保存插件,它可以帮你直接从网页中导出多种格式文件
ExcelJS 是一个 Node.js 模块，可用来读写和操作 XLSX 和 JSON 电子表格数据和样式
相关插件：FileSaver.js+ExcelJS
首先，需要安装FileSaver.js、ExcelJS插件
npm install FileSaver.js
npm install ExcelJS
并在需要使用的地方引入
import fileSaver from “file-saver”
import excelJS from “ExcelJS”
比如后台返回的数据格式是这样的，需要导出如上图的一样的数据Excel表格
废话少说，还是直接上实现代码吧
```javascript
//表格导出
tableExcelFun(){
//表格生成提示语
this.$message.success("开始生成分销商新增趋势列表数据");
//表格名称
let name="分销商新增趋势";
console.log(this.fxsRankingList)
//初始化表格信息
const workbook = new excel.Workbook();
workbook.creator = "优家生活管理平台";
workbook.lastModifiedBy = "优家生活管理平台";
workbook.created = new Date();
workbook.modified = new Date();
workbook.lastPrinted = new Date();
const sheet = workbook.addWorksheet(name);
//初始
const columnWidth = [8.44, 20, 20,20,20,20,20,20,20]; //列宽
//表格的表头字段，根据需求自己设定
const arr = [ "分销商编码", "分销商名称", "付款金额", "付款订单", "用户总数","下单用户占比", "推广用户", "访问人次"]
//列数
let infoColumnNum = 8;
sheet.getRow(3).values = arr;
//标题栏
sheet.mergeCells(1, 1, 2, infoColumnNum);
sheet.getCell("A1").value = `${name}(${this.fxsRankingList.length})`;
sheet.getCell("A1").fill = {
type: "pattern",
pattern: "solid",
fgColor: { argb: "FFFCE4D6" },
};
sheet.getCell("A1").font = {
color: { argb: "FFFF0000" },
size: 14,
bold: true
};
//数据
this.fxsRankingList.forEach((el, index) => {
const {fxsSerialNumber, fxsName, paymentMoney, paymentOrderNumber,allUser,browseConversionRate,promoteUserNumber,visitorCount} = el;
let deleteUpdate = el.delete
const values = [index + 1, fxsSerialNumber, fxsName, paymentMoney, paymentOrderNumber,allUser,browseConversionRate,promoteUserNumber,visitorCount];
sheet.getRow(4 + index).values = values;
})
//如果导出的数据表格是有一列，可以直接赋值
// list.forEach((el, index) => {
// values.push(el.prop)
// })
//sheet.getRow(4).values = values;//针对单行
let bgColor = "";
let column = null;
for (let i = 0; i < infoColumnNum; i++) {
column = sheet.getColumn(i + 1);
column.width = columnWidth[i] || 16.73;
bgColor = i > (infoColumnNum - 1) ? "C00000" : "FFFC574F";
sheet.getCell(3, i + 1).fill = {
type: "pattern",
pattern: "solid",
fgColor: { argb: bgColor },
};
sheet.getCell(3, i + 1).font = {
color: { argb: "FFFFFFFF" },
size: 12,
bold: true
};
}
//控制所有单元格垂直水平居中
sheet.eachRow(function (row, rowNumber) {
row.alignment = {
vertical: "middle",
horizontal: "center"
};
});
const EXCEL_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
const title = name;
workbook.xlsx.writeBuffer().then(data => {
const blob = new Blob([data], { type: EXCEL_TYPE });
fileSaver.saveAs(blob, `${title}.xlsx`);
});
}