在React中使用Antd上传并读取Excel文件的详细步骤

更新时间：2025年01月15日 09:38:59 作者：再吃一根胡萝卜

在React中使用Antd组件库来上传并读取Excel文件,可以结合antd的Upload组件和xlsx库来实现,以下是一个详细的步骤和示例代码,展示如何在React应用中实现这一功能,感兴趣的小伙伴跟着小编一起来看看吧

安装依赖

首先，你需要安装xlsx库和antd库：

npm install xlsx antd

创建React组件

接下来，创建一个React组件来处理文件上传和读取Excel文件。

import React, { useState } from 'react';
import { Upload, Button, message } from 'antd';
import XLSX from 'xlsx';

const ExcelUploader = () => {
  const [data, setData] = useState([]);

  const handleUpload = ({ file }) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const binaryString = event.target.result;
        const workbook = XLSX.read(binaryString, { type: 'binary' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet);
        setData(jsonData);
        message.success('文件上传成功');
      } catch (error) {
        message.error('文件读取失败，请检查文件格式是否正确');
        console.error('读取文件失败', error);
      }
    };
    reader.readAsBinaryString(file);
  };

  const beforeUpload = (file) => {
    const validFormats = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
    if (!validFormats.includes(file.type)) {
      message.error('请选择一个有效的Excel文件');
      return false;
    }
    return true;
  };

  return (
    <div>
      <Upload
        beforeUpload={beforeUpload}
        customRequest={handleUpload}
        showUploadList={false}
      >
        <Button icon="upload">上传Excel文件</Button>
      </Upload>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default ExcelUploader;

代码解释

安装与引入：
- 使用npm install xlsx antd安装xlsx和antd库。
- 在React组件中引入Upload、Button、message组件和XLSX库：

import { Upload, Button, message } from 'antd';
import XLSX from 'xlsx';

文件上传处理：
- 使用Upload组件创建一个文件上传按钮。
- beforeUpload函数用于校验文件格式，确保用户上传的是有效的Excel文件。
- customRequest函数用于处理文件上传逻辑，读取文件内容并转换为JSON格式。
读取Excel文件：
- 使用FileReader对象读取用户选择的文件。readAsBinaryString方法将文件内容读取为二进制字符串。
- 使用XLSX.read方法读取二进制字符串，并将其转换为工作簿对象。
- 获取第一个工作表的名称和内容。
- 使用XLSX.utils.sheet_to_json方法将工作表的内容转换为JSON格式。
展示数据：
- 使用<pre>{JSON.stringify(data, null, 2)}</pre>将读取到的数据以格式化的JSON形式展示在页面上。

样式设置

为了使上传按钮更符合Ant Design的样式规范，可以使用Ant Design的预设样式类。以下是一个示例，展示如何使用Ant Design的样式类来美化上传按钮：

import React, { useState } from 'react';
import { Upload, Button, message } from 'antd';
import XLSX from 'xlsx';
import './ExcelUploader.css'; // 引入自定义样式文件

const ExcelUploader = () => {
  const [data, setData] = useState([]);

  const handleUpload = ({ file }) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const binaryString = event.target.result;
        const workbook = XLSX.read(binaryString, { type: 'binary' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet);
        setData(jsonData);
        message.success('文件上传成功');
      } catch (error) {
        message.error('文件读取失败，请检查文件格式是否正确');
        console.error('读取文件失败', error);
      }
    };
    reader.readAsBinaryString(file);
  };

  const beforeUpload = (file) => {
    const validFormats = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
    if (!validFormats.includes(file.type)) {
      message.error('请选择一个有效的Excel文件');
      return false;
    }
    return true;
  };

  return (
    <div className="upload-container">
      <Upload
        beforeUpload={beforeUpload}
        customRequest={handleUpload}
        showUploadList={false}
      >
        <Button type="primary" icon="upload">上传Excel文件</Button>
      </Upload>
      <pre className="data-preview">{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default ExcelUploader;

自定义样式文件 ExcelUploader.css

.upload-container {
  margin: 20px;
  text-align: center;
}

.data-preview {
  margin-top: 20px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
  max-height: 400px;
}

代码解释

自定义样式文件：
- 创建一个ExcelUploader.css文件，定义上传按钮和数据预览区域的样式。
- 使用className属性将自定义样式应用到React组件中。
Ant Design样式类：
- 使用Button组件的type="primary"属性，使按钮具有Ant Design的主色调。
- 使用icon="upload"属性，添加上传图标。

总结

通过使用antd的Upload组件和xlsx库，你可以在React项目中高效地实现Excel文件的上传和读取功能。同时，通过自定义样式文件，可以确保组件的样式符合Ant Design的设计规范。

到此这篇关于在React中使用Antd上传并读取Excel文件的详细步骤的文章就介绍到这了,更多相关React使用Antd上传并读取Excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React配置代理方式(proxy)
这篇文章主要介绍了React配置代理方式(proxy),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
react中将html字符串渲染到页面的实现方式
这篇文章主要介绍了react中将html字符串渲染到页面的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
React报错之组件不能作为JSX组件使用的解决方法
本文主要介绍了React报错之组件不能作为JSX组件使用的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
React封装CustomSelect组件思路详解
小编需要封装一个通过Popover弹出框里可以自定义渲染内容的组件，渲染内容暂时有: 单选框, 复选框，接下来通过本文给大家分享React封装CustomSelect组件思路,需要的朋友可以参考下
2022-07-07
React实现阿里云OSS上传文件的示例
这篇文章主要介绍了React实现阿里云OSS上传文件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
关于React状态管理的三个规则总结
随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state （状态）,这篇文章主要给大家介绍了关于React状态管理的三个规则,需要的朋友可以参考下
2021-07-07
十分钟带你快速了解React16新特性
这篇文章主要介绍了十分钟带你快速了解React16新特性,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
React hooks的优缺点详解
这篇文章主要介绍了React hooks的优缺点详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
一起来学习React元素的创建和渲染
这篇文章主要为大家详细介绍了React元素的创建和渲染，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
React+高德地图实时获取经纬度,定位地址
思路其实没有那么复杂，把地图想成一个盒子容器，地图中心点想成盒子中心点；扎点在【地图中心点】不会动，当移动地图时，去获取【地图中心点】经纬度，设置某个位置的时候，将经纬度设置为【地图中心点】即可
2021-06-06