利用ExcelJS封装一个excel表格的导出

ExcelJS 操作和写入Excel 文件。
直接上代码,js部分:
exportFn.js

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';export function exportExcleUtils(tHeader, filterVal, listData, fileName) {//设置工作簿属性const workbook = new ExcelJS.Workbook();workbook.creator = 'Me';workbook.lastModifiedBy = 'Her';workbook.created = new Date();workbook.modified = new Date();workbook.lastPrinted = new Date();//添加工作薄const worksheet = workbook.addWorksheet('sheet1');//计算标题宽let colWidth = calculateColumnWidth(tHeader);console.log(colWidth);let style = { alignment: { vertical: 'middle', horizontal: 'center' } };let columns = [];for (let i = 0; i < tHeader.length; i++) {let header = {header: tHeader[i],key: filterVal[i] ? filterVal[i] : i + '',width: colWidth[i] ? colWidth[i] + 20 : 10,style: JSON.parse(JSON.stringify(style)),};columns.push(header);}worksheet.columns = columns;//添加数据listData.forEach((item) => {worksheet.addRow(item);});worksheet.getRow(1).font = { name: '宋体', family: 4, size: 16, bold: true };fileName = fileName + '.xlsx';workbook.xlsx.writeBuffer().then((data) => {let blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',});saveAs(blob, fileName);});
}export function calculateColumnWidth(tHeader) {let colWidth = [];//计算列宽for (let i = 0; i < tHeader.length; i++) {if (colWidth[i] && colWidth[i] < tHeader[i].length) {colWidth[i] = tHeader[i].length * 2;} else if (colWidth[i] === undefined) {colWidth[i] = tHeader[i].length * 2;}}return colWidth;
}

举个栗子:

//从公共函数中拿出
import { exportExcleUtils } from '@/libs/exportFn';
...
...
...
//再写个按钮<el-button type="primary" @click="exportFn">导出按钮</el-button>
...
...
...//导出exportFn() {let loadingInstance = Loading.service({text: '正在导出,请稍等...',});let table = this.selectedRowArr;//表头let tHeader = ['a','b','c','d',];//数据的里字段let filterVal = ['person','dog','cat','pig',];let fileName = '导出的表文件名';loadingInstance.close();exportExcleUtils(tHeader, filterVal, table, fileName);},

PS:上文的selectedRowArr变量是我项目里的,自己去塞数据,数组对象形式

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

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

相关文章

Android App 技能在DuerOS的调试方法

温故知新&#xff0c;我们先回顾一下DuerOS的技能分类。根据不同的视角可以对DuerOS 目前支持的技能类型进行不同的分类&#xff0c;例如&#xff0c;从用户与技能的语音交互方式来看&#xff0c; 可以将技能分为这四种技能类型: L1技能&#xff1a;只支持语音的打开和关闭L2技…

Unity 2D寻路导航 NavMeshPlus解决方案

插件的github主页 h8man/NavMeshPlus: Unity NavMesh 2D Pathfinding 这个插件是基于新版3D寻路导航制作的&#xff0c;所以你可能需要看一下这篇文章 新旧Navmash 寻路导航组件对比 附使用案例与实用教程链接-CSDN博客 这行代码agent.updateUpAxis false 一定要为代理单位…

客户端与微服务之间的桥梁---网关

当我们创建好了N多个微服务或者微服务的实例之后&#xff0c;每个服务暴露出不同的端口地址&#xff0c;一般对于客户端请求&#xff0c;只需要请求一个端口&#xff0c;要隔离客户端和微服务的直接关系&#xff0c;保证微服务的安全性和灵活性&#xff0c;避免敏感信息的泄露。…

@Excel若依导出异常/解决BusinessBaseEntity里面的字段不支持导出

今天发现所有实体类继承BusinessBaseEntity里面的这些通用字段不支持导出&#xff0c;debug时发现是这样&#xff1a; 导出效果 这里我把能查到的方法都汇总了&#xff0c;如果你也遇到这个异常&#xff0c;可以去逐步排查 1.先看库里有没有数据 2.看字段名是否对齐 3.所需要…

Flink系列之:学习理解通过状态快照实现容错

Flink系列之&#xff1a;学习理解通过状态快照实现容错 状态后端检查点存储状态快照状态快照如何工作&#xff1f;确保精确一次&#xff08;exactly once&#xff09;端到端精确一次 状态后端 由 Flink 管理的 keyed state 是一种分片的键/值存储&#xff0c;每个 keyed state…

大数据之文件服务器方案

大数据文件服务器方案 一&#xff0c;文件服务器常用框架 二&#xff0c;文件服务器常用框架的实现技术 文件服务器常用框架 文件服务器是一种专门用于存储、管理和共享文件的服务器&#xff0c;其常用框架的实现技术涉及多个方面&#xff0c;以下是一些主要的实现技术及其详…

车载总线系列 --- CAN FD简介

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

Oracle与SQL Server的语法区别

1&#xff09;日期和日期转换函数。 SQL: SELECT A.*, CASE WHEN NVL(PAA009,) OR PAA009 >Convert(Varchar(10), SYSDATE,120) THEN Y ELSE N END AS ActiveUser FROM POWPAA A WHERE PAA001admin or PAA002admin Oracle: SELECT A.*, CASE WHEN NVL(PAA009,) or PAA009&…

