vue +xlsx+exceljs 导出excel文档

news2025/5/11 10:41:22

实现功能:分标题行导出数据过多,一个sheet表里表格条数有限制,需要分sheet显示。

步骤1:安装插件包

npm install exceljs

npm install xlsx

步骤2:引用包

    import XLSX from 'xlsx';
    import ExcelJS from 'exceljs';

步骤3:举例按关键代码说明

//通用方法
async xlsxExport(titles,columns,data,pageSize)
		{
				let workbook = new ExcelJS.Workbook();				
				let pageNo = Math.ceil(data.length*1.0/pageSize);
				for(var p=0;p<pageNo;p++)
				{
                  //创建Sheet表
				  const worksheet = workbook.addWorksheet('Sheet'+(p+1));				  
				  
				  for(let t=1;t<=titles.length;t++)
				  { 
                     //判断单元格是否已合并
				     if(!worksheet.getRow(t).getCell(1).isMerged)
				     {
				     worksheet.mergeCells( t, 0 ,t, columns.length );
					 	  
					 }
                     //合并单元格填充值
					 worksheet.getRow(t).getCell(1).value=titles[t-1];
				
                     //单元格增加样式
					 if(t==1)
				     {
				        worksheet.getRow(t).getCell(1).alignment = { 
				          vertical: 'middle', 
				          horizontal: 'center' 
				        };
						worksheet.getRow(t).getCell(1).font = { bold: true, size: 16 };
				     }
				     else
				     {				
					  
				       worksheet.getRow(t).getCell(1).alignment = {
				         vertical: 'middle', 
				         horizontal: 'left' 
				       };
				     }
				    }
					//填充标题列
					worksheet.addRow(columns);
					let pdata = [];
                    //组织当前sheet的数据结构
					data.forEach(item=>{
						if(item[0]>=p*pageSize && item[0]<=(p+1)*pageSize)
						{
							pdata.push(item);
						}
					});
					worksheet.addRows(pdata);
				  }
					//所有sheet填充完,写入xlsx文件并下载
				      const buffer = await workbook.xlsx.writeBuffer();
				      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
				      // 创建下载链接
				      const url = URL.createObjectURL(blob);
				      const link = document.createElement('a');
				      link.href = url;
				      link.download = titles[0]+".xlsx";
				      document.body.appendChild(link);
				      link.click();
				      document.body.removeChild(link);
				      URL.revokeObjectURL(url);						
			 
		}

步骤4:举例应用

