纯前端读取Excel文件

文件上传

前端上传文件，我们使用表单输入元素<input>，type类型为file；accept属性表明了可接受的文件类型，此处为读取excel文件（见文后参考资料）。

<input
  type="file"
  accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
/>

读取文件

在上面的input选择文件确定后，我们首先需要创建一个FileReader对象。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生> 成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

参考MDN上给出的例子，主要实现代码如下，实际应用时需添加异常处理：

处理上传的文件，与以往不同的是，此处不需要传给服务器，而是纯前端直接读取，读取的数据可以实时展现在前端。

workbook为整个工作簿;

“目标sheet”为你的目标sheet的名字，或0表示第一个sheet；

将该sheet的值使用XLSX.utils.sheet_to_json转为json格式的数据；

在生成的json数据中提取想要的数据。

代码

<input
  type="file"
  id="fileInput"
  name="fileInput"
  onChange={this.handleInputFile}
  accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
/>

import XLSX from "xlsx";

handleInputFile(){
  let reader = new FileReader();
  reader.onload = function(e) {
    let workbook = XLSX.read(data, { type: "buffer" });
    let sheetInner =  XLSX.utils.sheet_to_json(workbook.Sheets["目标sheet"])  
    let list = []
    for (let i in sheetInner) {
      let obj = {
        ID: sheetInner[i]["编号"],
        name: sheetInner[i]["姓名"],
      };
      list.push(carObj);
    }
    that.setState({
      list
    });
  }
  reader.readAsArrayBuffer(f);
}

FileReader接口

FileReader 接口有5个方法，分别是abort()，readAsArrayBuffer()，readAsBinaryString()，readAsDataURL()，readAsText()。

需要注意的是其中的readAsBinaryString()：

如果将let workbook = XLSX.read(data, { type: "buffer" });中的type修改为binary，对应的reader.readAsArrayBuffer(f)改为reader.readAsBinaryString(f)，经测试，这样也是可以正常运行、读取成功的，但是官网注明：

注意：从 2012 年 7 月 12 日起，FileReader.readAsBinaryString()方法已从 W3C 工作草案废除。该方法已从 FileAPI 标准移除，请使用 FileReader.readAsArrayBuffer() 代替。

Note: The use of readAsArrayBuffer() is preferred over readAsBinaryString(), which is provided for backwards compatibility.

所以请避免使用readAsBinaryString()方法，最好使用推荐的FileReader.readAsArrayBuffer()方法。

参考资料

input type=”file”

accept接收文件类型

FileReader

FileAPI