前端解析Excel(xlsx包)

需求场景

由于这边可能有几百条数据要上传，但是暂时不经过后端，excel中的数据要回写在这里

解决办法

步骤1（安装alsx包）

npm install xlsx

步骤2 在需要的位置引入

import * as XLSX from 'xlsx'

步骤3 配合elementui的upload组件使用

   <el-upload
          style="margin-top: 20px"
          action
          accept=".xlsx, .xls"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handle"
          title="批量上传"
   >
   方法
readFile(file) {
  //文件读取
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsBinaryString(file); //以二进制的方式读取
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
},
async handle(ev) {
  const file = ev.raw;
  console.log(file);
  if (!file) {
    return this.$message.error('文件打开失败');
  }
  const data = await this.readFile(file);
  const workbook = XLSX.read(data, { type: 'binary' }); //解析二进制格式数据
  console.log('二进制数据的解析:');
  console.log(workbook);
  const worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
  const result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
  console.log('最终解析的 json 格式数据:');
  console.log(result);
  // 下面是我的业务代码，不用管，可以作为参考
  const arr = [];
  result.forEach((item) => {
    arr.push({
      strat: Number(item['刷新时机']),
      endAt: item['结束时间'],
      maxSlot: Number(item['广场结束位置']),
      minSlot: Number(item['广场开始位置']),
      startAt: item['开始时间'],
      workID: Number(item.workID)
    });
  });
  this.massWorkIdsData = this.massWorkIdsData.concat(arr);

遇到的一些问题（很简单但是其实废了我好大劲去找，excel中的中英文空格）

由于我这里用到了element的datepicker组件，绑定的值也就是上面提到的startAt: item['开始时间'],通过文件拿到的时间进行修改时就会报错。提示date3.getFullYear等not a function。我在vue开发者工具和后端报错中都排查了一遍。 最后吧excel中的数据复制过来。发现vscode直接就提示错误了（中文空格）

参考的原博主的地址：blog.csdn.net/A____t/arti…