react中实现导出excel文件

devtools/2024/12/22 17:26:09/

react中实现导出excel文件

  • 一、安装依赖
  • 二、实现导出功能
  • 三、自定义列标题
  • 四、设置列宽度
  • 五、样式优化
    • 1、安装扩展库
    • 2、设置样式
    • 3、扩展样式功能

在 React 项目中实现点击按钮后导出数据为 Excel 文件,可以使用 xlsx 和 file-saver 这两个库。

一、安装依赖

在项目中安装必要的库:

npm install xlsx file-saver
  • xlsx:用于生成 Excel 文件。
  • file-saver:用于触发文件下载。

二、实现导出功能

javascript">import React from 'react';
import * as XLSX from 'xlsx'; // 用于操作 Excel 文件
import { saveAs } from 'file-saver'; // 用于保存文件const ExportExcel = () => {const handleExport = () => {// 示例数据const data = [{ Name: 'John Doe', Age: 28, City: 'New York' },{ Name: 'Jane Smith', Age: 34, City: 'San Francisco' },{ Name: 'Sam Green', Age: 45, City: 'Chicago' },];// 将数据转换为工作表const worksheet = XLSX.utils.json_to_sheet(data);// 创建一个新的工作簿const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 导出为 Blobconst excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });// 使用 FileSaver 保存文件saveAs(blob, 'example.xlsx');};return (<div><button onClick={handleExport}>导出 Excel</button></div>);
};export default ExportExcel;

三、自定义列标题

在使用 xlsx 时,如果需要自定义列标题,可以通过手动创建数据表头,然后将其与数据合并为新的数组,最后生成工作表。

javascript">import React from 'react';
import * as XLSX from 'xlsx'; // 用于操作 Excel 文件
import { saveAs } from 'file-saver'; // 用于保存文件const ExportExcelWithHeaders = () => {const handleExport = () => {// 示例数据const data = [{ name: 'John Doe', age: 28, city: 'New York' },{ name: 'Jane Smith', age: 34, city: 'San Francisco' },{ name: 'Sam Green', age: 45, city: 'Chicago' },];// 自定义列标题const headers = ['Name', 'Age', 'City'];// 数据按自定义顺序排序const formattedData = data.map((item) => [item.name, item.age, item.city]);// 将列标题与数据合并const worksheetData = [headers, ...formattedData];// 创建工作表const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);// 创建工作簿并添加工作表const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 导出为 Blobconst excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });// 使用 FileSaver 保存文件saveAs(blob, 'example_with_headers.xlsx');};return (<div><button onClick={handleExport}>导出带自定义标题的 Excel</button></div>);
};export default ExportExcelWithHeaders;

四、设置列宽度

在 xlsx 中,可以通过设置工作表的 !cols 属性来自定义每一列的宽度。

javascript">import React from 'react';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';const ExportExcelWithColumnWidths = () => {... ...// 创建工作表const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);// 设置列宽worksheet['!cols'] = [{ wch: 15 }, // 第一列宽度:15字符{ wch: 5 },  // 第二列宽度:5字符{ wch: 20 }, // 第三列宽度:20字符];// 创建工作簿并添加工作表const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');... ...};... ...
};export default ExportExcelWithColumnWidths;
  • 列宽与内容长度匹配: 如果列内容长度可能变化,可以动态计算 wch:
javascript">const columnWidths = [{ wch: Math.max(...data.map(item => item.name.length), 10) }, // 动态计算第一列宽度{ wch: 5 },{ wch: Math.max(...data.map(item => item.city.length), 15) },
];
worksheet['!cols'] = columnWidths;
  • 注意事项
    1.如果未设置 !cols,默认列宽会很窄,可能导致数据被截断。
    2.wch 值可以设置为整数或浮点数,决定宽度的字符数。
    3.列宽不会强制影响单元格内容换行。若希望内容换行,需要在单元格内容中加入换行符 \n 并配合样式(需借助 xlsx-style 或其他扩展库)。

五、样式优化

在 xlsx 中,默认的导出样式较为基础。如果需要对 Excel 文件进行样式优化(如字体、颜色、边框、对齐方式等),可以通过扩展库 xlsx-style 或 sheetjs-style 实现。

1、安装扩展库

这是一种扩展版的 xlsx,可以在导出的 Excel 中应用样式

npm install sheetjs-style

2、设置样式

