这里写自定义目录标题
预览背景使用插件exceljs下载exceljs设置导出表格数据代码实现预览
背景
在做一个后台管理系统，需要做数据导出excel，于是采用了前端进行导出，前端可以根据配置字段进行数据生产excel，然后在浏览器进行下载。
使用插件exceljs
经过多方对比，最终选择用exceljs来做导出excel的工具库，因为开发着非常活跃，在这里选用的是 exceljs,支持nodejs服务端和兼容大多数浏览器导出，读写支持完美，活跃度很高，使用简单。
下载exceljs
npm install exceljs
设置导出表格数据
假设我们需要导出一个这样的表格
数据
data
const data = []for(let i=0;i<100;i++){data.push({date: '-05-02',name: '王五'+i,price: 1+i,province: '上海',admin:"admin",sex:i%2?1:0,checked:true,id:i+1,age:0,city: '普陀区',address: '上海市普上海',zip: 33})}
column
const column = [{name: 'id', label: 'id', },{name: 'name', label: '姓名',},{name: 'age', label: '年龄',},{name: 'sex', label: '性别',},{name: 'price', label: '价格', },{name: 'admin', label: '账号'},{name: 'address', label: '地址', },{name: 'date', label: '日期',},{name: 'province', label: '省份' },{name: 'city', label: '城市' },{name: 'zip', label: '邮编' },]
methods
const exportExcelAction = ()=>{exportExcel({column,data,filename:input.value||'导出 excel',format:format.value,autoWidth:true})}
代码实现
const ExcelJS = require("exceljs");// 创建excelconst workbook = new ExcelJS.Workbook();// 设置信息workbook.creator = "Me";workbook.title = filename;workbook.created = new Date();workbook.modified = new Date();// 创建工作表const worksheet = workbook.addWorksheet(filename);// 设置列名let columnsName = [];column.forEach((item,index)=>{let obj = {header: item.label, key:item.name, width: null}if(autoWidth){let maxArr = [autoWidthAction(item.label)]data.forEach(ite=>{let str = ite[item.name] ||''if(str){maxArr.push(autoWidthAction(str))}})obj.width = Math.max(...maxArr)+5}// 设置列名、键和宽度columnsName.push(obj);})worksheet.columns = columnsName;// 添加行worksheet.addRows(data);// 写入文件const uint8Array =format === "xlsx"? await workbook.xlsx.writeBuffer(): await workbook.csv.writeBuffer();const blob = new Blob([uint8Array], {type: "application/octet-binary" });if (window.navigator.msSaveOrOpenBlob) {// msSaveOrOpenBlob方法返回boolean值navigator.msSaveBlob(blob, filename + `.${format}`);// 本地保存} else {const link = document.createElement("a"); // a标签下载link.href = window.URL.createObjectURL(blob); // href属性指定下载链接link.download = filename + `.${format}`; // dowload属性指定文件名link.click(); // click()事件触发下载window.URL.revokeObjectURL(link.href); // 释放内存}
在线预览展示 感兴趣的话可以给个star–》github源码地址
