当前位置: 博客 /  JavaScript  / 纯前端读取Excel文件

文件上传

前端上传文件,我们使用表单输入元素<input>,type类型为fileaccept属性表明了可接受的文件类型,此处为读取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

- END -