react+ant+XLSX 简易excel前端解析mod

写个前端解析excel的例子
项目之前解析一般都在后端的，这次试试前端的

首先使用最基础的上传组件

<div>
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>
</div>

然后搞一个excelTestModel
大概长这个样

然后加上方法

  const props = {
    name: 'file',
    accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    beforeUpload: (file, fileList) => {
      var rABS = true;
      const f = fileList[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        if (!rABS) data = new Uint8Array(data);
        var workbook = XLSX.read(data, {
          type: rABS ? 'binary' : 'array',
        });
        // 假设我们的数据在第一个标签
        var first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
        // XLSX自带了一个工具把导入的数据转成json
        var jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });
        console.log(jsonArr);
      };
      if (rABS) reader.readAsBinaryString(f);
      else reader.readAsArrayBuffer(f);
      return false;
    },
  };

读出来

[
    ["column1","column2","column3","column4","column5"],
    ["value1","value1","value1","value1","value1"],
    ["value2","value2","value2","value2","value2"],
    ["value3","value3","value3","value3","value3"],
    ["value4","value4","value4","value4","value4"],
    ["value5","value5","value5","value5","value5"],
    ["value6","value6","value6","value6","value6"]
]

成功读出来了，但是感觉格式有点问题

加个tansfomer 转变成 object[ ] 好了

let tansfomer = arraylist => {
    let attributeList = arraylist[0];
    let tempdata = [];
    let slicedList = arraylist.slice(1);
    slicedList.map(item => {
      let tempobject = {};
      item.forEach((item, index) => {
        tempobject[attributeList[index]] = item;
      });
      tempdata.push(tempobject);
    });
    return tempdata;
  };

加上试一下效果

[
    {
        "column1": "value1",
        "column2": "value1",
        "column3": "value1",
        "column4": "value1",
        "column5": "value1"
    },
    {
        "column1": "value2",
        "column2": "value2",
        "column3": "value2",
        "column4": "value2",
        "column5": "value2"
    },
    {
        "column1": "value3",
        "column2": "value3",
        "column3": "value3",
        "column4": "value3",
        "column5": "value3"
    },
    {
        "column1": "value4",
        "column2": "value4",
        "column3": "value4",
        "column4": "value4",
        "column5": "value4"
    },
    {
        "column1": "value5",
        "column2": "value5",
        "column3": "value5",
        "column4": "value5",
        "column5": "value5"
    },
    {
        "column1": "value6",
        "column2": "value6",
        "column3": "value6",
        "column4": "value6",
        "column5": "value6"
    }
]

还不错，这样就可以愉快的直接使用了

附上源码

import React from 'react';
import { Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import XLSX from 'xlsx';

export default function NewPage() {
  let tansfomer = arraylist => {
    let attributeList = arraylist[0];
    let tempdata = [];
    let slicedList = arraylist.slice(1);
    slicedList.map(item => {
      let tempobject = {};
      item.forEach((item, index) => {
        tempobject[attributeList[index]] = item;
      });
      tempdata.push(tempobject);
    });
    return tempdata;
  };

  const props = {
    name: 'file',
    accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    beforeUpload: (file, fileList) => {
      var rABS = true;
      const f = fileList[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        if (!rABS) data = new Uint8Array(data);
        var workbook = XLSX.read(data, {
          type: rABS ? 'binary' : 'array',
        });
        // 假设我们的数据在第一个标签
        var first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
        // XLSX自带了一个工具把导入的数据转成json
        var jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });
        console.log(jsonArr);
        console.log(tansfomer(jsonArr));
      };
      if (rABS) reader.readAsBinaryString(f);
      else reader.readAsArrayBuffer(f);
      return false;
    },
  };

  return (
    <div>
      <Upload {...props}>
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
    </div>
  );
}

大家也可以根据这个思路完成更多操作

如果帮助到你，能点个赞吗？