精美的微网站,做实验网站,湖北正规网站建设质量保障,wordpress首页标签页一. 概览
前端导出excel是比较常见的需求#xff0c;比如下载excel模板和批量导出excel。目前比较常用的库有xlsx和excel#xff0c;接下来就着两种方式进行梳理。
二. 下载模板
xlsx库实现#xff1a;
示例核心代码如下#xff1a;
const excelColumn {details: {ma…一. 概览
前端导出excel是比较常见的需求比如下载excel模板和批量导出excel。目前比较常用的库有xlsx和excel接下来就着两种方式进行梳理。
二. 下载模板
xlsx库实现
示例核心代码如下
const excelColumn {details: {materialName: 物料名称,applyCount: 请购数量,unit: 单位,unitPrice: 单价,use: 用途,remark: 备注,},};function downloadTemplate(key, name) {const book utils.book_new();// 实例化一个Sheetconst sheet utils.json_to_sheet([Object.values(excelColumn[key]).reduce((p: any, c: string) {p[c] ;return p;}, {}),],{header: Object.values(excelColumn[key]),},);// 将Sheet写入工作簿utils.book_append_sheet(book, sheet, Sheet1);// 写入文件直接触发浏览器的下载writeFile(book, ${name}.xlsx);}代码分析 // 实例化一个Sheetconst sheet utils.json_to_sheet([Object.values(excelColumn[key]).reduce((p: any, c: string) {p[c] ;return p;}, {}),],{header: Object.values(excelColumn[key]),},);utils.json_to_sheet第一个参数是为了得到一个诸如 {物料名称: ‘’ “, 数量 ” “}的数据通过reduce方法实现对象属性的累加header: Object.values(excelColumn[key]) 第二个参数是为了得到的表头的集合诸如[“物料名称”数量”] utils.book_append_sheet(book, sheet, Sheet1);sheet1是定义工作簿的名称
exceljs库实现
示例核心代码如下 const excelHeadColums [{header: 物料名称,key: materialName,width: 12,},{header: 请购数量,key: applyCount,width: 14,},{header: 单位,key: unit,width: 14,}];const downLoadTemp () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表const sheet1 workbook.addWorksheet(sheet1);sheet1.columns excelHeadColums;data.value.details.forEach((item) {sheet1.addRow(item);});// 导出表格workbook.xlsx.writeBuffer().then((buffer) {let _file new Blob([buffer], {type: application/octet-stream,});FileSaver.saveAs(_file, 模板.xlsx);});};代码分析 原理基本同xlsx只不过相比之下exceljs库更为强大可以自定义导出的excel的样式
三. 批量导出
xlsx库 function exportExcelT(name: string,key: string,colFn?: (d: T) Recordstring, any,{format,}: {format?: (d: T, c: string) string;} {},) {const book utils.book_new();const tableData data.value![key].map((d) colFn? colFn(d): (Object.keys(excelColumn[key]).reduce((p, c) {p[excelColumn[key][c]] format ? format(d, c) : d[c];return p;}, {}) as any),);const sheet utils.json_to_sheet(tableData, {header: Object.keys(tableData[0]),});utils.book_append_sheet(book, sheet, Sheet1);writeFile(book, ${name}.xlsx);}exceljs库
const exportReturnData (hkDetails) {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表const sheet1 workbook.addWorksheet(sheet1);sheet1.columns receiptTableHeadColums;const hkColumsData hkDetails;hkColumsData.forEach((item) {sheet1.addRow(item);});// 设置表头样式const titleCell sheet1.getRow(1);// 设置第一行的高度titleCell.height 30;// 设置第一行的字体样式titleCell.font {bold: true,};// 设置第一行文字对齐方式titleCell.alignment {vertical: middle,horizontal: center,};// 设置第一行单元格的背景色titleCell.fill {type: pattern,pattern: solid,fgColor: {argb: FFDFEAFC,},};// 导出表格workbook.xlsx.writeBuffer().then((buffer) {let _file new Blob([buffer], {type: application/octet-stream,});FileSaver.saveAs(_file, 数据表.xlsx);});
}; 代码分析
原理基本同下载模板另附exceljs库样式调整的基本应用。
四. excel库的其它基本使用
excel库除了设置单元格样式外另外常见的使用有设置单元格下拉框限制某个单元格不可编辑等
1. 设置下拉框
核心代码
const sheet1 workbook.addWorksheet(sheet1);
for (let i 2; i totalExcelLength 1; i) {sheet1.getCell(M${i}).dataValidation {type: list,allowBlank: true,formulae: [中标流标],};sheet1.getCell(N${i}).dataValidation {type: list,allowBlank: true,formulae: [最高价最低价],};}2. 限制某个单元格不可编辑 核心代码
sheet1.protect(yourpassword, {selectLockedCells: true,selectUnlockedCells: true,});//解锁可编辑列const unlockColumns isInitProcess ? [9, 10, 11] : [13, 14];unlockColumns.forEach((columnIndex) {sheet1.getColumn(columnIndex).eachCell((cell, rowNumer) {if (rowNumer ! 1) {// 跳过标题行cell.protection { locked: false };}});});另外还有exceljs还有其它很多强大的功能在这就不一一举例。
五. 参考文章
这一定是前端导出Excel界的天花板 exceljs使用文档
