当前位置: 首页 > Web前端 > HTML5

【SheetJS】js-xlsx模块学习指南

时间:2023-04-05 12:59:16 HTML5

SheetJS是对Excel和类似二维表进行前端操作的最佳选择之一,js-xlsx是它的社区版本。js-xlsx专注于数据的转换和导出,所以它支持相当多的数据解析和导出。不限于支持xlsx格式。支持的导入格式支持的导出格式可以:解析符合格式的数据,导出符合格式的数据,使用中间层操作数据可以运行在:浏览器端节点端浏览器终端特性纯浏览器端分析数据纯浏览器端导出数据节点端特性读写文件流式读写本文力求简洁,主要讨论js-xlsx的工作流程、基本概念和使用方法。概念js-xlsx提供了一个操作数据的中间层。它将不同类型的文件抽象为同一个js对象,从而避免了操作不同类型数据的复杂性。并且围绕这个对象提供了一系列的抽象函数,本节主要讨论这些数据对象与Excel数据的关系。浏览器端和Node端的区别仅在于如何导入导出文件。对于数据操作,双方的接口是一致的。引入js-xlsx引入很简单,浏览器端引入可以采用最基本的script标签的形式。在node端,使用npm安装以下模块:npminstallxlsx--save在Node中引入如下:constxlsx=require('xlsx');详细文件地址对应关系在这张表中,我罗列了Excel和js-xlsx的关系:Excel名词js-xlsx工作簿中的抽象类型workBook工作表SheetsExcel引用样式(单元格地址)cellAddresscellcell有了这个基本的对应关系,我们就可以很容易地理解后续操作,例如在使用Excel的过程中,获取一条数据的过程如下:打开一个工作簿,打开一个工作表,选择一个区域或单元格对数据进行操作并保存(另存为),然后js-xlsx中获取某个单元格内容的操作如下:先不要关心我们工作簿对象从哪里来varfirst_sheet_name=workbook.SheetNames[0];//获取工作簿中的工作表名称varaddress_of_cell='A1';//提供引用样式(单元格下标)varworksheet=workbook.Sheets[first_sheet_name];//获取对应的工作表对象vardesired_cell=worksheet[address_of_cell];//获取对应的单元格对象vardesired_value=(desired_cell?desired_cell.v:undefined);//获取对应单元格中的数据数据格式图:工作簿的数据结构一旦我们的Excel文件解析完成,其中的所有内容Excel表格将被解析为上面的对象。并且整个过程是同步完成的。所以我们可以直接使用key来获取数据。在上面的例子中,我们通过key逐层获取数据。上图中有两个常用的键:SheetNames以字符串数组的形式保存了所有工作表的名称。Sheets下的内容是工作表对象,键名是SheetNames中包含的名称。Excel的数据单位从小到大排序如下:Unitsworksheet工作簿的单元格格式在Excel中有多种格式,js-xlsx会解析成相应的JavaScript格式。常见的格式如下:keydescriptionvsourcedata(未处理的数据)wFormattedtext(如果可以格式化)tcelltype(具体类型见下表)rdecodedrichtext(如果可以解码)h呈现为HTML格式的富文本(如果可以解码)c单元格注释z格式化为字符串值(如果需要)完整格式链接。解析后单元格数据格式:该数据保存在Excel中A1位置,文本类型,单元格内容为xm。单元格地址js-xlsx使用两种方式来描述运行中的单元格区域。一个是单元格地址对象(Celladdressobject),另一个是地址范围(Cellrange)。地址对象的格式如下:conststart={c:0,r:0};constend={c:1,r:1};上述地址对象对应的地址范围如下:constrange='A1:B2';不难发现两者的对应关系:地址对象描述了起始坐标(从0开始)到结束坐标的范围。地址范围是Excel中的引用样式。注意:这两个概念将在工作表阅读和写作中使用。蜜蜂js-xlsx提供的接口非常清晰,主要分为两类:xlsx对象本身提供的功能解析数据和导出数据Utils工具类向数据表对象添加数据转换二维数组和格式化对象或HTMLintoworksheets对象将工作簿转换为另一种数据格式。行、列和范围之间的转码和解码。工作簿操作。细胞操作。读取数据并解析它。这是一个简单的Node示例(Node10+):constxlxs=require('xlsx');const{readFile}=require('fs').promises;(asyncfunction(params){//获取数据constexcelBuffer=awaitreadFile('./books.xlsx');//解析数据constresult=xlxs.read(excelBuffer,{type:'buffer',cellHTML:false,});console.log('TCL:result',result);})();您还可以使用utils.book_new()创建一个新工作簿对象:constxlsx=require('xlsx'),{utils}=xlsx;constworkBook=utils.book_new();//创建工作簿并使用更多工具来操作工作簿对象://沿用上面的例子constws_data=[["S","h","e","e","t","J","S"],[1,2,3,4,5]];constworkSheet=XLSX.utils.aoa_to_sheet(ws_data);//使用二维数组创建工作表对象utils.book_append_sheet(workBook,workSheet,'worksheetname');//追加一个工作表到工作簿控制台.log(workBook);详细分析文档详细分析选项数据填充工作表是实际存储数据的地方,大多数情况下我们的操作都是对工作表对象的操作。js-xlsx提供多种操作方式数据,这里是一些最常见的操作:使用已有的数据结构创建工作表的二维数组作为数据源JSON作为数据源修改工作表数据二维数组作为数据源JSON作为数据源创建工作表constworkSheet=utils.aoa_to_sheet([[1,2,3,newDate()],[1,2,,4]],{sheetStubs:false,cellStyles:false,cellDates:true//解析为本地时间});控制台.log(workSheet);二维数组之间的关系很好理解,数组中的每个数组代表一行。图片:二维数组结果constworkSheet=utils.json_to_sheet([{'column1':1,'column2':2,'Column3':3},{'Column1':4,'Column2':5,'Column3':6}],{header:['Column1','Column2','Column3'],skipHeader:true//跳过上面的标题行})console.log(workSheet);图片:JSON效果详细文档地址修改数据表数据constworkSheet=utils.json_to_sheet([{'column1':1,'Column2':2,'Column3':3},{'Column1':4,'Column2':5,'Column3':6}],{header:['Column1','Column2','Column3'],skipHeader:true//跳过上面的标题行})utils.sheet_add_aoa(workSheet,[[7,8,9],['A','B','C']],{origin:'A1'//从A1添加内容});console.log(workSheet);图片:二维数组结果constworkSheet=utils.json_to_sheet([{'Column1':1,'Column2':2,'Column3':3},{'Column1':4,'Column2':5,'Column3':6}],{header:['Column1','Column2','column3'],skipHeader:true//跳过上面的标题行})utils.sheet_add_json(workSsheet,[{'第1列':7,'第2列':8,'第3列':9},{'第1列':'A','第2列':'B','第3列':'C'}],{origin:'A1',//从A1header添加内容:['Column1','Column2','Column3'],skipHeader:true//跳过上面的标题行});console.log(workSheet);图片:JSON效果详细文档地址数据导出数据导出分为两部分:使用工具类将工作簿对象转换为其他数据结构调用write或writeFile方法转换为其他数据结构详细用例这里不提供,可以转换的格式如下:详细文档地址输出文件下面是一个简单的Node例子(Node10+):constxlsx=require('xlsx'),{utils}=xlsx;const{writeFile}=require('fs').promises;constworkBook=utils.book_new();constworkSheet=utils.aoa_to_sheet([[1,2,3]],{cellDates:true,});//toworkbookutils.book_append_sheet(workBook,workSheet,'helloWorld');//浏览器和node共享的API,其实node可以直接使用xlsx.writeFile写文件,但是浏览器没有这个APIconstresult=xlsx.write(workBook,{bookType:'xlsx',//输出文件类型type:'buffer',//输出数据类型compression:true//启用zip压缩});//写入文件writeFile('./hello.xlsx',result).catch((error)=>{console.log(error);});为输出选项编写方法文档和支持的输出文件格式js-xlsx上其他优秀文章https://www.cnblogs.com/liuxi...https://github.com/SheetJS/js...