【React 导入Excel】

最新推荐文章于 2024-07-03 09:14:49 发布

Ailsy_

最新推荐文章于 2024-07-03 09:14:49 发布

阅读量1.3k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_64415782/article/details/126696948

版权

React 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在React应用中利用AntDesign的Upload组件导入Excel表格。首先，通过npm安装xlsx库，然后在需要的页面导入。在Upload组件中设置beforeUpload回调，读取文件并转换为JSON数据。最后处理数据并显示在表格中。遇到问题可留言讨论。

摘要由CSDN通过智能技术生成

最近做后台管理系统用到了这个导入Excel表格,我使用的是Ant Design这个组件库里面的upload

第一步：安装插件 xlsx

npm run xlsx

安装之后在你需要用到的页面引入

import * as XLSX from 'xlsx';

第二步:

 <Upload {...uploadProps}>
           <Button type="primary">导入Excel</Button>
 </Upload>

const uploadProps = {
    accept: '.xls,.xlsx,application/vnd.ms-excel',
    beforeUpload: (file) => {
      const f = file;
      const reader = new FileReader();
      reader.onload = (e) => {
        const datas = e.target.result;
        const workbook = XLSX.read(datas, {
          type: 'binary',
        });
        const first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });
        handleImpotedJson(jsonArr, file);
      };
      reader.readAsBinaryString(f);
      return false;
    },
    onRemove: () => {
      setWageTableData([]);
    },
  };

const handleImpotedJson = (jsonArr, file) => {
    console.log(jsonArr, file);
    //jsonArr返回的是你上传的excel表格的每一行的数据 是数组形式
    jsonArr.splice(0, 1); // 去掉表头
    const jsonArrData = jsonArr.map((item, index) => {
      console.log(item, index);
      let jsonObj = {};
      //在这写你需要的处理逻辑
      // jsonObj.id = data.length + index + 1;
      // jsonObj.key = data.length + index + 1 + '';
      // jsonObj.name = item[0];

      // jsonObj.profession = item[1];
      // jsonObj.pay = item[2];
      // jsonObj.work = item[3];
      return jsonObj;
    });
    console.log(jsonArrData);
    // setData([...data, ...jsonArrData]);
    setWageTableData(jsonArrData);
  };

大功告成! 有问题可以留言评论,react导出Excel表格的话我另一篇博客有