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

前端导出excel实战(xlsx库和exceljs库)

一. 概览

前端导出excel是比较常见的需求,比如下载excel模板和批量导出excel。目前比较常用的库有xlsx和excel,接下来就着两种方式进行梳理。

二. 下载模板

xlsx库实现:

示例核心代码如下:

const excelColumn = {details: {materialName: '物料名称',applyCount: '请购数量',unit: '单位',unitPrice: '单价',use: '用途',remark: '备注',},};function downloadTemplate(key, name) {const book = utils.book_new();// 实例化一个Sheetconst sheet = utils.json_to_sheet([Object.values(excelColumn[key]).reduce((p: any, c: string) => {p[c] = '';return p;}, {}),],{header: Object.values(excelColumn[key]),},);// 将Sheet写入工作簿utils.book_append_sheet(book, sheet, 'Sheet1');// 写入文件,直接触发浏览器的下载writeFile(book, `${name}.xlsx`);}

代码分析:

 // 实例化一个Sheetconst sheet = utils.json_to_sheet([Object.values(excelColumn[key]).reduce((p: any, c: string) => {p[c] = '';return p;}, {}),],{header: Object.values(excelColumn[key]),},);
  1. utils.json_to_sheet第一个参数是为了得到一个诸如 {物料名称: ‘’ “, 数量: ” “}的数据,通过reduce方法实现对象属性的累加;
  2. header: Object.values(excelColumn[key]): 第二个参数是为了得到的表头的集合,诸如[“物料名称”,"数量”]
 utils.book_append_sheet(book, sheet, 'Sheet1');
  1. sheet1是定义工作簿的名称

exceljs库实现

示例核心代码如下:

 const excelHeadColums = [{header: '物料名称',key: 'materialName',width: 12,},{header: '请购数量',key: 'applyCount',width: 14,},{header: '单位',key: 'unit',width: 14,}];const downLoadTemp = () => {// 创建工作簿const workbook = new ExcelJS.Workbook();// 添加工作表const sheet1 = workbook.addWorksheet('sheet1');sheet1.columns = excelHeadColums;data.value.details.forEach((item) => {sheet1.addRow(item);});// 导出表格workbook.xlsx.writeBuffer().then((buffer) => {let _file = new Blob([buffer], {type: 'application/octet-stream',});FileSaver.saveAs(_file, '模板.xlsx');});};

代码分析:
原理基本同xlsx,只不过相比之下,exceljs库更为强大,可以自定义导出的excel的样式

三. 批量导出

xlsx库:


function exportExcel<T>(name: string,key: string,colFn?: (d: T) => Record<string, any>,{format,}: {format?: (d: T, c: string) => string;} = {},) {const book = utils.book_new();const tableData = data.value![key].map((d) =>colFn? colFn(d): (Object.keys(excelColumn[key]).reduce((p, c) => {p[excelColumn[key][c]] = format ? format(d, c) : d[c];return p;}, {}) as any),);const sheet = utils.json_to_sheet(tableData, {header: Object.keys(tableData[0]),});utils.book_append_sheet(book, sheet, 'Sheet1');writeFile(book, `${name}.xlsx`);}

exceljs库:

const exportReturnData = (hkDetails) => {// 创建工作簿const workbook = new ExcelJS.Workbook();// 添加工作表const sheet1 = workbook.addWorksheet('sheet1');sheet1.columns = receiptTableHeadColums;const hkColumsData = hkDetails;hkColumsData.forEach((item) => {sheet1.addRow(item);});// 设置表头样式const titleCell = sheet1.getRow(1);// 设置第一行的高度titleCell.height = 30;// 设置第一行的字体样式titleCell.font = {bold: true,};// 设置第一行文字对齐方式titleCell.alignment = {vertical: 'middle',horizontal: 'center',};// 设置第一行单元格的背景色titleCell.fill = {type: 'pattern',pattern: 'solid',fgColor: {argb: 'FFDFEAFC',},};// 导出表格workbook.xlsx.writeBuffer().then((buffer) => {let _file = new Blob([buffer], {type: 'application/octet-stream',});FileSaver.saveAs(_file, '数据表.xlsx');});
}; 

代码分析:

  1. 原理基本同下载模板,另附exceljs库样式调整的基本应用。

四. excel库的其它基本使用

excel库除了设置单元格样式外,另外常见的使用有设置单元格下拉框,限制某个单元格不可编辑等

1. 设置下拉框

核心代码

const sheet1 = workbook.addWorksheet('sheet1');
for (let i = 2; i < totalExcelLength + 1; i++) {sheet1.getCell(`M${i}`).dataValidation = {type: 'list',allowBlank: true,formulae: [`"中标,流标"`],};sheet1.getCell(`N${i}`).dataValidation = {type: 'list',allowBlank: true,formulae: [`"最高价,最低价"`],};}

2. 限制某个单元格不可编辑
核心代码

sheet1.protect('yourpassword', {selectLockedCells: true,selectUnlockedCells: true,});//解锁可编辑列const unlockColumns = isInitProcess ? [9, 10, 11] : [13, 14];unlockColumns.forEach((columnIndex) => {sheet1.getColumn(columnIndex).eachCell((cell, rowNumer) => {if (rowNumer !== 1) {// 跳过标题行cell.protection = { locked: false };}});});

另外还有exceljs还有其它很多强大的功能,在这就不一一举例。

五. 参考文章

这一定是前端导出Excel界的天花板
exceljs使用文档

相关文章:

前端导出excel实战(xlsx库和exceljs库)

一. 概览 前端导出excel是比较常见的需求&#xff0c;比如下载excel模板和批量导出excel。目前比较常用的库有xlsx和excel&#xff0c;接下来就着两种方式进行梳理。 二. 下载模板 xlsx库实现&#xff1a; 示例核心代码如下&#xff1a; const excelColumn {details: {ma…...

【附源码】基于环信鸿蒙IM SDK实现一个聊天Demo

项目背景 本项目基于环信IM 鸿蒙SDK 打造的鸿蒙IM Demo&#xff0c;完全适配HarmonyOS NEXT系统&#xff0c;实现了发送消息&#xff0c;添加好友等基础功能。代码开源&#xff0c;功能简洁&#xff0c;如果您有类似开发需求可以参考。 源码地址&#xff1a;https://github.c…...

Python库常用函数-数据分析

Python库常用函数 1.pandas库 &#xff08;1&#xff09;数据读取与写入 读取 CSV 文件&#xff1a; data pd.read_csv(file.csv)读取 Excel 文件&#xff1a; data pd.read_excel(file.xlsx, sheet_nameSheet1)写入 CSV 文件&#xff1a; data.to_csv(new_file.csv, ind…...

汽车EEA架构:架构的简介

1.架构的定义 汽车领域谈论的架构一词&#xff0c;来源于英文单词Architecture。在《系统架构:复杂系统的产品设计与开发》一书中对架构的定义如下:系统架构是一种概念的具象化&#xff0c;是物理或信息功能到形式元素的分配&#xff0c;是系统之内的元素之间的关系与周边环境…...

渗透测试--数据库攻击

这篇文章瘾小生其实想了很久&#xff0c;到底是放在何处&#xff0c;最终还是想着单拎出来总结&#xff0c;因为数据库攻击对我们而言非常重要&#xff0c;而且内容众多。本篇文章将讲述在各位获取数据库权限的情况下&#xff0c;各个数据库会被如何滥用&#xff0c;以及能够滥…...

反向路径转发(RPF)

本文介绍了反向路径转发&#xff08;RPF&#xff09;是如何在FortiGate上实现的。 它还解释了特定于VDOM的CLI设置“config system settings -> set strict-src-check”如何修改RPF行为。 测试场景中使用了以下设置 反向路径过滤器&#xff08;又名RPF&#xff09;是一种安…...

Python 正则表达式常用特殊字符及其含义

以下是 Python 正则表达式常用特殊字符及其含义 的全面整理&#xff0c;涵盖了常见和重要的正则符号&#xff0c;以及它们的示例&#xff0c;适合用来写博客或学习使用&#xff1a; Python 正则表达式常用特殊字符及其含义 1. . (点号) 含义&#xff1a;匹配除换行符 \n 以外…...

Uniapp Android SpringBoot3 对接支付宝支付(最新教程附源码)

Uniapp Android SpringBoot3 对接支付宝支付&#xff08;最新教程附源码&#xff09; 1、效果展示2、后端实现2.1 引入支付宝SDK依赖 pom.xml2.2 配置 application.yml2.3 支付宝相关代码2.3.1 AlipayConfig.java2.3.2 ZfbPayConfig.java2.3.3 支付接口2.3.4 支付回调处理接口&…...

SQL DML 语句

CREATE TABLE classes (ClassID varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT 班级ID,ClassName varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT 班级名称,TeacherID varchar(20) CHARACTER SET utf8mb4…...

饲料颗粒机全套设备有哪些机器组成

颗粒饲料机主要用于将各种饲料原料&#xff08;如玉米、豆粕、麦麸、鱼粉等&#xff09;进行混合、压制&#xff0c;制成颗粒状的饲料。这种饲料不仅方便储存和运输&#xff0c;还能提高动物的采食效率和饲料利用率。同时&#xff0c;颗粒饲料在加工过程中能灭部分微生物和寄生…...

MySQL事务与锁

定义一个事务向d_eams数据库的student表中插入3条记录&#xff0c;并检验若插入相同的学号&#xff0c;则回滚事务&#xff0c;既插入无效&#xff0c;否则成功提交 delimiter $$ create procedure tr_proc() begindeclare continue handler for sqlstate 23000beginrollback;…...

汽车免拆案例 | 2007款宝马650i车发动机偶尔无法起动

故障现象 一辆2007款宝马650i车&#xff0c;搭载N62B48B发动机&#xff0c;累计行驶里程约为26万km。车主反映&#xff0c;发动机偶尔无法起动&#xff0c;故障频率较低&#xff0c;十几天出现1 次&#xff0c;且故障出现时起动机不工作。 故障诊断  接车后试车&#xff0c;…...

PostgreSQL和Oracle的sql差异

PostgreSQL和Oracle的sql差异 1.rownum &#xff08;1&#xff09;Oracle分页查询使用rownum&#xff0c;PostgreSQL使用limit offset ORACLEPOSTGRESQLselect * from (select rownum r,e.* from emp e where rownum <5) t where r>0;select * from emp limit 5 offset…...

SpringMvc完整知识点二(完结)

SpringMVC获取请求参数 环境准备工作等均省略&#xff0c;可详见快速入门&#xff0c;此处只写非共有部分代码 该部分示例项目SpringMvcThree已上传至Gitee&#xff0c;可自行下载 客户端请求参数的格式为&#xff1a;namevalue&passwordvalue... ... 服务端想要获取请求…...

29 - Java Serializable 序列化

Java的Serializable接口是Java序列化机制的核心&#xff0c;它允许一个对象的状态被转换为字节流&#xff0c;从而可以方便地进行存储或传输。 序列化后的对象可以被写到数据库、存储到文件系统&#xff0c;或者通过网络传输。 要在 Java 中使一个类可序列化&#xff0c;你需要…...

59 基于STM32的烟雾、红外、温湿度检测

所有仿真详情导航: PROTEUS专栏说明-CSDN博客 目录 一、主要功能 二、硬件资源 三、主程序编程 四、资源下载 一、主要功能 基于SMT32F103C8T6单片机,采用DHT11检测温湿度,采用光敏电阻检测光照,采用滑动变阻器分别模拟红外、烟雾,通过OLED显示屏显示,如果湿度过低…...

使用Excel 对S型曲线加减速算法进行仿真

项目场景&#xff1a; 项目场景&#xff1a;代码中写了S型加减速算法&#xff0c;相查看生成的加减速数组&#xff0c;直观的展示出来&#xff0c;USB通信一次64字节&#xff0c;对于我几个个32位的频率值不太方便&#xff0c;于是采用Excel进行仿真。 代码中如何生成S加减速曲…...

flink-connector-mysql-cdc:01 mysql-cdc础配置代码演示

flink-connector-mysql-cdc&#xff1a; 01 mysql-cdc基础配置代码演示02 mysql-cdc高级扩展03 mysql-cdc常见问题汇总04 mysql-cdc-kafka生产级代码分享05 flink-kafka-doris生产级代码分享06 flink-kafka-hudi生产级代码分享 flink-cdc版本&#xff1a;3.2.0 flink版本&…...

java计算机毕设课设—进销存管理系统(附源码、文章、相关截图、部署视频)

这是什么系统&#xff1f; 资源获取方式再最下方 java计算机毕设课设—进销存管理系统(附源码、文章、相关截图、部署视频) 一、项目简介 项目名称&#xff1a; 基于Java的进销存管理系统 开发背景&#xff1a; 在现代企业管理中&#xff0c;库存管理是核心环节之一&#…...

鸿蒙UI开发——渐变色效果

1、概 述 ArkTs可以通过颜色渐变接口&#xff0c;设置组件的背景颜色渐变效果&#xff0c;实现在两个或多个指定的颜色之间进行平稳的过渡。 目前提供三种渐变类型&#xff1a;线性渐变、角度渐变、径向渐变。 我们在鸿蒙UI布局实战 —— 个人中心页面开发中&#xff0c;默认…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...