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

vue +xlsx+exceljs 导出excel文档

实现功能:分标题行导出数据过多,一个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);

相关文章:

vue +xlsx+exceljs 导出excel文档

实现功能&#xff1a;分标题行导出数据过多&#xff0c;一个sheet表里表格条数有限制&#xff0c;需要分sheet显示。 步骤1:安装插件包 npm install exceljs npm install xlsx 步骤2&#xff1a;引用包 import XLSX from xlsx; import ExcelJS from exceljs; 步骤3&am…...

nginx之proxy_redirect应用

一、功能说明 proxy_redirect 是 Nginx 反向代理中用于修改后端返回的响应头中 Location 和 Refresh 字段的核心指令&#xff0c;主要解决以下问题&#xff1a;协议/地址透传错误&#xff1a;当后端返回的 Location 包含内部 IP、HTTP 协议或非标准端口时&#xff0c;需修正为…...

在 Flink + Kafka 实时数仓中,如何确保端到端的 Exactly-Once

在 Flink Kafka 构建实时数仓时&#xff0c;确保端到端的 Exactly-Once&#xff08;精确一次&#xff09; 需要从 数据消费&#xff08;Source&#xff09;、处理&#xff08;Processing&#xff09;、写入&#xff08;Sink&#xff09; 三个阶段协同设计&#xff0c;结合 Fli…...

Qt 中基于 spdlog 的高效日志管理方案

在开发 Qt 应用程序时,日志记录是一项至关重要的功能,它能帮助我们追踪程序的运行状态、定位错误和分析性能。本文将介绍如何在 Qt 项目中集成 spdlog 库,并封装一个简单易用的日志管理类 QtLogger,实现高效的日志记录和管理。 为什么选择 spdlog? spdlog 是一个快速、头…...

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

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

Linux 学习笔记2

Linux 学习笔记2 一、定时任务调度操作流程注意事项 二、磁盘分区与管理添加新硬盘流程磁盘管理命令 三、进程管理进程操作命令服务管理&#xff08;Ubuntu&#xff09; 四、注意事项 一、定时任务调度 操作流程 创建脚本 vim /path/to/script.sh # 编写脚本内容设置可执行权…...

JS DOM操作与事件处理从入门到实践

对于前端开发者来说&#xff0c;让静态的 HTML 页面变得生动、可交互是核心技能之一。实现这一切的关键在于理解和运用文档对象模型 (DOM) 以及 JavaScript 的事件处理机制。本文将带你深入浅出地探索 DOM 操作的奥秘&#xff0c;并掌握JavaScript 事件处理的方方面面。 目录 …...

Java EE初阶——初识多线程

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

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

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

深入解析C++11委托构造函数:消除冗余初始化的利器

一、传统构造函数的痛点 在C11之前&#xff0c;当多个构造函数需要执行相同的初始化逻辑时&#xff0c;开发者往往面临两难选择&#xff1a; class DataProcessor {std::string dataPath;bool verbose;int bufferSize; public:// 基础版本DataProcessor(const std::string&am…...

Python中的事件循环是什么?事件是怎么个事件?循环是怎么个循环

在Python异步编程中&#xff0c;事件循环&#xff08;Event Loop&#xff09;是核心机制&#xff0c;它通过单线程实现高效的任务调度和I/O并发处理。本文将从事件的定义、循环的运行逻辑以及具体实现原理三个维度展开分析。 一、事件循环的本质&#xff1a;协程与任务的调度器…...

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

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

[python] 类

一 介绍 具有相同属性和行为的事物的通称,是一个抽象的概念 三要素: 类名,属性&#xff0c;方法 格式: class 类名: 代码块 class Pepole:name "stitchcool"def getname(self):return self.name 1.1 创建对象(实例化) 格式: 对象名 类名() p1 Pepole()…...

day21python打卡

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

Android开发-Activity启停

在Android应用开发中&#xff0c;Activity是构建用户界面的基本组件之一。它代表了一个单一的、专注的操作&#xff0c;比如查看一张图片或者撰写一封电子邮件。每个Activity都有其生命周期&#xff0c;从创建到销毁&#xff0c;会经历一系列的状态变化。了解并正确管理这些状态…...

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…...

一、ArkTS语法学习

一、ArkTS语法学习 1 ArkTS语法简介2 声明2.1 变量声明2.2 常量声明2.3 自动类型推断 3 类型3.1 基本类型和引用类型3.2 基本数据类型3.2.1 number类型3.2.2 boolean类型3.2.3 string类型3.2.4 void类型 3.3 引用类型3.3.1 Object类型3.3.2 arry类型3.3.3 enum类型3.3.4 Union类…...

MySQL 1366 - Incorrect string value:错误

MySQL 1366 - Incorrect string value:错误 错误如何发生发生原因&#xff1a; 解决方法第一种尝试第二种尝试 错误 如何发生 在给MySQL添加数据的时候发生了下面的错误 insert into sys_dept values(100, 0, 0, 若依科技, 0, 若依, 15888888888, ryqq.com, 0,…...

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 能够满足现代分布式、大规模、…...

MYSQL中的RR隔离级别实现原理,它是如何解决不可重复读

在数据库管理系统中&#xff0c;RR&#xff08;Repeatable Read&#xff09;隔离级别是为了保证在一个事务执行期间&#xff0c;多次读取同一数据时&#xff0c;所读取的数据值始终保持一致&#xff0c;从而避免了不可重复读的问题。不可重复读的问题指的是&#xff0c;在同一个…...

Linux的web服务器的部署和优化

http中访问请求中I/O结构 在HTTP协议中&#xff0c;I/O&#xff08;输入/输出&#xff09;结构主要涉及客户端与服务器之间的请求和响应交互。以下是HTTP请求和响应的基本结构及其关键组成部分&#xff1a; HTTP请求结构 HTTP请求由请求行、请求头和请求体三部分组成 请求行…...