javascript">import React from 'react';
import * as XLSX from 'sheetjs-style'; // 替代 xlsx 库
import { saveAs } from 'file-saver';  // 用于保存文件const ExportExcelWithStyles = () => {const handleExport = () => {// 示例数据const data = [{ name: 'John Doe', age: 28, city: 'New York' },{ name: 'Jane Smith', age: 34, city: 'San Francisco' },{ name: 'Sam Green', age: 45, city: 'Chicago' },];// 自定义列标题const headers = ['Name', 'Age', 'City'];// 格式化数据const formattedData = data.map((item) => [item.name, item.age, item.city]);// 将标题与数据合并const worksheetData = [headers, ...formattedData];// 创建工作表const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);// 设置样式const headerStyle = {font: { bold: true, color: { rgb: 'FFFFFF' } }, // 粗体,白色字体fill: { fgColor: { rgb: '4F81BD' } }, // 蓝色背景alignment: { horizontal: 'center', vertical: 'center' }, // 居中对齐};const bodyStyle = {font: { color: { rgb: '000000' } }, // 黑色字体alignment: { horizontal: 'left', vertical: 'center' }, // 左对齐border: {top: { style: 'thin', color: { rgb: 'CCCCCC' } },bottom: { style: 'thin', color: { rgb: 'CCCCCC' } },left: { style: 'thin', color: { rgb: 'CCCCCC' } },right: { style: 'thin', color: { rgb: 'CCCCCC' } },},};// 使用 XLSX.utils.encode_cell 获取单元格的地址,应用样式到标题行headers.forEach((_, colIndex) => {const cellAddress = XLSX.utils.encode_cell({ r: 0, c: colIndex });//设置单元格样式worksheet[cellAddress].s = headerStyle;});// 应用样式到数据行formattedData.forEach((row, rowIndex) => {row.forEach((_, colIndex) => {const cellAddress = XLSX.utils.encode_cell({ r: rowIndex + 1, c: colIndex });if (worksheet[cellAddress]) {worksheet[cellAddress].s = bodyStyle;}});});// 设置列宽worksheet['!cols'] = [{ wch: 15 }, // 第一列宽度:15字符{ wch: 5 },  // 第二列宽度:5字符{ wch: 20 }, // 第三列宽度:20字符];// 创建工作簿并添加工作表const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Styled Sheet');// 导出为 Blobconst excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });// 使用 FileSaver 保存文件saveAs(blob, 'styled_example.xlsx');};return (<div><button onClick={handleExport}>导出带样式的 Excel</button></div>);
};export default ExportExcelWithStyles;

效果:
在这里插入图片描述

3、扩展样式功能

  • 单元格合并: 使用 worksheet[‘!merges’] 属性:
javascript">worksheet['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, // 合并第1行,第1~第3列
];

语法结构:

javascript">worksheet['!merges'] = [{ s: { r: 起始行, c: 起始列 }, e: { r: 结束行, c: 结束列 } },
];

s:表示合并范围的 起始单元格,包含两个属性:

  1. r:行号,从 0 开始(例如,第 1 行为 0)。
  2. c:列号,从 0 开始(例如,A 列为 0,B 列为 1)。

e:表示合并范围的 结束单元格,包含同样的 r 和 c 属性。

  • 动态样式: 根据数据动态调整单元格样式,例如:
javascript">if (row.age > 30) {worksheet[cellAddress].s = { fill: { fgColor: { rgb: 'FFC7CE' } } }; // 背景变红
}
  • 自动筛选: 设置自动筛选功能(表头下的筛选按钮):
javascript">worksheet['!autofilter'] = { ref: 'A1:C1' }; // 设置 A1:C1 的自动筛选

http://www.ppmy.cn/devtools/144431.html

相关文章

四元数旋转+四元数和向量相乘+音频相关

eulerAngles API rotation.eulerAngles Unity把四元数用欧拉角的形式展现在Inspector面板上&#xff08;0-360&#xff09;,更好理解。 例&#xff1a; Vector3 eulerAnglescube.transform.rotation.eulerAngles; Debug.Log("eulerAngles:"eulerAngles); 四元数…

POI-TL插件开发-表格分组插件

POI-TL版本&#xff1a;1.12.2 改造于&#xff1a;LoopRowTableRenderPolicy 模板设计&#xff1a; 分组之前&#xff1a; 分组之后&#xff1a; 代码实现&#xff1a; public class LoopRowGroupTableRenderPolicy implements RenderPolicy {private String prefix;privat…

免费送源码:Java+ssm++MVC+HTML+CSS+MySQL springboot 社区医院信息管理系统的设计与实现 计算机毕业设计原创定制

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设社区医院信息管理系统…

React与Vue的区别(相同点和不同点)

前言 JavaScript是世界上最流行的语言之一&#xff0c;React和Vue是JS最流行的两个框架。但各有优缺点&#xff0c;本文将详细对比两大框架 一、框架背景 React React是由Facebook开发的用于构建用户界面的JavaScript库&#xff0c;Facebook对市场上JavaScript MVC框架都不太…

Linux设置篇

查看主机名 hostname 修改主机名 hostnamectl set-hostname 主机名 配置ip映射 vi /etc/hosts 192.168.1.10 pure 限制SSH登录的IP a) 设置禁止所有ip连接服务器的SSH vi /etc/hosts.deny sshd:all:deny b) 设置允许指定ip连接服务器的SSH&#xff08;这边建议设置一个备…

【计算机网络】期末考试预习复习|上

作业讲解 物理层作业 共有4个用户进行CDMA通信。这4个用户的码片序列为&#xff1a; A: (–1 –1 –1 1 1 –1 1 1)&#xff1b;B: (–1 –1 1 –1 1 1 1 –1) C: (–1 1 –1 1 1 1 –1 –1)&#xff1b;D: (–1 1 –1 –1 –1 –1 1 –1) 现收到码片序列&#xff1a;(–1 1 –…

linux------vim命令

一、基本模式切换 普通模式&#xff08;Normal Mode&#xff09; 当你打开Vim时&#xff0c;默认进入普通模式。在这个模式下&#xff0c;可以使用各种命令来移动光标、删除文本、复制粘贴等操作。例如&#xff0c;使用h、j、k、l来移动光标。h是向左移动一个字符&#xff0c;j…

React 事件机制和原生 DOM 事件流有什么区别

发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【宝藏入口】。 React 的事件机制与原生 DOM 事件流在设计和实现上有一些显著的区别。了解这些区别有助于我们更好地理解 React 是如何管理事件的…