xlsx+xlsx-style实现导出自定义样式的Excel文件

news/2025/3/31 10:40:11/

1、安装依赖

npm install --save file-saver //导出文件的库,也可以不安装这个
npm install --save xlsx-style //导出excel后表格的样式需要用到这个库
npm install --save xlsx //声明工作簿,创建文件,塞入数据要用到这个库

2、解决 Can't resolve './cptable' in '...' 的问题,在 vue.config.js 文件中加入该配置

externals: {'./cptable': 'var cptable'
}

3、 xlsx-style设置表格的行高不生效,原因是xlsx-style并没有提供设置行高的方法;xlsx提供了设置表格行高的方法,因此可以采用修改xlsx-style源码的方式解决问题

3.1、找到node_modules/xlsx-style/xlsx.js文件中的write_ws_xml_data函数,用以下代码替换

var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
function write_ws_xml_data(ws, opts, idx, wb) {var o = [], r = [], range = safe_decode_range(ws['!ref']), cell="", ref, rr = "", cols = [], R=0, C=0, rows = ws['!rows'];var dense = ws["!data"] != null;var params = ({r:rr}), row, height = -1;var date1904 = (((wb||{}).Workbook||{}).WBProps||{}).date1904;for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C);for(R = range.s.r; R <= range.e.r; ++R) {r = [];rr = encode_row(R);for(C = range.s.c; C <= range.e.c; ++C) {ref = cols[C] + rr;var _cell = dense ? (ws["!data"][R]||[])[C]: ws[ref];if(_cell === undefined) continue;if((cell = write_ws_xml_cell(_cell, ref, ws, opts, idx, wb, date1904)) != null) r.push(cell);}if(r.length > 0 || (rows && rows[R])) {params = ({r:rr});if(rows && rows[R]) {row = rows[R];if(row.hidden) params.hidden = 1;height = -1;if(row.hpx) height = px2pt(row.hpx);else if(row.hpt) height = row.hpt;if(height > -1) { params.ht = height; params.customHeight = 1; }if(row.level) { params.outlineLevel = row.level; }}o[o.length] = (writextag('row', r.join(""), params));}}if(rows) for(; R < rows.length; ++R) {if(rows && rows[R]) {params = ({r:R+1});row = rows[R];if(row.hidden) params.hidden = 1;height = -1;if (row.hpx) height = px2pt(row.hpx);else if (row.hpt) height = row.hpt;if (height > -1) { params.ht = height; params.customHeight = 1; }if (row.level) { params.outlineLevel = row.level; }o[o.length] = (writextag('row', "", params));}}return o.join("");
}

3.2、注意:修改源码仅是修改了本地的代码,当再次npm该包时,修改过的源码就会被覆盖,安装使用patch-package

npm i patch-package -D
文章来源:https://blog.csdn.net/Xuhai0811/article/details/145632857
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/1583827.html

相关文章

HarmonyOS之深入解析如何根据url下载pdf文件并且在本地显示和预览

一、文件下载 ① 网络请求配置 下载在线文件&#xff0c;需要访问网络&#xff0c;因此需要在 config.json 中添加网络权限&#xff1a; {"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET","reason&qu…

茱元游戏TV2.9.3 | 适配多设备的经典街机游戏集合

茱元游戏TV是一款专为TV端设计的游戏软件&#xff0c;同时适配手机、投影仪和车机等多种设备。尽管其兼容性一般&#xff0c;仅支持安卓9.0以上系统&#xff0c;但它提供了丰富的经典街机游戏资源&#xff0c;非常适合8090后怀旧游玩。注意&#xff0c;游戏需先下载才能玩&…

C# 打印模板设计-ACTIVEX打印控件-多模板加载

一、启动软件 using System; using System.Collections.Generic; using System.Windows.Forms; using System.Data;namespace Print {static class Program{/// <summary>/// 应用程序的主入口点。/// </summary>[STAThread]static void Main(){//使用模板前必须…

使用PyTorch 的神经网络模型对三维点云数据进行分类

1. 概述 本代码旨在构建一个基于 PyTorch 的神经网络模型&#xff0c;用于对生成的三维点云数据进行分类。通过生成数据集、数据预处理、模型训练、评估以及可视化等一系列操作&#xff0c;展示了一个完整的深度学习分类任务流程。最终通过绘制决策曲面和损失曲线&#xff0c;…

CSS 实现滚动条的隐藏但保留滚动功能

CSS 实现滚动条的隐藏但保留滚动功能 有几种方法可以在网页中隐藏滚动条但保留滚动功能&#xff0c;以下是常见的实现方式&#xff0c;使用 CSS&#xff1a; 使用 ::-webkit-scrollbar&#xff08;适用于 Webkit 内核浏览器&#xff0c;如 Chrome、Safari&#xff09; /* 隐…

专访海鹏科技董事长秘书、服务总监赵静波:前瞻式智能化管理,为全球售后服务保驾护航

中国企业的出海之路&#xff0c;已不再是单纯的产品、技术或资本的输出&#xff0c;而是涵盖了服务、品牌与文化影响力的全面传播。特别是在售后服务领域&#xff0c;中国企业正以空前的力度提升服务质量&#xff0c;优化服务流程&#xff0c;致力于在全球范围内塑造优质服务的…

卷积神经网络 - 关于LeNet-5的若干问题的解释

结合上一博文所学的LeNet-5&#xff0c;本文我们来围绕LeNet-5的一些问题点进行解释&#xff0c;以便进一步理解LeNet-5。 我们先来回顾一下LeNet-5的网络结构概述&#xff1a; (1) C1层是卷积层&#xff0c;使用6个55的卷积核&#xff0c;得到6组大小为2828 784 的特征映射…

数据库三级填空+应用(2)

sysadmin、dbcreator 数据是面向主题的&#xff08;2&#xff09;、集成的、非易失的、随时间不断变化的数据集合&#xff0c; 数据字典 【答案】完整性约束 数据模型成分 33【解析】顺序图主要用于描述系统内对象之间的消息发送和接收序列。 34如果把舍弃的元组也保存在结果关…