建设企业网站官网u盾,wordpress 安卓 生成,设计制作生态缸,wordpress 3.6升级4.7excel的导出是开发常见的功能#xff0c;但是excel得到处都是谁导出呢#xff1f;
一般情况excel都是由后端导出生成blob格式返给前端#xff0c;前端进行下载#xff0c;当然前端也可以自己利用数据进行excel导出#xff0c;这篇文章将介绍前端导出和后端导出的一些插件…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;filename1.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(); //保存
