【纯前端excel导出】vue2纯前端导出excel，使用xlsx插件，修改样式、合并单元格

官网：

1、xlsx-js-style xlsx-js-style | xlsx-js-style homepage

2、xlsx SheetJS 中文网

一、使用第三方插件

1、安装

npm install xlsx-js-style

2、引入

import xlsx from 'xlsx-js-style'

xlsx插件是基础的导出，不可以修改样式，直接xlsx-style插件式修改样式的，所以这里直接用二者合体插件即可

二、页面使用

1、数据源

[{"rectifyPresideName": "朱佳佳","accepUser": "张红艳","rectifyCompleteTime": "2024-09-27 10:17:43","checkTableType": "重点时段及节假日前排查","rectifyTerm": "2024-09-27 23:59:59","rectifyDeptName": "炭黑厂炭黑车间","rectifyPlan": "建立使用记录","faultName": "岗位急救箱无使用记录","createDate": "2024年09月27日"},{"rectifyPresideName": "崔国梁","accepUser": "崔国梁","rectifyCompleteTime": "2024-09-26 17:13:05","checkTableType": "重点时段及节假日前排查","rectifyTerm": "2024-09-26 23:59:59","rectifyDeptName": "焦化厂第三干熄焦车间","rectifyPlan": "更换或检查修复","faultName": "疏散指示灯不亮","createDate": "2024年09月26日"},{"rectifyPresideName": "贾成成","accepUser": "贾成成","rectifyCompleteTime": "2024-09-26 17:23:12","checkTableType": "重点时段及节假日前排查","rectifyTerm": "2024-09-26 23:59:59","rectifyDeptName": "甲醇厂公辅车间","rectifyPlan": "安排岗位人员更换消防抢","faultName": "消防水枪损坏","createDate": "2024年09月26日"},{"rectifyPresideName": "王小娟","accepUser": "李学红","rectifyCompleteTime": "2024-09-25 16:50:45","checkTableType": "重点时段及节假日前排查","rectifyTerm": "2024-09-25 23:59:59","rectifyDeptName": "苯精制厂","rectifyPlan": "安装阀门","faultName": "萃取塔回流罐液位计排污阀为单阀","createDate": "2024年09月24日"}
]

2、将数据源转成需要的二维数组

const data = res.data.data.map((ele, i) => （{xuhao: i + 1,faultName: ele.faultName,createDate: ele.createDate,checkTableType: ele.checkTableType,rectifyPlan: ele.rectifyPlan,rectifyDeptName: ele.rectifyDeptName,rectifyPresideName: ele.rectifyPresideName,rectifyTerm: ele.rectifyTerm,rectifyCompleteTime: ele.rectifyCompleteTime,accepUser: ele.accepUser,
}))
const body = data.map((x) => [x.xuhao,x.faultName,x.createDate,x.checkTableType,x.rectifyPlan,x.rectifyDeptName,x.rectifyPresideName,x.rectifyTerm,x.rectifyCompleteTime,x.accepUser,])// 转换后的二维数据
[[1,"岗位急救箱无使用记录","2024年09月27日","重点时段及节假日前排查","建立使用记录","炭黑厂炭黑车间","朱佳佳","2024-09-27 23:59:59","2024-09-27 10:17:43","张红艳"],[2,"疏散指示灯不亮","2024年09月26日","重点时段及节假日前排查","更换或检查修复","焦化厂第三干熄焦车间","崔国梁","2024-09-26 23:59:59","2024-09-26 17:13:05","崔国梁"],[3,"消防水枪损坏","2024年09月26日","重点时段及节假日前排查","安排岗位人员更换消防抢","甲醇厂公辅车间","贾成成","2024-09-26 23:59:59","2024-09-26 17:23:12","贾成成"],[4,"萃取塔回流罐液位计排污阀为单阀","2024年09月24日","重点时段及节假日前排查","安装阀门","苯精制厂","王小娟","2024-09-25 23:59:59","2024-09-25 16:50:45","李学红"]
]

3、定义表头

// 定义Excel表头const header = [['隐患排查治理台账'],['序号','问题点','检查时间','检查类别','整改措施','责任单位','责任人','整改时间','','验收人',],['', '', '', '', '', '', '', '计划完成时间', '实际完成时间', ''],]

4、将定义好的表头添加到 body 中

body.unshift(...header)

5、创建虚拟的 workbook

const workbook = xlsx.utils.book_new()

6、aoa_to_sheet 将二维数组转成 sheet

先写到这儿，明天再写，下班，886~

继续-----------

