React 解析excel文件

最新推荐文章于 2024-08-04 23:11:37 发布

摸鱼第一人

最新推荐文章于 2024-08-04 23:11:37 发布

阅读量2.3k

点赞数 3

分类专栏： React 文章标签： react.js 前端

本文链接：https://blog.csdn.net/xJ_fang/article/details/124190122

版权

React 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

首先安装安装xlsx插件

yarn add xlsx

使用xlsx解析

    /**
     * 上传文件并解析成json
     */
    const HandleImportFile = (info) => {
        let files = info.file;
        // 获取文件名称
        let name = files.name
        // 获取文件后缀
        let suffix = name.substr(name.lastIndexOf("."));
        let reader = new FileReader();
        reader.onload = (event) => {
            try {
                // 判断文件类型是否正确
                if (".xls" != suffix && ".xlsx" != suffix) {
                    message.error("选择Excel格式的文件导入!");
                    return false;
                }
                let { result } = event.target;
                // 读取文件
                let workbook = XLSX.read(result, { type: 'binary' });
                let data = [];
                // 循环文件中的每个表
                for (let sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        // 将获取到表中的数据转化为json格式
                        data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
                console.log('data:', data);
            } catch (e) {
                message.error('文件类型不正确！');
            }
        }
        reader.readAsBinaryString(files);
        setIsLoading(false);
    }

使用antd的Upload组件上传文件

 <Upload
    accept=".xls , .xlsx"
    maxCount={1}
    showUploadList={false}
    customRequest={HandleImportFile}
  >
   <Button icon={<UploadOutlined />} type="primary">上传文件</Button>
 </Upload>