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);

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

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

相关文章

ThinkPad T440P如何从U盘安装Ubuntu24.04系统

首先制作一个安装 U 盘。我使用的工具是 Rufus &#xff0c;它的官网是 rufus.ie &#xff0c;去下载最新版就可以了。直接打开这个工具&#xff0c;选择自己从ubuntu官网下载Get Ubuntu | Download | Ubuntu的iso镜像制作U盘安装包即可。 其次安装之前&#xff0c;还要对 Thi…

第十七次博客打卡

今天学习的内容是动态规划算法。 动态规划算法&#xff08;Dynamic Programming&#xff0c;简称 DP&#xff09;是一种通过将复杂问题分解为更小的子问题来求解的算法思想。它主要用于解决具有重叠子问题和最优子结构特性的问题。 一、动态规划的基本概念 1. 最优子结构 一个复…

视觉革命来袭!ComfyUI-LTXVideo 让视频创作更高效

探索LTX-Video 支持的ComfyUI 在数字化视频创作领域&#xff0c;视频制作效果的提升对创作者来说无疑是一项重要的突破。LTX-Video支持的ComfyUI便是这样一款提供自定义节点的工具集&#xff0c;它专为改善视频质量、提升生成速度而开发。接下来&#xff0c;我们将详细介绍其功…

Java版ERP管理系统源码(springboot+VUE+Uniapp)

ERP系统是企业资源计划&#xff08;Enterprise Resource Planning&#xff09;系统的缩写&#xff0c;它是一种集成的软件解决方案&#xff0c;用于协调和管理企业内各种关键业务流程和功能&#xff0c;如财务、供应链、生产、人力资源等。它的目标是帮助企业实现资源的高效利用…

CenOS7切换使用界面

永久切换 在开始修改之前&#xff0c;我们首先需要查看当前的启动模式。可以通过以下命令来实现&#xff1a; systemctl get-default执行此命令后&#xff0c;系统会返回当前的默认启动模式&#xff0c;例如graphical.target表示当前默认启动为图形界面模式。 获取root权限&…

Dify使用总结

最近完成了一个Dify的项目简单进行总结下搭建服务按照官方文档操作就行就不写了。 进入首页之后由以下组成&#xff1a; 探索、工作室、知识库、工具 探索&#xff1a; 可以展示自己创建的所有应用&#xff0c;一个应用就是一个APP&#xff0c;可以进行测试使用 工作室包含…

计网学习笔记———网络

&#x1f33f;网络是泛化的概念 网络是泛化的概念 &#x1f342;泛化理解 网络的概念在生活中无处不在举例&#xff1a;社交网络、电话网路、电网、计算机网络 &#x1f33f;网络的定义 定义&#xff1a; 离散的个体通过通讯手段连成群体&#xff0c;实现资源的共享与交流、个…

《Python星球日记》 第53天:卷积神经网络(CNN)入门

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、图像表示与通道概念1. 数字图像的本质2. RGB颜色模型3. 图像预处理 二、卷积…

SpringBoot2集成xxl-job详解

官方教程 搭建调度中心 Github Gitee 注&#xff1a;版本3.x开始要求Jdk17&#xff1b;版本2.x及以下支持Jdk1.8。如对Jdk版本有诉求&#xff0c;可选择接入不同版本 clone源代码执行xxl-job\doc\db\tables_xxl_job.sql # # XXL-JOB v2.4.1 # Copyright (c) 2015-present, x…

HashMap中put()方法的执行流程

HashMap 是 Java 中最常用的数据结构之一&#xff0c;用于存储键值对。其 put() 方法是向哈希表中插入或更新键值对的核心操作。本文将详细解析 put() 方法的执行过程&#xff0c;涵盖哈希值计算、桶定位、冲突处理和扩容等步骤。 一、put() 方法的执行过程 put() 方法通过一系…

【Oracle认证】MySQL 8.0 OCP 认证考试英文版(MySQL30 周年版)

