js上传解析xlsx表格数据

335 阅读2分钟

前言:在对于刚刚入行的前端小伙伴们,对于项目功能我相信肯定有一种心态,后台能处理的数据就都有后台来处理,前端不做任何处理最好,哈哈, 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的时候可以手动给他变成英文的名

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