手把手教你用React做一个Excel导出功能，看完就能用！前言 Excel导出功能。很简单，就是把表格数据导出成

前言

Excel导出功能。很简单，就是把表格数据导出成Excel文件，用户下载到本地。代码可以直接复制粘贴到你的项目里用。

先看看效果

这个组件能干啥：

一键导出当前页面数据

支持导出全部数据（需要后端接口）

自动生成Excel文件

支持自定义文件名

青色主题按钮，看着舒服

开始写代码

第一步：安装依赖

npm install xlsx antd

第二步：创建组件

import * as XLSX from "xlsx";
import { Button, Dropdown } from "antd";
import type { MenuProps } from "antd";

const TableExcel = ({ listData }) => {
  // 下拉菜单选项
  const items = [
    {
      key: "1",
      label: "导出全部",
    },
    {
      key: "2",
      label: "导出当前页",
    },
  ];

  // 核心方法：导出Excel
  const exportToExcel = (data, filename = "export.xlsx") => {
    // 如果没有数据，提示一下
    if (!data || data.length === 0) {
      alert("没有数据可导出");
      return;
    }

    // 创建新的工作簿
    const workbook = XLSX.utils.book_new();

    // 把数据转成工作表
    const worksheet = XLSX.utils.json_to_sheet(data);

    // 把工作表加到工作簿里
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    // 导出文件
    XLSX.writeFile(workbook, filename);
  };

  // 处理菜单点击
  const onMenuClick = (e) => {
    if (e.key === "1") {
      // 导出全部数据
      // 这里需要调用你的接口获取全部数据
      console.log("导出全部数据");
      // api.getAllData().then(data => exportToExcel(data, "全部数据.xlsx"));
    } else {
      // 导出当前页数据
      exportToExcel(listData, "当前页数据.xlsx");
    }
  };

  return (
    <>
      {/* 下拉菜单 */}
      <Dropdown
        menu={{ 
          items, 
          onClick: onMenuClick, 
          style: { textAlign: "center" } 
        }}
        placement="top"
        arrow
      >
        {/* 导出按钮 */}
        <Button
          variant="filled"
          color="cyan"
          onClick={() => exportToExcel(listData, "数据导出.xlsx")}
        >
          导出Excel
        </Button>
      </Dropdown>
    </>
  );
};

export default TableExcel;

关键点解释

1. 导出流程

text

准备数据 → 创建工作簿 → 转成工作表 → 导出文件 → 用户下载

2. 数据格式要求

你的数据必须是这样的格式：

const data = [
  { 姓名: '张三', 年龄: 25, 城市: '北京' },
  { 姓名: '李四', 年龄: 30, 城市: '上海' },
  { 姓名: '王五', 年龄: 28, 城市: '广州' }
];

3. 下拉菜单的作用

导出全部：通常需要调用后端接口获取所有数据

导出当前页：直接导出当前显示的数据

怎么用

1. 复制代码到你的项目

把上面的代码复制到一个新文件，比如 ExcelExport.tsx

2. 在需要的地方引入

import ExcelExport from './ExcelExport';

// 在你的页面里，传入数据
const data = [
  { 姓名: '张三', 年龄: 25, 城市: '北京' },
  { 姓名: '李四', 年龄: 30, 城市: '上海' }
];

<ExcelExport listData={data} />

3. 修改导出逻辑

如果你需要导出全部数据，在 onMenuClick 里加你的接口调用：

const onMenuClick = (e) => {
  if (e.key === "1") {
    // 调用你的API获取全部数据
    api.getAllData().then(data => {
      exportToExcel(data, "全部数据.xlsx");
    });
  } else {
    exportToExcel(listData, "当前页数据.xlsx");
  }
};

进阶用法

1. 自定义文件名

const exportToExcel = (data, filename) => {
  // 自动生成带时间戳的文件名
  const timestamp = new Date().toISOString().split('T')[0];
  const finalName = filename || `数据导出_${timestamp}.xlsx`;
  
  // ... 导出逻辑
};

2. 数据格式化

const formatDataForExport = (data) => {
  return data.map(item => ({
    ...item,
    // 格式化日期
    创建时间: new Date(item.createTime).toLocaleDateString(),
    // 格式化状态
    状态: item.status === 1 ? '启用' : '禁用'
  }));
};

// 导出时先格式化
exportToExcel(formatDataForExport(listData));

3. 多工作表导出

const exportToExcel = (data, filename = "export.xlsx") => {
  const workbook = XLSX.utils.book_new();
  
  // 第一个工作表：用户数据
  const userSheet = XLSX.utils.json_to_sheet(data.users);
  XLSX.utils.book_append_sheet(workbook, userSheet, "用户数据");
  
  // 第二个工作表：统计数据
  const statsSheet = XLSX.utils.json_to_sheet(data.stats);
  XLSX.utils.book_append_sheet(workbook, statsSheet, "统计数据");
  
  XLSX.writeFile(workbook, filename);
};

编辑

常见问题

Q: 为什么点击导出没反应？

A: 检查浏览器控制台有没有报错，通常是数据格式不对或者xlsx库没装好。

Q: 导出的Excel中文乱码怎么办？

A: 确保你的数据是UTF-8编码，Excel打开时选择正确的编码格式。

Q: 想导出特定列怎么办？

A: 在导出前过滤数据：

const filteredData = listData.map(item => ({
  姓名: item.name,
  年龄: item.age
  // 只导出你需要的字段
}));
exportToExcel(filteredData);

Q: 导出大文件很慢怎么办？

A: 可以加个loading状态，或者分批导出：

本期内容就到这里，各位大佬觉得有用可以收藏+关注，另外主页有火柴能点着的干货哦！！

手把手教你用React做一个Excel导出功能，看完就能用！

前言