在React中使用Antd上傳并讀取Excel文件的詳細步驟

更新時間：2025年01月15日 09:38:59 作者：再吃一根胡蘿卜

在React中使用Antd組件庫來上傳并讀取Excel文件,可以結合antd的Upload組件和xlsx庫來實現(xiàn),以下是一個詳細的步驟和示例代碼,展示如何在React應用中實現(xiàn)這一功能,感興趣的小伙伴跟著小編一起來看看吧

安裝依賴

首先，你需要安裝xlsx庫和antd庫：

npm install xlsx antd

創(chuàng)建React組件

接下來，創(chuàng)建一個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組件創(chuàng)建一個文件上傳按鈕。
- beforeUpload函數(shù)用于校驗文件格式，確保用戶上傳的是有效的Excel文件。
- customRequest函數(shù)用于處理文件上傳邏輯，讀取文件內容并轉換為JSON格式。
讀取Excel文件：
- 使用FileReader對象讀取用戶選擇的文件。readAsBinaryString方法將文件內容讀取為二進制字符串。
- 使用XLSX.read方法讀取二進制字符串，并將其轉換為工作簿對象。
- 獲取第一個工作表的名稱和內容。
- 使用XLSX.utils.sheet_to_json方法將工作表的內容轉換為JSON格式。
展示數(shù)據(jù)：
- 使用<pre>{JSON.stringify(data, null, 2)}</pre>將讀取到的數(shù)據(jù)以格式化的JSON形式展示在頁面上。

樣式設置

為了使上傳按鈕更符合Ant Design的樣式規(guī)范，可以使用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;
}

代碼解釋

自定義樣式文件：
- 創(chuàng)建一個ExcelUploader.css文件，定義上傳按鈕和數(shù)據(jù)預覽區(qū)域的樣式。
- 使用className屬性將自定義樣式應用到React組件中。
Ant Design樣式類：
- 使用Button組件的type="primary"屬性，使按鈕具有Ant Design的主色調。
- 使用icon="upload"屬性，添加上傳圖標。