当前位置: 首页 > news >正文

react中实现导出excel文件

react中实现导出excel文件

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

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

一、安装依赖

在项目中安装必要的库:

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

二、实现导出功能

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 时,如果需要自定义列标题,可以通过手动创建数据表头,然后将其与数据合并为新的数组,最后生成工作表。

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 属性来自定义每一列的宽度。

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:
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、设置样式

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’] 属性:
worksheet['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, // 合并第1行,第1~第3列
];

语法结构:

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

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

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

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

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

相关文章:

react中实现导出excel文件

react中实现导出excel文件 一、安装依赖二、实现导出功能三、自定义列标题四、设置列宽度五、样式优化1、安装扩展库2、设置样式3、扩展样式功能 在 React 项目中实现点击按钮后导出数据为 Excel 文件&#xff0c;可以使用 xlsx 和 file-saver 这两个库。 一、安装依赖 在项目…...

有监督学习 vs 无监督学习:机器学习的两大支柱

有监督学习 vs 无监督学习&#xff1a;机器学习的两大支柱 有监督学习 vs 无监督学习&#xff1a;机器学习的两大支柱一、有无“老师”来指导二、解决的问题类型不同三、模型的输出不同 有监督学习 vs 无监督学习&#xff1a;机器学习的两大支柱 在机器学习的奇妙世界里&#…...

c4d动画怎么导出mp4视频,c4d动画视频格式设置

宝子们&#xff0c;今天来给大家讲讲 C4D 咋导出mp4视频的方法。通过用图文教程的形式给大家展示得明明白白的&#xff0c;让你能轻松理解和掌握&#xff0c;不管是理论基础&#xff0c;还是实际操作和技能技巧&#xff0c;都能学到&#xff0c;快速入门然后提升自己哦。 c4d动…...

差分矩阵(Difference Matrix)与累计和矩阵(Running Sum Matrix)的概念与应用:中英双语

本文是学习这本书的笔记: https://web.stanford.edu/~boyd/vmls/ 差分矩阵&#xff08;Difference Matrix&#xff09;与累计和矩阵&#xff08;Running Sum Matrix&#xff09;的概念与应用 在线性代数和信号处理等领域中&#xff0c;矩阵运算常被用来表示和计算各种数据变换…...

全面解析 Golang Gin 框架

1. 引言 在现代 Web 开发中&#xff0c;随着需求日益增加&#xff0c;开发者需要选择合适的工具来高效地构建应用程序。对于 Go 语言&#xff08;Golang&#xff09;开发者来说&#xff0c;Gin 是一个备受青睐的 Web 框架。它轻量、性能高、易于使用&#xff0c;并且具备丰富的…...

全脐点曲面当且仅当平面或者球面的一部分

S 是全脐点曲面当且仅当 S 是平面或者球面的一部分。 S_\text{ 是全脐点曲面当且仅当 }{S_\text{ 是平面或者球面的一部分。}} S 是全脐点曲面当且仅当 ​S 是平面或者球面的一部分。​ 证&#xff1a; 充分性显然&#xff0c;下证必要性。 若 r ( u , v ) r(u,v) r(u,v)是…...

CSS学习记录18

CSS渐变 CSS渐变您可以显示两种或多种指定颜色之间的平滑过渡。 CSS定义了两种渐变类型&#xff1a; 线性渐变&#xff08;向下/向上/向左/向右/对角线&#xff09;径向渐变&#xff08;由其中心定义&#xff09; CSS线性渐变 如需创建线性渐变&#xff0c;您必须至少两个色…...

实验13 C语言连接和操作MySQL数据库

一、安装MySQL 1、使用包管理器安装MySQL sudo apt update sudo apt install mysql-server2、启动MySQL服务&#xff1a; sudo systemctl start mysql3、检查MySQL服务状态&#xff1a; sudo systemctl status mysql二、安装MySQL开发库 sudo apt-get install libmysqlcli…...

90度Floating B to B 高速连接器信号完整性仿真

在180度 B to B Connector 信号完整性仿真时&#xff0c;不会碰到端口设置不方便问题&#xff0c;但在做90度B to B Connector信号完整性仿真时就会碰到端口设置问题。如下面的90度B to B Connector。 公座 母座 公母对插后如下&#xff1a; 客户要求改Connector需符合PCI-E3.…...

【踩坑】Pytorch与CUDA版本的关系及安装