在培训班学网络安全有用吗

在当今数字化时代&#xff0c;网络安全问题日益凸显&#xff0c;成为了企业和个人关注的焦点。随着对网络安全人才需求的不断增长&#xff0c;各种网络安全培训班也如雨后春笋般涌现。然而&#xff0c;在培训班学网络安全真的有用吗? 一、网络安全的重要性与挑战 1. 信息时代的…

leaflet 地图基础应用篇

文章目录 leaflet 基础应用一、基础介绍二、功能总结1. 地图加载2. 打点3. 图层控制4. 绘制5. 聚合6. 特效实例应用1. 加载多个不同来源的地图图层并切换2. 加载自定义瓦片地图&#xff08;本地瓦片或私有瓦片服务器&#xff09;3. 加载有不同缩放级别限制的地图图层 图层加载控…

【前端】在Next.js中cors 库的使用及限制跨域请求的速度

cors 库是一个用于方便地启用跨域资源共享&#xff08;CORS&#xff09;的 Node.js 中间件。在 Next.js 中&#xff0c;你可以利用这个库来处理来自不同源的请求。下面是详细的步骤说明&#xff0c;展示如何在 Next.js 中使用 cors 库。 安装 cors 首先&#xff0c;你需要安装…

躺平成长-下一个更新的数据(躺平成长数据显示核心)

旭日图&#xff08;Sunburst Chart&#xff09;是一种用于展示具有层次结构数据的可视化图表。 它起源于饼图和环形图&#xff0c;并随着数据可视化需求的发展而演变。 旭日图通过将层次结构数据以由内向外的同心圆环形式展示&#xff0c;使数据的层次关系更加清晰直观。 以下…

【C++、数据结构】哈希表——散列表(一)(概念/总结)

「前言」 &#x1f308;个人主页&#xff1a; 代码探秘者 &#x1f308;C语言专栏&#xff1a;C语言 &#x1f308;C专栏&#xff1a; C / STL使用以及模拟实现 &#x1f308;数据结构专栏&#xff1a; 数据结构 / 十大排序算法 &#x1f308;Linux专栏&#xff1a; Linux系统编…

OpenCV图像预处理1

目录 图像翻转 图像仿射变换 仿射变换函数 图像旋转 图像平移 图像缩放 图像倾斜 图像色彩空间转换 RGB 转 Gray RGB 转 HSV 图像二值化处理 图像掩模 图像位与操作 图像检测轮廓 绘制轮廓 图像翻转 cv2.flip(src, flipCode[, dst]) -> dst 用于翻转图像。翻…

金融量化交易模型的探索与发展

在当代金融市场中&#xff0c;量化交易模型的应用不断提升&#xff0c;逐渐成为大数据与人工智能等前沿技术的集大成者。量化交易借助数学模型和算法分析市场信息&#xff0c;自动执行交易决策&#xff0c;具备精确、效率高等特点&#xff0c;且能够在复杂多变的市场中有效应对…

求逻辑地址的页号和物理地址

逻辑地址空间按字编址 -->逻辑地址长度为&#xff1a;log2(逻辑地址空间&#xff09; 页的大小 --> 页内偏移量占log(页的大小) 逻辑页号页内偏移量逻辑地址长度 因此假如一个逻辑地址空间为64kb,页的大小为1kb&#xff0c;逻辑地址为17CAH&#xff0c;求逻辑地址页号…

ETLCloud怎么样?深度解析其在数据管理中的表现

在BI或数据大屏等数据分析工具中&#xff0c;经常需要从多个业务系统中提取原始数据&#xff0c;然后对数据进行清洗、处理&#xff0c;以获取高质量、有效且干净的数据以供后续的BI进行数据统计和分析使用&#xff0c;从高质量的实现企业数据的价值变现。 然而&#xff0c;在…

Windows SEH异常处理讨论

Windows C程序异常的类型 在Windows C异常的场景中&#xff0c;我们需要理解以下两种类型的异常&#xff1a; C语言抛出的异常。 这是利用C throw抛出的exception&#xff0c;利用C try-catch即可捕获。即便是来自于另一个DLL的C exception&#xff0c;仍然能利用C try-catch…

Windows 基础(一):深入理解Windows,掌握命令行与Shell

内容预览 ≧∀≦ゞ Windows 基础&#xff08;一&#xff09;声明导语一、Windows 和 Linux 的区别二、Windows 的ShellShell 和 终端 的区别1. 命令提示符&#xff08;CMD&#xff09;2. Windows PowerShell3. Windows Terminal4. Windows Subsystem for Linux (WSL) 三、Windo…

【数据库系统概论】第3章 关系数据库标准语言SQL(一)数据查询(超详细)

目录 一、单表查询 1. 简单的数据查询 &#xff08;1&#xff09;选择表中若干列 &#xff08;2&#xff09;选择表中若干行&#xff08;元祖&#xff09; 2. 聚合函数与分组查询 聚集函数 GROUP BY分组查询 二、联接查询 1、连接概述 2. 内联接&#xff08;INNER JO…