在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实现复选框全选和反选组件效果
这篇文章主要为大家详细介绍了react实现复选框全选和反选组件效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
react性能优化useMemo与useCallback使用对比详解
这篇文章主要为大家介绍了react性能优化useMemo与useCallback使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
React 项目中动态设置环境变量
本文主要介绍了React 项目中动态设置环境变量，本文将介绍两种常用的方法，使用 dotenv 库和通过命令行参数传递环境变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
react实现组件状态缓存的示例代码
本文主要介绍了react实现组件状态缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
React中useCallback useMemo使用方法快速精通
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender
2023-02-02
React特征Form 单向数据流示例详解
这篇文章主要为大家介绍了React特征Form 单向数据流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
TypeScript在React中的应用技术实例解析
这篇文章主要为大家介绍了TypeScript在React中的应用技术实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
react-beautiful-dnd 实现组件拖拽功能
这篇文章主要介绍了react-beautiful-dnd 实现组件拖拽功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-08-08
Next+React项目启动慢刷新慢的解决方法小结
本文主要介绍了Next+React项目启动慢刷新慢的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-04-04
ReactJS实现表单的单选多选和反选的示例
本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例，非常具有实用价值，需要的朋友可以参考下
2017-10-10