前端导出Excel的方案很多，但能导出专业的Excel表格的却少之又少。本文将介绍一个导出Excel表格的上限，可以满足99.99%的需求业务需求，直接调用yyds！技术方案xlsxxlsx是前端最流行的Excel导出方案，也叫SheetJS，默认不支持修改Excel样式。如果工作和业务需要需要修改Excel的样式，需要使用作者付费版。或者使用xlsx-style，但是使用起来很麻烦，需要修改node_modules的源码，而且作者最新提交的版本也是6年前的，所以不推荐使用。exceljsexceljs是一款可导出可读的Excel操作工具，可以实现Excel的样式修改和高级功能。非常推荐的处理Excel的库，exceljs也是本文的主角！安装依赖exceljs，和写入excel一样，使用file-server保存到本地文件。yarnaddexceljs在本地保存文件我们还需要file-saver的辅助yarnaddfile-saversimplecase当你能写出第一行HelloExcelJS的时候，说明你已经可以开始使用exceljs了。//引入依赖项importExcelJSfrom"exceljs";importFileSaverfrom"file-saver";//ExportExcelconstexportExcel=()=>{//创建工作簿const_workbook=newExcelJS.Workbook();//添加工作表const_sheet1=_workbook.addWorksheet("sheet1");//设置表格内容const_titleCell=_sheet1.getCell("A1");_titleCell.value="你好ExcelJS！";//导出表_workbook.xlsx.writeBuffer().then((buffer)=>{let_file=newBlob([buffer],{type:"application/octet-stream",});FileSaver.saveAs(_file,"ExcelJS.xlsx");});};设置表头我们一般设置每列的第一个作为表头，可以设置每列的宽度。_sheet1.columns=[{header:"rank",key:"sort",width:10},{header:"class",key:"class",width:20},{header:"name",键:“名称”，宽度：20}，{标题：“分数”，键：“分数”，宽度：10}，];添加数据表头设置后，我们可以直接根据键值添加每一行的数据。_sheet1.addRow({sort:1,class:"前端类3",name:"布尔",score:99});_sheet1.addRow({sort:2,class:"前端类1",name:"Jack",score:86});_sheet1.addRow({sort:3,class:"前端类",name:"Mary",score:58});readcolumngetColumn用于读取当前列的数据，我们可以使用eachCell来遍历单元格。_sheet1.getColumn("score").eachCell((cell,rowIdx)=>{console.log(cell.value,rowIdx);//分数,1//99,2//86,3});getrowgetRow用于读取每一项，我们也可以使用exchCell遍历单元格_sheet1.getRow(1).eachCell((cell,rowIdx)=>{console.log(cell.value,rowIdx);//rank,1//班级,2//姓名,3//分数,4});Array.prototype.forEach依然可以使用，但是这里推荐使用eachCell来遍历单元格。样式我们将在读取的表头中添加一些样式，以使Excel看起来更好。//获取第一行const_titleCell=_sheet1.getRow(1);//设置第一行的高度_titleCell.height=30;//设置第一行的字体样式_titleCell.font={name:"Blackbody",bold:true,size:14,color:{argb:"FF999999",},};//设置第一行的对齐方式（水平和垂直）_titleCell.alignment={vertical:"middle",horizo??ntal:"center",};//设置边框的样式line_titleCell.border={top:{style:"medium",color:{argb:"FFEBEEF5",},},left:{style:"medium"，颜色：{argb：“FFEBEEF5”，}，}，底部：{样式：“中”，颜色：{argb：“FFEBEEF5”，}，}，右：{样式：“中”，颜色：{argb："FFEBEEF5",},},};//设置单元格的样式_titleCell.fill={type:"pattern",pattern:"solid",fgColor:{argb:"FFF5F7FA",},};exceljs中所有的颜色值都是argb格式，没有#符号的单元格已经成功添加了样式，但是表格第一行的所有单元格都添加了样式当然，这肯定不是我们想要的，这时候我们可以使用eachCell来遍历单元格，为每个单元格添加样式。const_titleCell=_sheet1.getRow(1);_titleCell.height=30;_titleCell.eachCell((cell,colIdx)=>{cell.font={name:"黑体",bold:true,size:14,color:{argb:"FF999999",},};cell.alignment={vertical:"middle",horizo??ntal:"center",};cell.border={top:{style:"medium",颜色：{argb:"FFEBEEF5",},},左：{style:"medium",color:{argb:"FFEBEEF5",},},bottom:{style:"medium",color:{argb:"FFEBEEF5",},},右：{样式：“中”，颜色：{argb：“FFEBEEF5”，}，}，}；cell.fill={类型：“图案”，图案：“固体”，fgColor：{argb：“FFF5F7FA”，}，}；}）；自动过滤很多时候我们需要对表中每一列的数据进行过滤，比如直接过滤类，我们可以通过autoFilter添加过滤器_sheet1.autoFilter="B1";//当然也可以直接添加多个filter_sheet1.autoFilter="B1:C1"的列；合并表合并表应该是业务最常请求的功能。当然这个功能也可以使用xlsx来实现，前提是你的项目对表格没有复杂的要求。合并方向不同//左右合并_sheet1.mergeCells("A1:A2");//上下合并_sheet1.mergeCells("A1:B1");//左上右下合并_sheet1.mergeCells("A1:B2");合并并设置样式//Merge_sheet1.mergeCells("A6:B9");_sheet1.getCell("A6").value="Summary";//设置合并后的样式_sheet1.getCell("A6").alignment={垂直：“中间”，水平：“中心”，};注意合并的单元格不能继续合并！公式值我们可以直接对表中的数据进行公式计算，比如求和（SUM）、求平均值（AVERAGE）等。_sheet1.getCell("C6").value="总分";_sheet1.getCell("C7").value="最高分";_sheet1.getCell("C8").value="最低分";_sheet1.getCell("C9").value="averagescore";//sum_sheet1.getCell("D6").value={formula:"=SUM(D2:D4)"};//maximum_sheet1.getCell("D7").value={formula:"=MAX(D2:D4)"};//最小值value_sheet1.getCell("D8").value={formula:"=MIN(D2:D4)"};//Average_sheet1.getCell("D9").value={公式："=AVERAGE(D2:D4)"};数据验证有时候我们需要在一个单元格中添加数据，这很方便，直接从下拉列表中选择指定的值。_sheet1.getCell("B2").dataValidation={type:"list",allowBlank:true,formulae:['"软件类1，软件类2，软件类3"'],};我们可以指定条件格式向单元格添加数据验证，例如为不及格的成绩添加红色背景。//为D2:D4添加条件格式_sheet1.addConditionalFormatting({ref:"D2:D4",rules:[{type:"cellIs",operator:"lessThan",priority:1,formulae:[60],style:{填充：{类型：“图案”，图案：“固体”，bgColor：{argb：“FFFFC0CB”}，}，}，}，]]，}）；总结以上介绍的内容只是exceljs的冰山一角，可以满足美化Excel的一些基本业务需求。在官方文档中，有更多好用和专业的功能，还有非常强大的阅读表格等功能，需要大家自己去探索。ExcelJS中文文档https://github.com/exceljs/exceljs/blob/master/README_zh.md最后，感谢您的阅读~如果您觉得本文对您有帮助，点赞关注就是最大的支持！