文章目录 1、MySQL OCP考试介绍2、考试注册流程3、考试复习题库 Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到2025.07.31 之前。所有人均可以免费考取原价245美元 &#xff08;约1500&#xff09;的MySQL OCP 认证。 1、MySQL OCP考试介绍 OCP考试 OCP认证是Oracle公司推…

SpringBoot框架开发网络安全科普系统开发实现

概述 基于SpringBoot框架的网络安全科普系统开发指南&#xff0c;该系统集知识科普、案例学习、在线测试等功能于一体&#xff0c;本文将详细介绍系统架构设计、功能实现及技术要点&#xff0c;帮助开发者快速构建专业的网络安全教育平台。 主要内容 系统功能架构 本系统采…

浏览器HTTP错误、前端常见报错 和 Java后端报错

以下是 浏览器HTTP错误、前端常见报错 和 Java后端报错 的综合整理&#xff0c;包括原因和解决方法&#xff0c;帮助你快速排查问题。 一、HTTP 错误&#xff08;浏览器报错&#xff09; 错误码原因解决方法400 Bad Request请求语法错误&#xff08;如参数格式错误、请求体过…

TypeScript简介

&#x1f31f; TypeScript入门 TypeScript 是 JavaScript 的超集&#xff0c;由微软开发并维护&#xff0c;通过静态类型检查和现代语言特性&#xff0c;让大型应用开发变得更加可靠和高效。 // 一个简单的 TypeScript 示例 interface User {name: string;age: number;greet():…

[ctfshow web入门] web57

信息收集 这下把.也过滤了&#xff0c;临时文件上传无法使用了 //flag in 36.php if(isset($_GET[c])){$c$_GET[c];if(!preg_match("/\;|[a-z]|[0-9]|\|\|\#|\|\"|\|\%|\x09|\x26|\x0a|\>|\<|\.|\,|\?|\*|\-|\|\[/i", $c)){system("cat ".$c…

Android 移动应用开发:页面跳转与数据传递功能

目录 ✅ 运行效果说明 &#x1f4c1; 文件一&#xff1a;MainActivity.java&#xff08;语言&#xff1a;Java&#xff09; &#x1f4c1; 文件二&#xff1a;Edit_MainActivity.java&#xff08;语言&#xff1a;Java&#xff09; &#x1f4c1; 文件三&#xff1a;activi…

MySQL如何优雅的执行DDL

一、概述 在MySQL中&#xff0c;DDL&#xff08;数据定义语言&#xff09;语句用于定义和管理数据库结构&#xff0c;包括创建、修改和删除数据库对象&#xff08;如表、索引等&#xff09;。执行DDL操作时&#xff0c;需要谨慎处理&#xff0c;以避免对生产环境的稳定性和性能…

onenet连接微信小程序(mqtt协议)

一、关于mqtt协议 mqtt协议常用于物联网&#xff0c;是一种轻量级的消息推送协议。 其中有三个角色&#xff0c;Publisher设备&#xff08;客户端&#xff09;发布主题到服务器&#xff0c;其他的设备通过订阅主题&#xff0c;获取该主题下的消息&#xff0c;Publisher可以发…

【Unity笔记】实现支持不同渲染管线的天空盒曝光度控制组件(SkyboxExposureController)——参数化控制

写在前面 在Unity中&#xff0c;天空盒&#xff08;Skybox&#xff09;不仅承担视觉上的背景作用&#xff0c;更是场景环境光照与氛围塑造的重要组成部分。不同时间、天气、场景转换等&#xff0c;都需要灵活调整天空的亮度。而**曝光度&#xff08;Exposure&#xff09;**就是…

blender云渲染指南2025版

一、云渲染核心概念 Blender云渲染是将本地渲染任务迁移到云端服务器集群的技术&#xff0c;通过分布式计算实现效率提升100倍以上的解决方案&#xff0c;其核心逻辑是&#xff1a;用户上传Blender项目文件至【渲染101】等云平台&#xff0c;云端调用高性能服务器&#xff08;…