let str2 = `ROWS,A,B,C`;
let titles=["excel导出实例",`当前日期:${this.currTime}];
let columns=["序号","A对应的列标题","B对应的列标题","C对应的列标题"];
let data =[{[对应str2的值]},{[对应str2的值]}];//对应数据值
let pageSize = 1000;//对应sheet表显示条数
await this.xlsxExport(titles,columns,data,pageSize);

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

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

相关文章

VUE CLI - 使用VUE脚手架创建前端项目工程

前言 前端从这里开始&#xff0c;本文将介绍如何使用VUE脚手架创建前端工程项目 1.预准备&#xff08;编辑器和管理器&#xff09; 编辑器&#xff1a;推荐使用Vscode&#xff0c;WebStorm&#xff0c;或者Hbuilder&#xff08;适合刚开始练手使用&#xff09;&#xff0c;个…

Java EE初阶——初识多线程

1. 认识线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。 基本概念&#xff1a;一个进程可以包含多个线程&#xff0c;这些线程共享进程的资源&#xff0c;如内存空间、文件描述符等&#xff0c;但每个线程都有自己独…

如何删除网上下载的资源后面的文字

这是我在爱给网上下载的音效资源&#xff0c;但是发现资源后面跟了一大段无关紧要的文本&#xff0c;但是修改资源名称后还是有。解决办法是打开属性然后删掉资源的标签即可。

FPGA图像处理(5)------ 图片水平镜像

利用bram形成双缓冲&#xff0c;如下图配置所示&#xff1a; wr_flag 表明 buffer0写 还是 buffer1写 rd_flag 表明 buffer0读 还是 buffer1读 通过写入逻辑控制(结合wr_finish) 写哪个buffer &#xff1b;写地址 进而控制ip的写使能 通过状态缓存来跳转buffer的…

day21python打卡

知识点回顾&#xff1a; LDA线性判别PCA主成分分析t-sne降维 还有一些其他的降维方式&#xff0c;也就是最重要的词向量的加工&#xff0c;我们未来再说 作业&#xff1a; 自由作业&#xff1a;探索下什么时候用到降维&#xff1f;降维的主要应用&#xff1f;或者让ai给你出题&…

ERP学习(一): 用友u8安装

安装&#xff1a; https://www.bilibili.com/video/BV1Pp4y187ot/?spm_id_from333.337.search-card.all.click&vd_sourced514093d85ee628d1f12310b13b1e59b 我个人用vmware16&#xff0c;这位up已经把用友软件和环境&#xff08;sqlserver2008&#xff09; 都封城vmx文件了…

01 | 大模型微调 | 从0学习到实战微调 | AI发展与模型技术介绍

一、导读 作为非AI专业技术开发者&#xff08;我是小小爬虫开发工程师&#x1f60b;&#xff09; 本系列文章将围绕《大模型微调》进行学习&#xff08;也是我个人学习的笔记&#xff0c;所以会持续更新&#xff09;&#xff0c;最后以上手实操模型微调的目的。 (本文如若有…

海康相机无损压缩

设置无损压缩得到更高的带宽和帧率&#xff01;

从机器人到调度平台:超低延迟RTMP|RTSP播放器系统级部署之道

✅ 一、模块定位&#xff1a;跨平台、超低延迟、系统级稳定的音视频直播播放器内核 在无人机、机器人、远程操控手柄等场景中&#xff0c;低延迟的 RTSP/RTMP 播放器并不是“可有可无的体验优化”&#xff0c;而是系统能否闭环、操控是否安全的关键组成。 Windows和安卓播放RT…

研发效率破局之道阅读总结(5)管理文化

研发效率破局之道阅读总结(5)管理文化 Author: Once Day Date: 2025年5月10日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 程序的艺术_Once-Day…

单因子实验 方差分析

本文是实验设计与分析&#xff08;第6版&#xff0c;Montgomery著傅珏生译)第3章单因子实验 方差分析python解决方案。本文尽量避免重复书中的理论&#xff0c;着于提供python解决方案&#xff0c;并与原书的运算结果进行对比。您可以从 下载实验设计与分析&#xff08;第6版&a…

Bitacora:基因组组件中基因家族识别和注释的综合工具

软件教程 | Bitacora&#xff1a;基因组组件中基因家族识别和注释的综合工具 https://zhangzl96.github.io/tags#生物信息工具) &#x1f4c5; 官方地址&#xff1a;https://github.com/molevol-ub/bitacora &#x1f52c; 教程版本&#xff1a;BITACORA 1.4 &#x1f4cb; …

【WebRTC-13】是在哪,什么时候,创建编解码器?

Android-RTC系列软重启&#xff0c;改变以往细读源代码的方式 改为 带上实际问题分析代码。增加实用性&#xff0c;方便形成肌肉记忆。同时不分种类、不分难易程度&#xff0c;在线征集问题切入点。 问题&#xff1a;编解码器的关键实体类是什么&#xff1f;在哪里&什么时候…

青少年编程与数学 02-019 Rust 编程基础 01课题、环境准备

青少年编程与数学 02-019 Rust 编程基础 01课题、环境准备 一、Rust核心特性应用场景开发工具社区与生态 二、Rust 和 Python 比较1. **内存安全与并发编程**2. **性能**3. **零成本抽象**4. **跨平台支持**5. **社区与生态系统**6. **错误处理**7. **安全性**适用场景总结 三、…

Redis持久化存储介质评估:NFS与Ceph的适用性分析

#作者&#xff1a;朱雷 文章目录 一、背景二、Redis持久化的必要性与影响1. 持久化的必要性2. 性能与稳定性问题 三、NFS作为持久化存储介质的问题1. 性能瓶颈2. 数据一致性问题3. 存储服务单点故障4. 高延迟影响持久化效率.5. 吞吐量瓶颈 四、Ceph作为持久化存储介质的问题1.…

Ceph 原理与集群配置

一、Ceph 工作原理 1.1.为什么学习 Ceph&#xff1f; 在学习了 NFS 存储之后&#xff0c;我们仍然需要学习 Ceph 存储。这主要是因为不同的存储系统适用于不同的场景&#xff0c;NFS 虽然有其适用之处&#xff0c;但也存在一定的局限性。而 Ceph 能够满足现代分布式、大规模、…

天线的PCB设计

目录 天线模块设计的重要性 天线模块的PCB设计 天线模块设计的重要性 当智能手表突然断连、无人机信号飘忽不定——你可能正在经历一场来自天线模块的"无声抗议"。这个隐藏在电子设备深处的关键组件&#xff0c;就像数字世界的隐形信使&#xff0c;用毫米级的精密结…

C++笔记-set和map的使用(包含multiset和multimap的讲解)

1.序列式容器和关联式容器 前面我们已经接触过STL中的部分容器如:string、vector、list、deque、array、forward_list等&#xff0c;这些容器统称为序列式容器&#xff0c;因为逻辑结构为线性序列的数据结构&#xff0c;两个位置存储的值之间一般没有紧密的关联关系&#xff0…

Linux `ifconfig` 指令深度解析与替代方案指南

Linux `ifconfig` 指令深度解析与替代方案指南 一、核心功能与现状1. 基础作用2. 版本适配二、基础语法与常用操作1. 标准语法2. 常用操作速查显示所有接口信息启用/禁用接口配置IPv4地址修改MAC地址(临时)三、高级配置技巧1. 虚拟接口创建2. MTU调整3. 多播配置4. ARP控制四…

Python pandas 向excel追加数据,不覆盖之前的数据

最近突然看了一下pandas向excel追加数据的方法&#xff0c;发现有很多人出了一些馊主意&#xff1b; 比如用concat,append等方法&#xff0c;这种方法的会先将旧数据df_1读取到内存&#xff0c;再把新数据df_2与旧的合并&#xff0c;形成df_new,再覆盖写入&#xff0c;消耗和速…