excel的导出是开发常见的功能，但是excel得到处都是谁导出呢？
一般情况excel都是由后端导出生成blob格式返给前端，前端进行下载，当然前端也可以自己利用数据进行excel导出，这篇文章将介绍前端导出和后端导出的一些插件使用
node端导出
1.node-xlsx
怎么使用
官网： node-xlsx - npm
根据官网，可以看到这个插件既可以生成excel,也可以对excel进行解析，这里主要讲解生成excel
(1)下载插件
npm install node-xlsx(2)使用
引入
const xlsx = require('node-xlsx')创建buffer
buffer = xlsx.build([{name: 'excel表名', data: 'excel数据'}], sheetOptions);参数说明：
sheetOptions ：为表格样式
const sheetOptions = {'!cols': [{wch: 6}, {wch: 7}]};data的数据格式为[{},{}] 可以传入多个对象生成多个小excel ，每个对象的数据格式
{name: 'excel小表名'data: [['一行一列数据', '一行二列数据'],['二行一列数据', '二行二列数据']]}除了直接写成buffer,也可以写成文件保存在后端，给前端excel的地址进行下载
const fs = require('fs')
fs.writeFile("文件名称.xlsx", buffer, function (err) {if (err) {console.log('写入失败‘);} else {console.log("写入成功!");}
});案例：
egg的写的导出excel的service类
const xlsx = require('node-xlsx')
const Service = require('egg').Service;const tempArr = []tempArr.push([...header.map(col => col.header)])class exportFileService extends Service {constructor(prop) {super(prop);}// const column = [// { header: '姓名', key: 'name', width: 30 },// { header: '年龄', key: 'age', width: 30 },// { header: '生日', key: 'birthday', width: 30 },// ];// data = [{name:xx, age:xx, birthday:xx}]toExport(column, data, filename = '导出') {return new Promise((reslove, reject) => {const { ctx } = this;const colArr = []colArr.push([...column.map(col => col.header)])//xlsx数据data.forEach(item => {colArr.push([...column.map(col => item[col.key])])})console.log(column, data, 'dada')const buffer = xlsx.build([{ name: '导出sheet1', data: colArr }], { '!cols': [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 },] });reslove({buffer})})}
}module.exports = exportFileService;egg端调用servece反给前端
async downLoad() {const { ctx, service } = this;const { id, type } = ctx.request.body;let result = [],// node段请求后端接口返回数据const res = await ctx.service.getList.list({ id, type})if (res.status === 200 && res.data.length) {result = res.data;}const header = [{ header: '姓名', key: 'name', width: 30 },{ header: '年龄', key: 'age', width: 30 },{ header: '生日', key: 'birthday', width: 30 },];// node端进行转exceltry {let res = await service.exportExcel.toExport(header, result);ctx.set('Content-disposition', `attachment;filename=1.xlsx`);// 返回文件bufferctx.body = res.buffer;} catch(err) {ctx.status = 500ctx.body = err}}前端调用下载
down(data) {axios({method: 'post',url: '/list/downLoad',responseType: 'blob',headers: {'Content-Type': 'application/json',},data,}).then(res => {if (res.status === 200) {let name = data.type === 'all' ? '全部列表' : '失败列表'this.saveFile(res.data, `${name}${data.id}`);)}}).catch(error => {});}saveFile(file, filename) {const ieKit = /(?:ms|\()(ie)\s([\w\.]+)|trident|(edge|edgios|edga|edg)/i.test(window.navigator.userAgent);const blobData = new Blob([ file ], { type: 'application/vnd.ms-excel' });if (ieKit) {navigator.msSaveBlob && navigator.msSaveBlob(blobData, filename + '.xlsx');} else {const objectURL = window.URL.createObjectURL(blobData);const save_link = document.createElement('a');const event = document.createEvent('MouseEvents');save_link.href = objectURL;save_link.download = filename + '.xlsx';event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);window.URL.revokeObjectURL(objectURL);}}2.exceljs
官网：https://github.com/exceljs/exceljs/blob/master/README_zh.md
(1) 下载
npm install exceljs(2) 使用
直接看官网吧，因为官网写的很详细，如果去创建一个excel，怎么向一个表增加数据，api有些多，所以自己看吧，最后也是可以返回一个buffer给前端，前端下载；
其实有了buffer,再利用fs写一个文件给前端文件地址也是ok的
前端直接导出excel
1.js-export-excel
官网：GitHub - jiengsad/js-export-excel: json导出excel（纯js 支持中文） ES6 module
是一个纯js进行导出的，所以适用于vue和react，因此要注意其兼容性，ie 10+
// 直接导出文件
const ExportJsonExcel = require("js-export-excel");var option = {};option.fileName = "excel";option.datas = [{sheetData: [{ one: "一行一列", two: "一行二列" },{ one: "二行一列", two: "二行二列" },],sheetName: "sheet",sheetFilter: ["two", "one"],sheetHeader: ["第一列", "第二列"],columnWidths: [20, 20],},{sheetData: [{ one: "一行一列", two: "一行二列" },{ one: "二行一列", two: "二行二列" },],},
];var toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存
)
