React + exceljs 导出Excel文件

React + exceljs 导出Excel文件

 

1.前端导出 excel 文件基本步骤

1.1 引入

import Excel from "exceljs";

1.2 初始化工作簿

const workbook = new Excel.Workbook();

1.3 设置工作簿属性

workbook.creator = "admin";
workbook.lastModifiedBy = "admin";
workbook.created = new Date();
workbook.modified = new Date();

1.4 设置表头

worksheet.columns = [
  { header: 'Id', key: 'id', width: 10 },
  { header: 'Name', key: 'name', width: 32 },
  { header: 'D.O.B.', key: 'DOB', width: 10, outlineLevel: 1 }
];

1.5 添加表格数据

const row = sheet.getRow(1);
  row.eachCell((cell, rowNumber) => {
    sheet.getColumn(rowNumber).alignment = {
      vertical: "middle",
      horizontal: "center",
    };
  });

1.6 导出表格

// 将表格数据转为二进制
workbook.xlsx.writeBuffer().then((buffer) => {
    writeFile(`${execlTitle}.xlsx`, buffer);
});
      
// 将二进制转为Excel并下载
const writeFile = (fileName, content) => {
    let a = document.createElement("a");
    let blob = new Blob([content], { type: "text/plain" });

    a.download = fileName;
    a.href = URL.createObjectURL(blob);

    a.click();
};

2. excel导出组件完整代码

import React, { useState, useEffect } from "react";
import { Button } from "antd";
import "antd/dist/antd.css";
import Excel from "exceljs";

/**
  text?: string // 下载按钮内文字
  icon?: string // 按钮 icon
  size?: string // 按钮尺寸
  type?: string // 按钮类型
  execlTitle?: string // 导出execl文件名
  tableColumns: [] // 表头
  selectedUrl: string // 接口地址url
 */

const TableDownload = ({
  size = "default",
  text = "导出",
  type = "default",
  icon = "download",
  selectedUrl,
  execlTitle = "表格数据",
}) => {
  const [isLoading, setLoading] = useState(false);
  const [tableRows, setTableData] = useState([]);
  const [tableColumns, setTableColumns] = useState([]);

  useEffect(() => {
    setLoading(true);
    fetch(selectedUrl)
      .then((response) => response.json())
      .then(({ data }) => {
        setTableColumns(data && data.columns);
        setTableData(data && data.rows);
        setTimeout(() => {
          setLoading(false);
        }, 2000);
      });
  }, [selectedUrl]);

  // 执行下载表格
  const fetchTableDatas = () => {
    // 初始化 创建工作簿
    const workbook = new Excel.Workbook();
    // 设置工作簿属性
    workbook.creator = "admin";
    workbook.lastModifiedBy = "admin";
    workbook.created = new Date();
    workbook.modified = new Date();

    // 添加工作表
    let sheet = workbook.addWorksheet("sheet");

    let columns = [];
    // 表头格式化
    tableColumns.map((item) => {
      columns.push({
        header: item.title,
        key: item.key || item.dataIndex,
        width: parseInt(item.width / 6, 10) || 40,
      });
      return true;
    });

    // 添加表头
    sheet.columns = columns;

    if (Array.isArray(tableRows)) {
      // 添加表格数据
      sheet.addRows(tableRows);

      // 设置每一列样式 居中
      const row = sheet.getRow(1);
      row.eachCell((cell, rowNumber) => {
        sheet.getColumn(rowNumber).alignment = {
          vertical: "middle",
          horizontal: "center",
        };
      });

      // 将表格数据转为二进制
      workbook.xlsx.writeBuffer().then((buffer) => {
        writeFile(`${execlTitle}.xlsx`, buffer);
      });
    } else {
      alert("下载失败");
    }
  };

  // 将二进制转为Excel并下载
  const writeFile = (fileName, content) => {
    let a = document.createElement("a");
    let blob = new Blob([content], { type: "text/plain" });

    a.download = fileName;
    a.href = URL.createObjectURL(blob);

    a.click();
  };

  return (
    <div style={{ padding: 10, margin: 10, border: "1px solid red" }}>
      <Button
        type={type}
        icon={icon || ""}
        size={size}
        loading={isLoading}
        onClick={fetchTableDatas}
      >
        {isLoading ? "正在导出" : text}
      </Button>
    </div>
  );
};

export default TableDownload;

3. 组件使用

import TableDownload from "./TableDownload";

<TableDownload
  text="导出"
  execlTitle="表格数据"
  selectedUrl="/api/tableData.json"
  icon="download"
/>

其中,接口请求的tableData.json数据为:

{
  "data": {
    "total": 3,
    "columns": [
      {
        "dataIndex": "name",
        "title": "姓名"
      },
      {
        "dataIndex": "age",
        "title": "年龄"
      }
    ],
    "rows": [
      {
        "id": 1,
        "name": "tom",
        "age": "18"
      },
      {
        "id": 2,
        "name": "jim",
        "age": "25"
      },
      {
        "id": 3,
        "name": "tim",
        "age": "25"
      }
    ]
  }
}

posted on   漫思  阅读(7)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2023-02-15 “开源 core-js 也许是我一生中最大的错误”
2023-02-15 如何解决Reporting Services目录数据库文件存在的问题
2023-02-15 怎么处理Reporting Services目录数据库文件存在的问题?
2023-02-15 Redis配置以及通过C#访问小试
2023-02-15 从 Newtonsoft.Json 迁移到 System.Text.Json
2023-02-15 动态Entity Framework查询:Dynamic Query 介绍
2023-02-15 asp.net 开发优秀博客

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示