前端上传表格，变成可处理的JSON数据

前言：在对于刚刚入行的前端小伙伴们，对于项目功能我相信肯定有一种心态，后台能处理的数据就都有后台来处理，前端不做任何处理最好，哈哈，

1.前端处理的数据不能持久化，就算是数据持久化也都是依赖h5的新特性，做本地存贮一个是存在浏览器缓存上面（Session），一种则是通过浏览器存在电脑的硬盘上面（Local），这对前端处理数据大大的有点难度

2.依赖了接口这样每次调用接口来处理这个数据，感觉方便了很多，但是后端又不愿意了，哈哈

——>

哔哔一大堆， 废话不多说上代码

//下载依赖
yarn add xlsx
           

下载好了依赖的插件后，到咱们开始写代码的时候，

import { Button, Upload} from 'antd'; // 不知道这是干啥的就去 antDesign UI官网上面查看一下这个玩意是啥哈
import { UploadOutlined, PlusOutlined } from '@ant-design/icons';
    <Upload
        fileList={[]}
        accept=".xlsx, .xls" // 我这个只是上传了这么解析 xlsx的表格的，如果是要解析pdf doc的那您就自求多福吧
        beforeUpload={(file, list) => uploadBeforeUpload(file, list)}
    >
     <Button
        style={{ marginTop: 15, marginBottom: 15 }}
         icon={<UploadOutlined />}
     >
        上传表格
      </Button>
    </Upload>
           

咱们上一步已经把上传的按钮功能写了，但是上传处理的方法还没有写，哈哈哈

const uploadBeforeUpload = (file) => {
        const fileReader = new FileReader();
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(file);
        fileReader.onload = (event) => {
            const { result } = event.target;
            // 以二进制流方式读取得到整份excel表格对象
            const workbook = XLSX.read(result, { type: 'binary' });
            let data = []; // 存储获取到的数据
            // 遍历每张工作表进行读取（这里默认只读取第一张表）
            for (const sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法将 excel 转成 json 数据
                    data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    // break; // 如果只取第一张表，就取消注释这行
                }
            }
            console.log(data);
        };
    };
           

这里的data就是你要处理的解析出来的JSON了，不过有一点你要注意，因为你要解析的表格头部的列是中文的，你可能得转一下，或者在表格写的时候按照中文的来渲染数据 👇

const columns = [
        {
            title: '分配给司机的数量',
            dataIndex: '分配给司机的数量',
            ellipsis: true,
            hideInSearch: true,
            align: 'center',
        },
    ];
            <Table
                style={{ padding: '0 10px 10px 10px', backgroundColor: '#fff' }}
                scroll={{ x: 4500 }}
                dataSource={dataList} // 此处是data
                columns={columns}
            />
           

上面渲染表格，我是以中文的表头来渲染的，有没有感觉很low，其实可以在刚取出来data的时候可以手动给他变成英文的名

说到最后希望这篇帖子能够帮助到你，代码可以抄但是更得理解，多敲才是王道希望你对代码有着真挚的感情，对自己敲出的代码都有不一样的自信，感谢您的浏览，愿你出走半生，归来仍是少年