实现react+ant+XLSX 简易excel前端解析

背景

项目之前解析一般都在后端的，但是这次的需求为了文件内容的安全性，先在前端解析后在加密，然后存储，接下来开始行动！

最关键的是核心插件xlsx 安装xlsx：npm install xlsx --save-dev

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

<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 * as 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>
  );
}