当前位置: 首页 > 后端技术 > Node.js

用JavaScript导出excel文件,修改文件样式

时间:2023-04-03 16:23:56 Node.js

说明因为最近要实现前端导出excel文件,对导出文件的样式做一些修改,比如颜色,字体,合并cells等等,于是找到了这个xlsx-styleProject,可以修改导出的excel文件的样式,这个项目是SheetJS的一个分支。其实SheetJS也支持修改导出文件的样式,不过在专业版中,SheetJS分为社区版和专业版。社区版开源,但不支持修改导出文件的样式。专业版有更多的功能,包括修改样式,但是如果需要使用专业版,需要通过邮件联系SheetJS的开发者询问价格购买。下面说说如何使用xlsx-style,导出excel文件,修改样式。示例:安装浏览器:npm:npminstallxlsx-style--save如果安装npm时出现如下错误,需要源码修改:1.在\node_modules\xlsx-style\dist\cpexcel.js的第807行,修改varcpt=require('./cpt'+'able');到varcpt=cptable;2.在\node_modules\xlsx-style\ods.js中第10行和第13行将路径改为require('./xlsx')bower:bowerinstalljs-xlsx-style#betacellobject,worksheetobjectandworkbookobjectExplanationCellObjectCell对象指的是单元格对象,格式为{c:C,r:R},其中C为列号,R为行号。例如,单元格B5的对象表示是{c:1,r:4}。一系列单元格由对象表示为{s:S,e:E},其中S表示第一个单元格对象,E表示最后一个单元格对象。例如,单元格区域A3:B7由对象表示为{s:{c:0,r:2},e:{c:1,r:6}}。要在工作表对象中设置单元格对象,请将编码的单元格设置为属性。例如://设置A1单元格的值为123,类型为字符串,字体颜色为FF0187FAworksheet["A1"]={v:"123",t:"s",s:{font:{color:{rgb:"FF0187FA"}},}}v:单元格的值t:单元格的类型boolean,'n'number,'e'error,'s'string,'d'dates:The单元格的样式。cell的属性不仅仅是v,t,s这三个属性,还有其他的属性。详见这里,不过使用这三个属性实现导出功能就足够了。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:{c:1,r:0},e:{c:2,r:8}}Worksheet对象Worksheet对象指的是工作表对象,该对象中不以!开头的各个属性。代表一个细胞。例如worksheet["A1"]返回A1单元格对象。worksheet['!ref']:表示工作表范围的字符串。例如:worksheet['!ref']="A1:B5"worksheet['!cols']:存储列对象的数组,列宽可以在这里设置。例如://wpx字段以像素表示,wch字段以字符表示worksheet['!cols']=[{wpx:200},//设置第一列的列宽为200像素{wch:50},//设置第二列的列宽为50个字符];worksheet['!merges']:存储合并单元格范围的数组。例如://将B2的单元格合并到D4工作表['!merges']=[{s:{c:1,r:1},//B2e:{c:3,r:3},//D4}]worksheet['!freeze']:冻结单元格。例如://冻结第一行和第一列:worksheet['!freeze']={xSplit:"1",//冻结列ySplit:"1",//冻结行topLeftCell:"B2",//The单元格显示在左上角的解冻区域,默认为第一个解冻的单元格state:"frozen"}下面是打印相关的设置worksheet['!rowBreaks']:换行符数组。例如://第一行一页,第二三行一页,第三行之后一页worksheet['!rowBreaks']=[1,3]worksheet['!colBreaks']:页面的列划分数组。例如://第一列为一页,第二列和第三列为一页,第三列之后为一页worksheet['!colBreaks']=[1,3]worksheet['!pageSetup']:设置缩放大小和打印方向的对象。例如://缩放100%,打印orientation为portraitworksheet['!pageSetup']={scale:'100',orientation:'portrait'}//orientation的取值如下://'portrait'-portrait//'landscape'-horizo??ntalworksheet['!printHeader']:需要重复的第一行和最后一行索引的数组,用于分页时重复打印表头。例如://分页时重复打印第一行。worksheet['!printHeader']=[1,1]Workbook对象Workbook对象是指工作簿对象。workbook.SheetNames:存储工作表名称的数组。workbook.Sheets:存储工作表对象的对象。workbook.Sheets[sheetname]:返回名称对应的工作表对象。单元格样式设置单元格的样式就是设置工作表对象中单元格对象的s属性。该属性的值也是一个具有五个属性的对象:fill、font、numFmt、alignment和border。样式属性子属性值说明fillpatternTypePatternTypes图案样式bgColorCOLOR_SPEC背景色,填充时设置图案颜色fgColorCOLOR_SPEC前景色,单元格的背景色fontname表示字体名称的字符串字体名称,默认值为“Calibri”sz表示字体大小的数字字体大小colorCOLOR_SPEC字体颜色boldtrue或falseboldunderlinetrue或falseunderlineitalictrue或falseitalicstriketrue或falsestrikethroughvertAlign'superscript'or'subscript'superscriptorsubscriptnumFmtstring或numberalignmentvertical类型的数字格式单元格","center"或"top"垂直对齐水平"left","center"或"right"水平对齐wrapTexttrue或false自动换行readingOrder0,1或2文本方向textRotation数,0到180或255(默认is0)文字旋转角度45逆时针旋转45度90逆时针旋转90度135顺时针旋转45度180顺时针旋转90度255垂直排列bordertop{style:BORDER_STYLE,color:COLOR_SPEC}topborderstylebottom{style:BORDER_STYLE,color:COLOR_SPEC}左下边框样式{style:BORDER_STYLE,color:COLOR_SPEC}左边框样式right{style:BORDER_STYLE,color:COLOR_SPEC}右边框样式对角线{style:BORDER_STYLE,color:COLOR_SPEC}对角线样式diagonalUptrue或falseUpperdiagonaldiagonalDowntrueorfalseLowerdiagonalPatternTypesPatternTypes指的是填充时的图案样式,取值如下:nonesoliddarkGraymediumGraylightGraygray125gray0625darkHorizo??ntaldarkVerticaldarkDowndarkUpdarkGriddarkTrellislightHorizo??ntallightVerticallightDownlightUplightGridlightTrellis点击Excel中的单元格,选择设置单元格格式,点击填充,会出现图案样式选项。网页可转换颜色值{theme:"1"}主题颜色的整数索引,默认为0。numFmt样式属性numFmt的作用是格式化数字类型的单元格。一个table_fmt对象被构建成xlsx-style,它存储了一些格式化规则。vartable_fmt={0:'一般',1:'0',2:'0.00',3:'#,##0',4:'#,##0.00',9:'0%',10:'0.00%',11:'0.00E+00',12:'#?/?',13:'#??/??',14:'m/d/yy',15:'d-mmm-yy',16:'d-mmm',17:'mmm-yy',18:'h:mmAM/PM',19:'h:mm:ssAM/PM',20:'h:mm',21:'h:mm:ss',22:'m/d/yyh:mm',37:'#,##0;(#,##0)',38:'#,##0;[红色](#,##0)',39:'#,##0.00;(#,##0.00)',40:'#,##0.00;[红色](#,##0.00)',45:'mm:ss',46:'[h]:mm:ss',47:'mmss.0',48:'##0.0E+0',49:'@',56:'"AM/PM"hh"hour"mm"minute"ss"second"'};numFmt的取值如下:1.table_fmt对象的属性值。例如:worksheet["A1"].s.numFmt="0.00%";2、table_fmt对象的属性名对应的编号。例如:worksheet["A1"].s.numFmt=0;3,Excel内置规则对应的字符串。例如:worksheet["A1"].s.numFmt="yyyy/m/dh:mm";在Excel中对应的操作是右击单元格,选择格式化单元格,选择自定义,选择yyyy/m/dh:mm类型。4.如果您熟悉Excel中的自定义格式,则可以使用自定义格式字符串。例如://单元格输入1时显示男,输入0时显示女worksheet["A1"].s.numFmt='[=1]"Male";[=0]"Female"';在Excel中对应的操作是右击单元格,选择格式化单元格,选择自定义,在类型中输入[=1]“男”;[=0]“女”。readingOrder样式的alignment属性的子属性readingOrder表示单元格的文字方向。语言的读写顺序并不总是从左到右,比如阿拉伯语就是从右到左。readingOrder取值如下:0:根据内容确定1:从左到右2:从右到左在Excel中对应的操作是右击单元格,选择格式化单元格,设置文本对齐选项中的方向。BORDER_STYLEBORDER_STYLE是一个用于设置边框样式的字符串,可用值如下:thinmediumthickdottedhairdashedmediumDasheddashDotmediumDashDotdashDotDotmediumDashDotDotslantDashDotdouble为合并区域中的每个单元格指定合并单元格的边框。因此,如果需要在合并3x3单元格后设置单元格边框,则需要为8个不同的单元格设置边框:左边单元格的左边框右边单元格的右边框顶部单元格的上边框底部单元格下边框导出文件xlsx-style有两个输出数据的方法,write和writeFile。需要注意的是,writeFile方法只能基于node环境使用。XLSX.write(workbook,wopts);XLSX.writeFile(workbook,filename,wopts);filename:writeFile方法需要传入filename参数,即要创建的文件名,也可以是路径.例如:XLSX.writeFile(workbook,"out.xlsx",wopts);XLSX.writeFile(工作簿,“./folder/out.xlsx”,wopts);wopts:属性名称默认值描述类型输出数据类型(见下面的输出类型)cellDatesfalse将日期存储为'd'类型(默认'n')bookSSTfalse是否生成共享字符串表bookType'xlsx'工作簿类型(xlsx,xlsmorxlsb)showGridLinestrue是否显示网格线PropsnullWorkbook属性类型:值描述"base64"Base64编码"binary"二进制字符串"buffer"nodejsbuffer"file"直接创建文件(node环境下有效)如果使用write方法,需要设置type属性,如果设置type属性为file,需要在wopts参数中增加一个file属性,值为要创建的文件的路径。如果使用writeFile方法,则不需要设置type属性,因为在xlsx-style的源码中已经设置了type属性为file,使用该方法不需要设置bookTypewopts参数中的属性,因为bookType是通过第二个参数filename来判断的。bookSST:当bookSST设置为true时生成共享字符串表。SST是指共享字符串表,一个工作簿可能有数千个包含字符串(非数字)数据的单元格。并且这些单元格中可能有很多重复的数据。共享字符串表的实现是为了提高打开和保存文件的性能,重复数据只读写一次。更详细的解释请参考:Workingwiththesharedstringtable(OpenXMLSDK)ExportingtoexcelusingxlsxlibraryandSSTProps:Props可以设置为一个对象来存储以下工作簿相关信息:Property名称描述"title"title"subject"subject"creator"creator"keywords"keyword"description"description设置好这些属性后,在Excel中点击File,选择Information,然后点击Properties,再点击AdvancedProperties,最后选择Summary即可看见。使用write方法下载:varwopts={bookType:'xlsx',type:'binary'};varwbout=XLSX.write(工作簿,wopts);函数s2ab(s){varbuf=newArrayBuffer(s.length);varview=newUint8Array(buf);对于(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;返回buf;}varblob=newBlob([s2ab(wbout)],{type:"application/octet-stream"});functionsaveAs(obj,filename){varlink=document.createElement("a");link.download=文件名;链接.href=URL.createObjectURL(obj);链接.点击();URL.revokeObjectURL(obj);}saveAs(blob,"out.xlsx");原理是将write方法输出的数据转换成Uint8Array对象,然后通过newBlob得到一个Blob对象,然后使用URL.createObjectURL方法将Blob对象作为参数得到一个对象URL,最后将对象URL设置为一个临时链接的href属性值,实现下载功能。使用writeFile方法下载:XLSX.writeFile(workbook,"out.xlsx");虽然看起来使用writeFile方法比write方法简单很多,但是需要注意的是writeFile方法只能在node环境下使用。总结一下前端导出excel文件的功能,修改导出文件样式。最重要的是准备一个符合结构的工作簿对象(WorkbookObject)。这一步设置了导出文件的样式,后面的步骤就固定了。功能比较简单。本文中与Excel相关的截图均在MicrosoftExcel2016版本中截取,不同版本Excel的显示可能略有不同。如果你觉得xlsx-style的功能不够全面,不能满足你的需求,这里再推荐一个项目ExcelJS。这个项目功能比较全面,目前还在维护中。你可以试试看是否能满足你的需求。