Pytorch、CUDA和CUDA Toolkit区分 查看当前环境常用shell命令python脚本 Driver API CUDA&#xff08;nvidia-smi&#xff09;Runtime API CUDA&#xff08;nvcc --version&#xff09;pytorch选择CUDA版本的顺序安装需要的CUDA&#xff0c;多版本共存和自由切换 本文参考 http…...

信息隐藏 数字图像空域隐写与分析技术的实现

数字图像隐写与分析 摘要 随着信息技术的发展,隐写术作为一种信息隐藏技术,越来越受到关注。本文介绍了一种基于最低有效位(LSB)方法的数字图像隐写技术,并实现了隐写数据的嵌入与提取。通过卡方检验分析隐写图像的统计特性,评估隐写数据对图像的影响。实验结果表明,该…...

halcon单相机+机器人*眼在手外标定心得

目的 得到相机坐标系下的点与机器人底座base的转换关系&#xff0c;camera_in_base 两个不确定的定量 1&#xff0c;相机与机器人底座base之间的相对位置是固定的&#xff0c;既camera_in_base 2&#xff0c;机械手末端与标定物 tool_in_obj是固定的 辅助确定量 工作台与相…...

pytest入门十:配置文件

pytest.ini&#xff1a;pytest的主配置文件&#xff0c;可以改变pytest的默认行为conftest.py&#xff1a;测试用例的一些fixture配置 pytest.ini marks mark 打标的执行 pytest.mark.add add需要些marks配置否则报warning [pytest] markersadd:测试打标 测试用例中添加了 p…...

基于Clinical BERT的医疗知识图谱自动化构建方法,双层对比框架

基于Clinical BERT的医疗知识图谱自动化构建方法&#xff0c;双层对比框架 论文大纲理解1. 确认目标2. 目标-手段分析3. 实现步骤4. 金手指分析 全流程核心模式核心模式提取压缩后的系统描述核心创新点 数据分析第一步&#xff1a;数据收集第二步&#xff1a;规律挖掘第三步&am…...

介绍 Html 和 Html 5 的关系与区别

HTML&#xff08;HyperText Markup Language&#xff09;是构建网页的标准标记语言&#xff0c;而 HTML5 是 HTML 的最新版本&#xff0c;包含了一些新的功能、元素、API 和属性。HTML5 相对于早期版本的 HTML&#xff08;比如 HTML4&#xff09;有许多重要的改进和变化。以下是…...

C05S13-MySQL数据库备份与恢复

一、MySQL数据备份 1. 数据备份概述 数据备份的主要目的是灾难恢复&#xff0c;也就是当数据库等出现故障导致数据丢失&#xff0c;能够通过备份恢复数据。 数据备份可以分为物理备份和逻辑备份。物理备份&#xff0c;又称为冷备份&#xff0c;需要关闭数据库进行备份&#…...

【MySQL — 数据库基础】深入理解数据库服务与数据库关系、MySQL连接创建、客户端工具及架构解析

目录 1. 数据库服务&#xff06;数据库&#xff06;表之间的关系 1.1 复习 my.ini 1.2 MYSQL服务基于mysqld启动而启动 1.3 数据库服务的具体含义 1.4 数据库服务&数据库&表之间的关系 2. 客户端工具 2.1 客户端连接MySQL服务器 2.2 客…...

Three.js相机Camera控件知识梳理

原文&#xff1a;https://juejin.cn/post/7231089453695238204?searchId20241217193043D32C9115C2057FE3AD64 1. 相机类型 Three.js 主要提供了两种类型的相机&#xff1a;正交相机&#xff08;OrthographicCamera&#xff09;和透视相机&#xff08;PerspectiveCamera&…...

Unity 开发Apple Vision Pro空间锚点应用Spatial Anchor

空间锚点具有多方面的作用 虚拟物体定位与固定&#xff1a; 位置保持&#xff1a;可以把虚拟物体固定在现实世界中的特定区域或位置。即使使用者退出程序后再次打开&#xff0c;之前锚定过的虚拟物体仍然能够出现在之前所锚定的位置&#xff0c;为用户提供连贯的体验。比如在一…...

BGP的六种状态分别是什么?

此文章主要简单介绍下BGP的六种状态 1.Idle BGP会话的初始状态&#xff0c;路由器在此状态下不与任何BGP邻居通信&#xff0c;通常标识会话还没有开始或由于错误而未能启动&#xff0c;一般来说&#xff0c;缺乏去往BGP对等体的路由是导致BGP路由器其状态一直处于idle状态的常…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...