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

利用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变量是我项目里的,自己去塞数据,数组对象形式

相关文章:

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

ExcelJS 操作和写入Excel 文件。 直接上代码&#xff0c;js部分&#xff1a; exportFn.js import ExcelJS from exceljs; import { saveAs } from file-saver;export function exportExcleUtils(tHeader, filterVal, listData, fileName) {//设置工作簿属性const workbook ne…...

AI 原生时代,更要上云:百度智能云云原生创新实践

本文整理自百度云智峰会 2024 —— 云原生论坛的同名演讲。 我今天分享的主题&#xff0c;是谈谈在云计算和 AI 技术快速发展和深入落地的背景下&#xff0c;百度智能云在云原生的基础设施产品和技术层面做的一些创新实践。 毋庸置疑&#xff0c;过去十几年云计算和 AI 技术是…...

C语言程序编译运行

程序功能&#xff1a;使用 printf() 输出 “Hello, World!”。 C语言源程序&#xff1a; #include <stdio.h> int main() {// printf() 中字符串需要引号printf("Hello, World!");return 0; }编译过程&#xff1a; vim hello.c gcc hello.c -o hello ./hell…...

视频点播系统扩展示例

更多的前端页面&#xff08;如视频详情页、用户注册页等&#xff09;。更复杂的业务逻辑&#xff08;如视频评论、搜索功能等&#xff09;。安全性和权限管理&#xff08;如用户角色管理、权限控制等&#xff09;。其他技术细节&#xff08;如文件上传、分页查询等&#xff09;…...

echo $? —— Linux 中的退出状态码详解

在 Linux 系统中&#xff0c;echo $? 是一个非常重要的命令&#xff0c;用于显示上一条命令的退出状态码。这个小小的符号组合可以帮助我们判断命令是否成功执行&#xff0c;同时也为编写自动化脚本提供了基础支持。本文将详细介绍 echo $? 的用法及其在实际开发中的应用。 …...

heic格式转化jpg最简单方法?快来学习这几种简单的转换方法!

heic格式转化jpg最简单方法&#xff1f;在当今的数字图像处理领域&#xff0c;HEIC格式以其卓越的压缩效率和高质量图像表现&#xff0c;正逐渐崭露头角并受到业界的深切关注&#xff0c;HEIC格式凭借先进的压缩技术&#xff0c;成功地在保持图像清晰度的同时&#xff0c;大幅度…...

力扣(leetcode)每日一题 3259 超级饮料的最大强化能量|动态规划

3259. 超级饮料的最大强化能量 题干 来自未来的体育科学家给你两个整数数组 energyDrinkA 和 energyDrinkB&#xff0c;数组长度都等于 n。这两个数组分别代表 A、B 两种不同能量饮料每小时所能提供的强化能量。 你需要每小时饮用一种能量饮料来 最大化 你的总强化能量。然而…...

Webserver(2.7)内存映射

目录 内存映射内存映射相关系统调用内存映射的注意事项如果对mmap的返回值(ptr)做操作&#xff0c;释放内存&#xff08;munmap&#xff09;是否能够成功&#xff1f;如果open时O_RDONLY&#xff0c;mmap时prot参数指定PROT_READ | PROT_WRITE会怎样&#xff1f;如果文件偏移量…...

vue3父子组件传值,子组件暴漏方法

1.父传子 defineProps 父组件直接通过属性绑定的方式给子组件绑定数据&#xff0c;子组件通过defineProps接收函数接收 其中v-model是完成事件绑定和事件监听的语法糖。v-model算是v-bind和v-on的简洁写法&#xff0c;等价于 <c-input ref"inputRef" :modelValue…...

Linux_04 Linux常用命令——tar

一、命令格式 tar [选项] [归档文件] [要处理的文件或目录]1、选项 c创建归档文件x解压缩归档文件z使用gzipj使用bzip2v处理过程显示信息f指定归档文件名称 2、归档文件-可指定目录及文件名 /home/wang.tar.gz 3、要处理的文件或目录 /home/study1/wang 二、常见命令 t…...

