react-xlsx 前台读取excel并且转换为json发送到后台处理

上才艺

首先前台要npm一下react-xlsx

用一个标签来承接你的excel文件并且触发一个onChange事件

   <Button className="margin-right">
                <input  type='file' accept='.xlsx, .xls' onChange={onImportExcel} />
   </Button>

它长这个样子

 

然后当你选择文件点击确认的时候会触发刚才的onchange事件

      

  let data = [];
  const onImportExcel = file => {

    // 获取上传的文件对象
    const { files } = file.target;
// 通过FileReader对象读取文件
    const fileReader = new FileReader();

    fileReader.onload = event => {
      try {
        const { result } = event.target;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
       console.log(workbook)
        // 存储获取到的数据
        // 遍历每张工作表进行读取（这里默认只读取第一张表）
        for (const sheet in workbook.Sheets) {
          // esline-disable-next-line
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            console.log(workbook.Sheets)
            //由于表头都是中文的，这里我们找到表头对应的单元格，直接修改为我们想要的
            workbook.Sheets.第1页.A1.w = 'kid'
            workbook.Sheets.第1页.B1.w = 'yearAndmonth'
            workbook.Sheets.第1页.C1.w = 'oid'
            workbook.Sheets.第1页.F1.w = 'normcode'
            workbook.Sheets.第1页.J1.w = 'temp_nouse'
            workbook.Sheets.第1页.K1.w = 'kpival'
            workbook.Sheets.第1页.L1.w = 'score'
            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
       
            console.log(data)
            break; // 如果只取第一张表，就取消注释这行
          }
        }
        message.success('上传成功！')
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        message.error('文件类型不正确！');
      }
    };

// 以二进制方式打开文件

    fileReader.readAsBinaryString(files[0]);
  }

   

 

那个data就是最终转换后的json数据

 workbook.Sheets.第1页.A1.w = 'kid'
            workbook.Sheets.第1页.B1.w = 'yearAndmonth'
            workbook.Sheets.第1页.C1.w = 'oid'
            workbook.Sheets.第1页.F1.w = 'normcode'
            workbook.Sheets.第1页.J1.w = 'temp_nouse'
            workbook.Sheets.第1页.K1.w = 'kpival'
            workbook.Sheets.第1页.L1.w = 'score'

这些方法是用来设置表头的  因为我的表头是中文的   我要转换成和后台一致的才行 

然后就可以发送到后台去愉快的玩耍了

 

 

点个赞呗