const sheet = xlsx.utils.aoa_to_sheet(body)
// aoa_to_sheet  	是将【一个二维数组】转化成 sheet
// json_to_sheet 	是将【由对象组成的数组】转化成sheet
// table_to_sheet  	是将【table的dom】直接转成sheet

7、!merges 单元格合并

①【根据实际情况合并，我这只是处理了表头】

 const merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 9 } },// 第0行第0列开始 —— 第0列到第9列结束（按数组的index方式计算，excel表第一列就是0开始计算）{ s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },{ s: { r: 1, c: 1 }, e: { r: 2, c: 1 } },{ s: { r: 1, c: 2 }, e: { r: 2, c: 2 } },{ s: { r: 1, c: 3 }, e: { r: 2, c: 3 } },{ s: { r: 1, c: 4 }, e: { r: 2, c: 4 } },{ s: { r: 1, c: 5 }, e: { r: 2, c: 5 } },{ s: { r: 1, c: 6 }, e: { r: 2, c: 6 } },{ s: { r: 1, c: 7 }, e: { r: 1, c: 8 } },{ s: { r: 1, c: 9 }, e: { r: 2, c: 9 } },]s:是开始的意思   r代表第几行  c代表第几列
e:是结束的意思   r代表第几行  c代表第几列sheet['!merges'] = merges; // 添加到sheet中

②【这里处理单元格内容，后端对数据进行了排序，本项目需求就是合并三个，那我就要动态将数据一样的进行合并单元格】

 // 合并单元格的函数function addMerges(startRow, endRow, col) {if (startRow < endRow) {merges.push({s: { r: startRow, c: col },e: { r: endRow, c: col },})}}
// 动态合并相同内容的单元格的函数function mergeDynamicCells(colIndex) {let startRow = 3 // 这是单元格内容起始行for (let i = 4; i < body.length; i++) {if (body[i][colIndex] !== body[startRow][colIndex]) {addMerges(startRow, i - 1, colIndex) // 合并相同内容的单元格startRow = i // 更新起始行}}addMerges(startRow, body.length - 1, colIndex) // 合并最后一段相同内容}
// 只对第2列和第5列进行动态合并mergeDynamicCells(2) // 合并 2 列mergeDynamicCells(3) // 合并 3 列mergeDynamicCells(5) // 合并 5 列

 8、!cols 设置列宽

const cols = [{ wch: 10 },{ wch: 30 },{ wch: 25 },{ wch: 30 },{ wch: 30 },{ wch: 25 },{ wch: 15 },{ wch: 25 },{ wch: 25 },{ wch: 15 },]
sheet['!cols'] = cols; // 添加到sheet中

9、!rows 设置行高

 const rows = [{ hpx: 30 }, { hpx: 30 }, { hpx: 30 }]sheet['!rows'] = rows // 行高添加到sheet中

