1、使用xlsx-js-style工具基于SheetJS 地址https://github.com/gitbrent/xlsx-js-style/2、使用方法引入!--引入xlsx-- script typetext/javascript src./assets/common/libs/xlsx/xlsx.min.js/script示例/**【自定义导出档案表】**/ // 导出excel方法 function exportExcel(dataList) { // 1. 先判断数据是否存在 if(!dataList || dataList.length 0){ Feng.error(暂无导出数据!,err); return; } /** * 2. 对象数组转二维AOA * 示例[{name:张三,age:28}, {name:李四,age:32}] 转换成 [[姓名,年龄],[张三,28],[李四,32]] */ var header [文件名称,文件描述,文件类型,成果目录名称,成果目录说明, 归档人, 编制单位, 流程编码,流程名称,硬盘编码,硬盘描述,硬盘sn码]; var aoaData [header]; dataList.forEach(item { aoaData.push([item.文件名称, item.文件描述, item.文件类型, item.成果目录名称, item.成果目录说明, item.归档人, item.编制单位, item.流程编码, item.流程名称, item.硬盘编码, item.硬盘描述, item.硬盘sn码]); }); // 3. 创建工作表格式合法不再报错 var ws XLSX.utils.aoa_to_sheet(aoaData); // 样式逻辑 var headerStyle { font: { bold: true, sz: 12, color: { rgb: 000000 } }, fill: { fgColor: { rgb: CCCCCC } }, alignment: { horizontal: center, vertical: center } }; var range XLSX.utils.decode_range(ws[!ref]); // 循环所有单元格设置样式 for (var r range.s.r; r range.e.r; r) { for (var c range.s.c; c range.e.c; c) { const cellAddress XLSX.utils.encode_cell({ r, c }); if (!ws[cellAddress]) { // 空单元格也要创建否则无法显示边框 ws[cellAddress] { v: }; } // 第一行表头 if (r 0) { ws[cellAddress].s createTitleCellStyle(); } else { ws[cellAddress].s createContentCellStyle(); } } } // 列宽 ws[!cols] [{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20}]; // 导出 var wb XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 档案表); XLSX.writeFile(wb, 档案表.xlsx); } // 导出数据请求 $(#btnExport).click(function () { // 请求数据 var excelUrl Feng.ctxPath /chjArchiveResultslist/excel/list; $.ajax({ url: excelUrl, type:get, dataType:json, contentType: application/json, success:function(res){ if(200 res.code){ console.log(档案表查询,res); // 示例数据源 // var data [ // { id: 1, name: 张三, phone: 13800138000 }, // { id: 2, name: 李四, phone: 13900139000 } // ]; // 调用导出excel表方法 exportExcel(res.data, 档案表); } },error:function(err){ Feng.error(档案表查询失败!,err); } }); }); // 表头样式加粗、居中、边框、灰色背景 function createTitleCellStyle() { return { font: { bold: true }, alignment: { horizontal: center, vertical: center }, fill: { fgColor: { rgb: FFDCDCDC } }, border: { top: { style: thin }, bottom: { style: thin }, left: { style: thin }, right: { style: thin } } } } // 内容单元格样式居中、边框 function createContentCellStyle() { return { alignment: { horizontal: center, vertical: center }, border: { top: { style: thin }, bottom: { style: thin }, left: { style: thin }, right: { style: thin } } } }
)
