vue项目如何利用xlsx组件，读取复杂表格的数据

直接上代码

一、封装的工具类

  // 表格文件转json
  xlsxToJson(file) {
    return new Promise((resolve, reject) => {
      const XLSX = require("xlsx");
      const fileReader = new FileReader();
      fileReader.onload = e => {
        try {
          const data = e.target.result; // 获取的数据
          const workBook = XLSX.read(data, { type: 'binary' }) // data转xlsx数据对象
          let sheetNames = workBook.SheetNames || []
          let sheetDatas = workBook.Sheets || []
          let datas = sheetDatas[sheetNames[0]];
          let result = XLSX.utils.sheet_to_json(datas, { range: 2, defval: ' ' });// range: 2代表从第几行开始读取，defval是为空属性设置默认值
          resolve(result);
        } catch (error) {
          reject(error)
          Toast(error);
        }
      }
      fileReader.readAsBinaryString(file);
    })
  },

二、界面调用

import Utils from "../../../src/plugins/utils";
 // 导入文件,选中文件后的回调  界面接上一篇文章
    onFileChanged(e) {
      let that = this;
      this.cardList = [];
      let files = e.target.files || [];
      let file;
      if (files.length > 0) {
        file = files[0];
      } else {
        Toast("请选择导入内容!");
        return;
      }
      if (file && file.name.match(/xls|xlsx/)) {
        Utils.xlsxToJson(file)
          .then((res) => {
            for (let i = 0; i < res.length; i++) {
              let cardObj = {};
              let item = res[i];
              cardObj.xm = item["姓名"];
              cardObj.bm = item["部门"];
              cardObj.gh = item["工号"];
              cardObj.zw = item["职位"];
              that.cardList.push(cardObj);
            }
            console.log("打卡数据：", that.cardList);
            that.upCardData(that.cardList);
          })
          .catch(() => {
            Toast.fail("导入信息失败!");
          })
          .finally(() => {
            e.target.value = "";
          });
      } else {
        Toast.fail("请选择正确的模板!");
        return;
      }
    },

上一篇文章