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

安装依赖

首先，你需要安装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"属性，添加上传图标。