js使用xlsx读取excel文件的详细步骤

一、js使用xlsx读取excel文件的详细步骤

1、在项目中使用xlsx插件读取Excel文件，首先需要通过npm或yarn安装插件，安装后在node_modules文件夹和package.json文件中可以找到xlsx依赖。获取文件对象时，推荐使用HTML5的原生文件上传控件，其中multiple属性允许上传多个文件。选择文件后，触发事件的流程是：mousedown, focus, mouseup, click, blur, focus, change。推荐监听change事件来获取文件内容变更，代码如下：

2、window.document.getElementById("uploadExcel").addEventListener("change", function(e){

3、 let fileList= e.target.files;

4、打印fileList信息，可以发现fileList是一个类数组，由传入的file对象组成，每个file对象包含lastModifiedNumber、lastModeifiedDateObject、name、size、type和weblitRelativePath等属性。读取文件数据时，首先创建一个FileReader实例，使用readAsDataURL(file)方法读取文件数据，使用onload事件来输出读取成功后result中的数据：

5、读取Excel文件时，主要通过XLSX.read(data,{type: type})方法实现，返回一个名为Workbook的对象。type的取值要与FileReader方法对应的type一致。全部代码如下：

6、let rABS= false;//是否将文件读取为二进制字符串

7、document.getElementById("excel").addEventListener("change", function(e){

8、 var reader= new FileReader();

9、 wb= XLSX.read(btoa(fixdata(data)),{type:'base64'});

10、 wb= XLSX.read(data,{type:'binary'});

11、 document.getElementById("demo").innerHTML= JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));

12、 reader.readAsBinaryString(f);

13、 for(; l< data.byteLength/ w;++l) o+= String.fromCharCode.apply(null, new Uint8Array(data.slice(l* w, l* w+ w)));

14、 o+= String.fromCharCode.apply(null, new Uint8Array(data.slice(l* w)));

15、Workbook对象包含SheetNames和Sheets，每个Sheet是一个Sheet Object，包含A1这样的键值表示每个单元格的内容，特殊cell如!ref、!merges等。读取Workbook时，可以使用XLSX.utils提供的工具类，如sheet_to_html、sheet_to_json等方法，将Excel数据转换为其他格式。

16、function outputWorkbook(workbook){

17、 var sheetNames= workbook.SheetNames;

18、 var worksheet= Workbook.Sheets[name];

19、 console.log(key, key[0]==='!'? worksheet[key]: worksheet[key].v);

20、插件提供了多种方法，如aoa_to_sheet、json_to_sheet、table_to_sheet等，用于生成和处理Excel文件。

二、JS读取excel表,插入或修改数据后保存

1、借助第三方库 SheetJS，使用JavaScript读取、填充Excel表格数据并保存文件。基本步骤如下：

2、首先，读取Excel模板，获取单元格数据。使用SheetJS库提供的API，此步骤实现读取Excel模板内容。

3、其次，在指定单元格填充数据。SheetJS库提供实用方法帮助完成此任务。根据需求，选择适当单元格位置插入所需数据。

4、填充完毕后，将workbook写入Excel文件并保存。SheetJS库内置的writeFile方法即可完成此操作，确保数据得以保存。

5、使用FileSaver.js的saveAs函数，可以将二进制数据保存为文件，实现数据的本地存储。

6、但需注意，由于JavaScript的安全限制，不能直接访问本地文件系统。因此，需要通过HTML表单上传文件来实现数据读取。同时，考虑到SheetJS库的体积较大，可能需使用webpack等工具进行打包和压缩，以提高加载速度和优化性能。

三、使用JS解析excel文件的完整实现步骤

excel文件其实是一个 zip包。我通过创建一个 xlsx文件，并在其中新建了两个 sheet表。其中一个 sheet表的内容是 ABC12121212，另一个是 ABqaqaqa。之后，我使用 unzip命令解压这个 xlsx文件，命令为 unzip test.xlsx-d test。

通过 tree命令查看目录结构，可以看到解压后的文件包括 [Content_Types].xml、_rels、docProps、xl等文件夹，以及一个名为 workbook.xml的文件。进一步查看 xl文件夹，里面包含了 sharedStrings.xml、styles.xml、theme、workbook.xml和 worksheets文件夹。在 worksheets文件夹下，有两个显眼的 xml文件：sheet1.xml和 sheet2.xml。这些 xml文件包含了每个 sheet的详细信息。

以 sheet1.xml为例，我们可以看到它包含了一些 XML元素，如 worksheet、sheetPr、dimension、sheetViews、sheetFormatPr和 sheetData。其中，sheetData包含了具体的单元格数据。每一个 row元素代表一行，其中的 c元素则代表具体的单元格，v元素则显示单元格中的实际内容。

通过解析这些 xml文件，我们可以获取到 excel文件中的数据。这个过程涉及到 XML解析的技术，例如 DOM解析和 SAX解析。在实际应用中，我们可以通过 JavaScript的内置方法或第三方库来实现这一过程。

总结来说，解析 excel文件首先需要将其转换为 zip包，然后解压并解析其中的 xml文件。这个过程涉及到对 XML文件的解析，可以使用多种技术实现。通过这种方式，我们可以直接从源文件中读取和处理 excel数据，而无需依赖特定的库或工具。