10、样式添加-内容垂直居中

   let range = xlsx.utils.decode_range(sheet['!ref']);  let headerStyle = {  font: { sz: 14, name: '宋体', bold: true },  alignment: { vertical: 'center', horizontal: 'center' }  };  let defaultStyle = {  font: { sz: 11, name: '宋体' },  alignment: { wrapText: 1, vertical: 'center', horizontal: 'center' }  // wrapText: 1-------自动换行};  for (var row = range.s.r; row <= range.e.r; ++row) {  for (let col = range.s.c; col <= range.e.c; ++col) {  let cellAddress = xlsx.utils.encode_cell({ r: row, c: col });  let cell = sheet[cellAddress];  if (cell) {  if (!cell.s) cell.s = {};  // 处理表头  if (cell.v === '隐患排查治理台账') {  cell.s = headerStyle;  } else {  cell.s = defaultStyle;  }  }  }  }

11、向workbook中添加sheet

 xlsx.utils.book_append_sheet(workbook, sheet, this.compname || 'Sheet')

12、导出

 xlsx.writeFile(workbook, (this.compname || 'Data') + '.xlsx', {type: 'binary',})

三、完整代码

expeortexcel(ids) {exportCheckTableFault(ids).then((res) => {const data = res.data.data.map((ele, i) => ({xuhao: i + 1,faultName: ele.faultName,createDate: ele.createDate,checkTableType: ele.checkTableType,rectifyPlan: ele.rectifyPlan,rectifyDeptName: ele.rectifyDeptName,rectifyPresideName: ele.rectifyPresideName,rectifyTerm: ele.rectifyTerm,rectifyCompleteTime: ele.rectifyCompleteTime,accepUser: ele.accepUser,}))const body = data.map((x) => [x.xuhao,x.faultName,x.createDate,x.checkTableType,x.rectifyPlan,x.rectifyDeptName,x.rectifyPresideName,x.rectifyTerm,x.rectifyCompleteTime,x.accepUser,])// 定义Excel表头const header = [['隐患排查治理台账'],['序号','问题点','检查时间','检查类别','整改措施','责任单位','责任人','整改时间','','验收人',],['', '', '', '', '', '', '', '计划完成时间', '实际完成时间', ''],]body.unshift(...header) // 将定义好的表头添加到 body 中const sheet = xlsx.utils.aoa_to_sheet(body) // aoa_to_sheet 将二维数组转成 sheet// 合并单元格的函数const merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 9 } },{ s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },{ s: { r: 1, c: 1 }, e: { r: 2, c: 1 } },{ s: { r: 1, c: 2 }, e: { r: 2, c: 2 } },{ s: { r: 1, c: 3 }, e: { r: 2, c: 3 } },{ s: { r: 1, c: 4 }, e: { r: 2, c: 4 } },{ s: { r: 1, c: 5 }, e: { r: 2, c: 5 } },{ s: { r: 1, c: 6 }, e: { r: 2, c: 6 } },{ s: { r: 1, c: 7 }, e: { r: 1, c: 8 } },{ s: { r: 1, c: 9 }, e: { r: 2, c: 9 } },]function addMerges(startRow, endRow, col) {if (startRow < endRow) {merges.push({s: { r: startRow, c: col },e: { r: endRow, c: col },})}}// 动态合并相同内容的单元格的函数function mergeDynamicCells(colIndex) {let startRow = 3 // 数据部分从第4行开始for (let i = 4; i < body.length; i++) {if (body[i][colIndex] !== body[startRow][colIndex]) {addMerges(startRow, i - 1, colIndex) // 合并相同内容的单元格startRow = i // 更新起始行}}addMerges(startRow, body.length - 1, colIndex) // 合并最后一段相同内容}// 只对第2列和第5列进行动态合并mergeDynamicCells(2) // 合并 2 列mergeDynamicCells(3) // 合并 3 列mergeDynamicCells(5) // 合并 5 列sheet['!merges'] = merges // 将合并信息添加到 sheet 中const cols = [{ wch: 10 },{ wch: 30 },{ wch: 25 },{ wch: 30 },{ wch: 30 },{ wch: 25 },{ wch: 15 },{ wch: 25 },{ wch: 25 },{ wch: 15 },]sheet['!cols'] = cols // 设置列宽const rows = [{ hpx: 30 }, { hpx: 30 }, { hpx: 30 }]sheet['!rows'] = rows // 设置行高// 合并居中表格内容var range = xlsx.utils.decode_range(sheet['!ref'])for (var R = range.s.r; R <= range.e.r; ++R) {for (var C = range.s.c; C <= range.e.c; ++C) {var cell_ref = xlsx.utils.encode_cell({ r: R, c: C })var cell = sheet[cell_ref]if (cell) {if (!cell.s) cell.s = {}if (cell.v == '隐患排查治理台账') {cell.s = {font: {sz: 14,name: '宋体',bold: true,},alignment: {vertical: 'center', // 垂直居中horizontal: 'center', // 水平居中},}} else {cell.s = {font: {sz: 11,name: '宋体',},alignment: {wrapText: 1, //自动换行vertical: 'center', // 垂直居中horizontal: 'center', // 水平居中},}}}}}const workbook = xlsx.utils.book_new()
xlsx.utils.book_append_sheet(workbook, sheet, this.compname || 'Sheet') // 向workbook中添加sheet
xlsx.writeFile(workbook, (this.compname || 'Data') + '.xlsx', {type: 'binary',}) // 导出 workbook})},

借鉴：前端使用xlsx-js-style导出Excel文件并修饰单元格样式-CSDN博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/455130.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

文通车牌识别相机在工地称重应用中的卓越表现

文通车牌识别相机在工地称重应用中的卓越表现

在现代工地管理中&#xff0c;高效、准确的称重系统是确保工程顺利进行的关键之一。而文通车牌识别相机的出现&#xff0c;为工地称重应用带来了全新的解决方案。 一、工地称重面临的挑战 传统的工地称重方式往往存在着一些问题。人工记录车牌和重量信息容易出现错误&#xff0…
阅读更多...
python-----函数详解（一）

python-----函数详解（一）

一、概念及作用&#xff1a; 概念&#xff1a;由若干条语句组成语句块&#xff0c;其中包括函数名称、参数列表&#xff0c;它是组织代码的最小单元&#xff0c;完成一定的功能 作用&#xff1a;把一个代码封装成一个函数&#xff0c;一般按功能组织一段代码 目的就是为了重…
阅读更多...
基于单片机的智能小区门禁系统设计（论文+源码）

基于单片机的智能小区门禁系统设计（论文+源码）

1总体架构 智能小区门禁系统以STM32单片机和WiFi技术为核心&#xff0c;STM32单片机作为主控单元&#xff0c;通过WiFi模块实现与手机APP的连接&#xff0c;构建整个门禁系统。系统硬件包括RFID模块、指纹识别模块、显示屏、按键以及继电器。通过RFID绑定IC卡、APP面部识别、指…
阅读更多...
百度搜索推广和信息流推广的区别，分别适用于什么场景！

百度搜索推广和信息流推广的区别，分别适用于什么场景！

信息流推广和搜索广告&#xff0c;不仅仅是百度&#xff0c;是很多平台的两个核心推广方式。 1、搜索广告&#xff1a; 就是基于用户的搜索习惯&#xff0c;更多是用户有疑问、还有用户当下就要做出行动的广告。 比如上门服务、线上咨询服务、招商加盟、了解产品各种型号和信…
阅读更多...
STM32G4系列MCU的低功耗模式介绍

STM32G4系列MCU的低功耗模式介绍

目录 概述 1 认识低功耗模式 1.1 低功耗模式的应用 1.2 低功耗模式介绍 2 低功耗模式的状态关系 2.1 低功耗模式可能的转换状态图 2.2 低功耗模式总结 3 运行模式 3.1 减慢系统时钟 3.2 外围时钟门控 3.3 低功耗运行模式&#xff08;LP运行&#xff09; 概述 本文主…
阅读更多...
react 基础学习笔记

react 基础学习笔记

1.react 语法 ①数据渲染 函数组件将HTML结构直接写在函数的返回值中 JSX只能有一个根元素 JSX插值写法 插值可以使用的位置 1.标签内容&#xff1b; 2.标签属性 JSX 条件渲染&#xff1a;三目运算符&#xff1b; JSX根据数据进行列表渲染&#xff1a;map()方法&#x…
阅读更多...
QT 机器视觉 1.相机类型

QT 机器视觉 1.相机类型

本专栏从实际需求场景出发详细还原、分别介绍大型工业化场景、专业实验室场景、自动化生产线场景、各种视觉检测物体场景介绍本专栏应用场景 更适合涉及到视觉相关工作者、包括但不限于一线操作人员、现场实施人员、项目相关维护人员&#xff0c;希望了解2D、3D相机视觉相关操作…
阅读更多...
微服务与多租户详解：架构设计与实现

微服务与多租户详解：架构设计与实现

引言 在现代软件开发领域&#xff0c;微服务架构和多租户架构是两个重要的概念。微服务架构通过将应用程序拆分为多个独立的服务&#xff0c;提升了系统的灵活性和可维护性。而多租户架构则通过共享资源来服务多个客户&#xff0c;提高了资源利用率和系统的经济性。 一、微服务…
阅读更多...
OpenCV的常用与形状形状描述相关函数及用法示例

OpenCV的常用与形状形状描述相关函数及用法示例

OpenCV提供了提供了多种用于形状描述和分析的函数。这些函数能够帮助你提取图像中的形状特征&#xff0c;进行形状匹配、识别和分析。下面介绍一些常用的形状描述函数&#xff1a; 轮廓检测函数findContours() findContours()函数用于在二值图像中查找轮廓。有两个原型函数&…
阅读更多...
【zlm】 webrtc源码讲解（二）

【zlm】 webrtc源码讲解（二）

目录 webrtc播放 MultiMediaSourceMuxer里的_ring webrtc播放 > MediaServer.exe!mediakit::WebRtcPlayer::onStartWebRTC() 行 60 CMediaServer.exe!mediakit::WebRtcTransport::OnDtlsTransportConnected(const RTC::DtlsTransport * dtlsTransport, RTC::SrtpSession::…
阅读更多...
tomcat部署war包部署运行，IDEA一键运行启动tomacat服务，maven打包为war包并部署到tomecat

tomcat部署war包部署运行，IDEA一键运行启动tomacat服务，maven打包为war包并部署到tomecat

tomcat部署war包前端访问 在Java Web开发中&#xff0c;Tomcat是一个非常流行的开源Web服务器和Servlet容器。它实现了Java Servlet和JavaServer Pages (JSP) 技术&#xff0c;提供了一个纯Java的Web应用环境。本文将介绍如何在Tomcat中部署运行WAR包&#xff0c;让你的应用快…
阅读更多...
vue2 使用环境变量

vue2 使用环境变量

一. 在根目录下创建.env.xxx文件 .env 基础系统变量&#xff0c;无论何种环境&#xff0c;都可使用其中配置的值&#xff0c;其他环境中的变量会覆盖.env中的同名变量。 .env.development 开发环境 .env.production 生产环境 .env.staging 测试环境 二. 内容格式 vue2 使用是以…
阅读更多...
GRU神经网络理解

GRU神经网络理解

全文参考以下B站视频及《神经网络与深度学习》邱锡鹏&#xff0c;侧重对GPU模型的理解&#xff0c;初学者入门自用记录&#xff0c;有问题请指正【重温经典】GRU循环神经网络 —— LSTM的轻量级版本&#xff0c;大白话讲解_哔哩哔哩_bilibili 更新门、重置门、学习与输出 注&a…
阅读更多...
STM32（二十一）：看门狗

STM32（二十一）：看门狗

WDG&#xff08;Watchdog&#xff09;看门狗&#xff0c;手动重装寄存器的操作就是喂狗。 看门狗可以监控程序的运行状态&#xff0c;当程序因为设计漏洞、硬件故障、电磁干扰等原因&#xff0c;出现卡死或跑飞现象时&#xff0c;看门狗能及时复位程序&#xff0c;避免程序陷入…
阅读更多...
数学建模微分方程模型——传染病模型

数学建模微分方程模型——传染病模型

病毒也疯狂&#xff1a;细说传染病微分方程模型的那些事儿 “数学是打开科学大门的钥匙&#xff0c;而微分方程则是理解世界变化的密码。” 大家好&#xff01;今天我们要聊一聊一个既严肃又有趣的话题——传染病微分方程模型。别急&#xff0c;听起来高大上&#xff0c;其实一…
阅读更多...
亚信安全DeepSecurity中标知名寿险机构云主机安全项目

亚信安全DeepSecurity中标知名寿险机构云主机安全项目

近日&#xff0c;亚信安全DeepSecurity成功中标国内知名寿险机构的云主机安全项目。亚信安全凭借在云主机安全防护领域的突出技术优势&#xff0c;结合安全运营的能力&#xff0c;以“实战化”为指导&#xff0c;为用户提供无惧威胁攻击、无忧安全运营的一站式云安全体系&#…
阅读更多...
【论文翻译】ICLR 2018 | DCRNN：扩散卷积递归神经网络：数据驱动的交通预测

【论文翻译】ICLR 2018 | DCRNN：扩散卷积递归神经网络：数据驱动的交通预测

论文题目Diffusion Convolutional Recurrent Neural Network: Data-Driven Traffic Forecasting论文链接https://arxiv.org/abs/1707.01926源码地址https://github.com/liyaguang/DCRNN发表年份-会议/期刊2018 ICLR关键词交通预测&#xff0c;扩散卷积&#xff0c;递归神经网络…
阅读更多...
数字+文旅：AI虚拟数字人如何焕发传统文旅景区新活力？

数字+文旅：AI虚拟数字人如何焕发传统文旅景区新活力？

​​引言&#xff1a; 据《2024年中国数字文旅行业市场研究报告》显示&#xff0c;截至2022年&#xff0c;中国数字文旅市场规模已达到约9698.1亿元人民币&#xff0c;相较于2017年的7870.5亿元&#xff0c;实现了57.89%的显著增长。这一行业涵盖了数字化的文化遗产旅游、虚拟…
阅读更多...
JVM、字节码文件介绍

JVM、字节码文件介绍

目录 初识JVM 什么是JVM JVM的三大核心功能 JVM的组成 字节码文件的组成 基础信息 Magic魔数 主副版本号 其它基础信息 常量池 字段 方法 属性 字节码常用工具 javap jclasslib插件 阿里Arthas 初识JVM 什么是JVM JVM的三大核心功能 1. 解释和运行虚拟机指…
阅读更多...
【性能优化】安卓性能优化之CPU优化

【性能优化】安卓性能优化之CPU优化

【性能优化】安卓性能优化之CPU优化 CPU优化及常用工具原理与文章参考常用ADB常用原理、监控手段原理监控手段多线程并发解决耗时UI相关 常见场景排查CPU占用过高常用系统/开源分析工具AndroidStudio ProfilerSystraceBtracePerfettoTraceView和 Profile ANR相关ANR原理及常见场…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023