xlsx.js提供了一个中间层用于操作数据,将不同类型的文件抽象成同一个js对象,从而规避了操作不同种类数据之间的复杂性。
{ "SheetNames":["sheet1"], "Sheets":{ "Sheet1":{ !ref:“A1:J3”,//单元格范围!rows:[],//表格行属性!cols:[{wpx:90}],//单元格属性 !merges:[],//单元格合并规则 A1/B1/C1...:{},//对应excel中的每一个具体的单元格 } }}单元格对象sheet中的:A1/B1/C1...:单元格描述信息
!merges合并单元格
//数组的每一项,代表其中一个单元格的合并要求ws['!merges']=[ [s:{r:0,c:0},e:{r:1,c:0}], [s:{r:0,c:1},e:{r:1,c:1}]]//s:代表合并的起始位置//e:代表合并的结束位置//r:代表行数//c:代表列数//数组的第一个对象,表达的含义为:以0行0列(对应单元格A1)作为起始,以1行0列(对应单元格A2)作为结束,合并这些单元格单元格地址xlsx使用有两种方式来描述操作中的单元格区域:
//地址对象描述的是一个起始坐标(从0开始)到结束坐标之间的范围conststart={c:0,r:0};constend={c:1,r:1};另一种是地址范围(Cellrange)//地址范围就是Excel中的引用样式constrange='A1:B2'worksheetObject工作表对象{ "sheet1":{ "A1":{},//单元格对象 "!ref":"A1:B5",//表示工作表范围 “!cols”:[ [wpx:200],//设置第1列列狂为200箱数 [wch:50],//设置第2列列宽为50字符 ], "!merges":[ { s:{c:1,r:1},//B2 s:{c:3,r:3},//D4 } ],//合并单元格范围数据 "!freeze":{ "xSplit":"1",//冻结列 “ySplit":"1",//冻结行 } }}xlsx.js引入//以script标签的形式
数据导出:
在XLSX.utils对象中有一些方法可以对单元格和单元格范围进行转化
//编码行号XLSX.utils.encode_row(2);//"3"//解码行号XLSX.utils.decode_row("2");//1//编码列XLSX.utils.encode_col(2);//"C"//解码列XLSX.utils.decode_col("A");//0//编码单元格XLSX.utils.encode_cell({c:1,r:1});//"B2"//解码单元格XLSX.utils.decode_cell("B1");//{c:1,r:0}//编码单元格范围XLSX.utils.encode_range({ s:{c:1,r:0}, e:{c:2,r:8}});//"B1:C9"//解码单元格范围XLSX.utils.decode_range("B1:C9");//{s:{r:1,r:0},e:{c:2,r:8}}操作工作簿
//1.创建一个工作簿constworkBook=XLSX.utils.book_new();//2.创建工作表对象的几种方式//使用二维数组创建一个工作表对象constworkSheet=XLSX.utils.aoa_to_sheet(data);//使用对象数据创建一个工作表对象constworkSheet=XLSX.utils.json_to_sheet(data);//根据已渲染好的表格,转成工作表数据,会自动识别对应的单元格合并数据constworkSheet=XLSX.utils.table_to_sheet("表格ID")//向工作簿追加一个工作表XLSX.utils.book_append_sheet(workBook,workSheet,"工作表名称")数据填充-创建工作表工作表是实际存放数据的地方,大部分情况下我们的操作都是在对工作表对象的小左。aoa_to_sheet根据二维数组创建工作表
constdata=[ {L:8,O:5,V:2,E:7,ID:'i_8527'}, {L:1,O:5,V:9,E:2,IDL'i_15926'}]//基础版:会自动提起键名作为表头letworksheet=XLSX.utils.json_to_sheet(data)展示结果:
排序并自定义表头
//自定义表格的名称constheaderDisplay={ L:"L栏",O:"O栏",V:"V栏",E:"E栏",ID:"ID栏"}constnewData=[headerDisplay,...data]letworksheet=XLSX.utils.json_to_sheet(data,{header:['ID']//表格列排序,示吧ID移动到最前面skipHeader:true//忽略表格原有的表头})IDLOVEi_85278527I_159261592数据填充-修改工作表数据
//创建工作表constworksheet=XLSX.utils.json_to_sheet([ {'列1':1,'列2':2,'列3':3}, {'列1':4,'列2':5,'列3':6}],{ header:['列3','列2','列1'],//排序 skipHeader:true})//修改成新数据sheet_to_aoa二维数组方式XLSX.utils.sheet_to_aoa(worksheet,[ ['姓名','年龄','地址'], ["张三",26,"北京"],["小右",18,"成都"]],{ origin:'A1'//从A1开始增加内容})//-------------------------------//修改成新数据sheet_to_json方式XLSX.utils.sheet_to_json(worksheet,[ {"年龄":26,"地址":"深圳","姓名":"张三"}, {"年龄":18,"地址":"成都","姓名":"小右"},],{ origin:"A1", header:["姓名","年龄","地址"], skipHeader:true})姓名年龄地址张三26深圳小右18成都导出Excel文件根据已经渲染好的表格进行导出Excel:会自动识别单元格合并
/***arrTableId传参多条表示有多个表*[*{id:'excel1',sheetName:'sheet1'},*{id:'excel2',sheetName:'sheet2'}*]*/exportfunctionexportTableToExcel(arrTableId,excelFileName){ constworkbook=XLSX.utils.book_new(); //循环得到每一张表的sheet,并添加到workbook中 arrTableId.forEach((item)=>{ consttableEle=document.getElementById(item.id); constws=XLSX.utils.table_to_sheet(tableEle); XLSX.utils.book_append_sheet(workbook,ws,item.sheetName) }) //导出Excel XLSX.writeFile(workbook,excelFileName)}//使用constexportParams=[{id:"xGrid1",sheetName:"工作表名称"}]this.exportTableToExcel(exportParams,"导出后保存的文件名称.xlsx");根据aoa_to_sheet和json_to_sheet创建的工作表进行导出,复杂表头需要提供合并的!merges数据