Java项目实战II基于Java+Spring Boot+MySQL的编程训练系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在当今数字…...

Rust:文档注释 //! 和 ///

在 Rust 编程语言中&#xff0c;//! 是一种特殊的文档注释&#xff08;documentation comment&#xff09;。它用于为整个模块、结构体、枚举、函数或其他项提供文档说明。与单行注释 // 和多行注释 /* ... */ 不同&#xff0c;//! 和 ///&#xff08;用于紧跟在项之前的文档注…...

练习LabVIEW第二十七题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第二十七题&#xff1a; 创建一个VI程序模拟温度测量。假设传感器输出电压与温度成正比。例如&#xff0c;当温度为70F时&…...

使用React构建现代Web应用

&#x1f496; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4bb; Gitee主页&#xff1a;瑕疵的gitee主页 &#x1f680; 文章专栏&#xff1a;《热点资讯》 使用React构建现代Web应用 1 引言 2 React简介 3 安装React 4 创建React项目 5 设计应用结构 6 创建组件 7 使用组件…...

【系统设计】Merkle 算法在 Git 中的应用:深入理解与实践

引言 在现代软件开发中&#xff0c;Git 已成为版本控制的事实标准。Git 能够快速处理项目的变化&#xff0c;确保代码的完整性&#xff0c;其中一个关键技术就是 Merkle 树。本文将深入探讨 Merkle 算法的原理&#xff0c;以及其在 Git 中的具体应用。 1. Merkle 算法的原理 …...

【umi max】关于umi构建的项目在本地服务运行正常,但是部署时无致命报错却白屏,html文档的#root容器没有子元素的原因及解决办法

我们在部署时运维很可能会因为项目太多&#xff0c;进而放到不同的目录底下&#xff0c;例如project/H5-TEST-DEMO &#xff08;其中project是项目的存放目录&#xff0c;而H5-TEST-DEMO才是我们部署的项目根目录&#xff09;于是乎就会出现我们在本地服务里调试得好好的&#…...

Openlayers高级交互(14/20):汽车移动轨迹动画(开始、暂停、结束)

本示例演示在vue+openlayers中实现轨迹动画,这里设置了小汽车开始,暂停,结束等的控制键,采用了线段步长位置获取坐标来定位点的方式来显示小车的动态。 效果图 专栏名称内容介绍Openlayers基础实战 (72篇)专栏提供73篇文章,为小白群体提供基础知识及示例演示,能解决基…...

蓝牙MCU蓝牙医疗检测相关案例

英尚蓝牙MCU配套成熟的网络协议栈和丰富的示例代码及多平台APP工具。无需二次开发&#xff0c;即连即用&#xff1b;提供特色蓝牙/串口/USB三通芯片&#xff0c;为更多复杂无线应用赋能。相关产品及技术欢迎咨询。 应用案例说明: • 应用包括血糖仪,血氧仪,血压计,体温计,毒品…...

pytorch环境安装和更新,额外装cuda有什么意义

更新了一下设备和环境&#xff0c;看了眼其他教程&#xff0c;突然间发现都还让装cuda和cudnn。。。明明很早之前pytorch使用的和系统的cuda就已经脱钩了。 测试了一下不额外装也没发现什么问题&#xff0c;如果有谁知道装系统的cuda对pytorch有何意义&#xff0c;可以评论区告…...

【观成科技】APT组织常用开源和商业工具加密流量特征分析

概述 在当前的网络安全环境中&#xff0c;APT组织的活动愈发频繁&#xff0c;利用其高级技术和社会工程手段&#xff0c;针对全球范围内的政府、军事和企业目标发起了一系列复杂的网络攻击。在不断升级的攻击中&#xff0c;开源和商业工具凭借其灵活性、易用性和全球化攻击能力…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...