xlsx.js 的使用：将 Excel 文件解析为 json

写在前面

在开发时，经常碰到导入文件的需求，有的是直接将文件或者url传给后端进行解析，但是有时，也需要前端进行解析，那么 xlsx.js 又派上了用场。

废话不多说，show me the code

使用

安装

npm install xlsx

导入

import * as XLSX from 'xlsx/xlsx.mjs'

需要解析的文件

对应的解析函数

export const parseExcelToJson = function( fileBlob, onloadCallback ){
  let code = 0;
  let message = "";
  let list = [];
  //验证文件格式
  if (!/.(xls|xlsx)$/.test( fileBlob.name.toLowerCase())) {
    message = "上传格式不正确，请上传xls或者xlsx格式"
    code = 1
    return {code, message, list}
  }

  //解析文件
  const fileReader = new FileReader();
  fileReader.onload = ev => {
    try {
      const data = ev.target.result;

      // 以二进制流方式读取得到整份excel表格对象
      const workbook = XLSX.read(data, {
        type: 'binary'
      });

      let index = 1;
      workbook.SheetNames.forEach(element => {
        const wsname = element // 取第一张表
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容

        // 编辑数据
        for (let i=0;i<ws.length;i++) {
          const item = ws[i];

          let sheetData = {
            namr: item["姓名"] || '',
            age: item["年龄"] || '',
          }
          list.push(sheetData);
          index++;         
        }
      });
      onload(onloadCallback({code, message, list}));
    } catch (e) {
      code = 99;
      message = "解析数据失败：" + e;
      return {code, message, list};
    }
  }
  fileReader.readAsBinaryString(fileBlob)
  return {code, message, list};
}

解析结果

啰嗦一下

• workbook.SheetNames是一个数组，包含的元素是excel文件的工作表名称
• workbook.Sheets是工作表对象集合，包含的属性为工作表名称，可以通过工作表名称取到对应的工作表对象
• XLSX.utils.sheet_to_json是解析的关键，可以把工作表对象转化为json数组

More