使用xlsx、xlsx-style导出表格添加背景色;合并单元格部分样式缺失问题解决

这篇说一下使用xlsx-style导出excel时样式的设置。需要安装xlsx、xlsx-style、file-saver插件(file-saver可以不装,用a标签代替也可以),安装时可能会碰到一些报错问题,可以去看下我之前一篇博客:纯前端导出Excel并修改样式

由于上次写的修改样式只关注了单元格的宽度,并没有设置颜色以及没关注到合并的单元格部分样式没设置上等问题,所以这篇来说下。

我们通过xlsx可以通过dom元素、或者数据来生产sheet页,然后我们修改样式就操作对应的sheet页就可以了。

直接上代码如下:

我这个是直接通过传入dom生产的sheet页,也可以通过数据生成sheet页,xlsx都有对应的方法,其实不影响我们修改样式 。主要关注addRangeBorder(给合并行列赋值样式)、setExcelStyle(设置导出Excel样式)这两个方法。

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import XLSXS from 'xlsx-style'/*** 根据DOM进行导出* @param {Element} dom * @param {String} fileName */
export function exportExcelByDom(dom, fileName) {const book = XLSX.utils.book_new()const sheet = XLSX.utils.table_to_sheet(dom)XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')addRangeBorder(sheet['!merges'], sheet) // 给合并行列赋值样式setExcelStyle(sheet) // 设置样式let wbout = XLSXS.write(book, {bookType: 'xlsx',bookSST: false,type: 'binary'})try {FileSaver.saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), fileName);} catch (e) {console.error(e, wbout, '----->>>')}
}// 设置导出Excel样式(统一样式)
function setExcelStyle(data, wpx = 80) {data["!cols"] = []const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows']for (let key in data) {if (data.hasOwnProperty(key)) {if (!excludes.includes(key)) {data[key].s = {alignment: {horizontal: "center", //水平居中对齐vertical: "center", // 垂直居中wrapText: true,},border: {top: {style: 'thin',color: { rgb: '000000' }},bottom: {style: 'thin',color: { rgb: '000000' }},left: {style: 'thin',color: { rgb: '000000' }},right: {style: 'thin',color: { rgb: '000000' }}},// fill: {//   fgColor: { rgb: "00a2ff" },// },font: {sz: 11,},bold: true,numFmt: 0}// 单元格宽度data["!cols"].push({ wpx });// 根据不同行添加单元格背景颜色let color = ''let num = Number(key.slice(1))if (num < 12) {color = 'f8cbad'} else if (num >= 12 && num < 22) {color = '70ad47'} else if (num >= 22 && num < 26) {color = '00b0f0'} else if (num >= 26 && num < 29) {color = 'fff2cc'} else if (num >= 29 && num < 44) {color = 'a9d08e'} else {color = 'bfbfbf'}data[key].s.fill = { fgColor: { rgb: color, patternType: 'solid' } }}}}
}//给合并行列赋值样式
function addRangeBorder (range, ws) {let cols = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];range.forEach(item => {let style = {s: {border: {top: {style: 'thin',color: { rgb: '000000' }},bottom: {style: 'thin',color: { rgb: '000000' }},left: {style: 'thin',color: { rgb: '000000' }},right: {style: 'thin',color: { rgb: '000000' }}}}}// 处理合并行for (let i = item.s.c; i <= item.e.c; i++) {ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style// 处理合并列for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {ws[cols[i] + k] = ws[cols[k] + item.e.r] || style}}})return ws;
}function s2ab(s) {var buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xffreturn buf
}

调用:

exportExcelByDom(document.getElementById('custom-table'), '生产日报表.xlsx')

然后下面是我开发的表格长这个样子:

 

上面两种图片是一个表格哈,比较长,其实下面还有,然后导出的效果是这样子:

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

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

相关文章

AI投资或成科技裁员罪魁祸首

最近的科技裁员让许多人对这个行业的稳定性产生了疑问。然而&#xff0c;仔细观察发现&#xff0c;这些裁员并不是经济困境的迹象&#xff0c;而是科技公司为了重新调整优先事项并投资未来而进行的战略举措。科技行业正投入数十亿美元用于人工智能&#xff08;AI&#xff09;&a…

Redis数据类型-五大基本数据类型

文章目录 Redis五大数据类型String(字符串)List(列表)Set(集合)Hash(哈希)Zset(有序集合) 总结 Redis五大数据类型 String(字符串) String基本命令&#xff1a; 127.0.0.1:6379> set key1 hello #设置值 OK 127.0.0.1:6379> get key1 # 获取值 "hello" …

深入玩转Playwright:高级操作解析与实践

playwright高级操作 iframe切换 ​ 很多时候&#xff0c;网页可能是网页嵌套网页&#xff0c;就是存在不止一个html标签&#xff0c;这时候我们的selenium或者playwright一般来说定位不到&#xff0c;为什么呢&#xff1f; ​ 因为默认是定位到第一个标准的html标签内部。 …

STM32——USART

一、通信 1.1通信是什么&#xff1b; 通信是将一个设备的数据发送到另一个设备中&#xff0c;从而实现硬件的扩展&#xff1b; 1.2通信的目的是什么&#xff1b; 实现硬件的扩展-在STM32中集成了很多功能&#xff0c;例如PWM输出&#xff0c;AD采集&#xff0c;定时器等&am…

小程序样例5:简单登录界面

基本功能 1、头像选择、用户名、密码、昵称选择、性别、城市 2、确认注册跳转 我的页面。 3、其他注册方式跳转用户名 密码登录方式 4、清除 和 密码显示按钮&#xff1a; 5、用户名、密码合法性校验&#xff1a; 6、点击微信图标&#xff0c;调转回微信登录&#xff1a; 代码…

star原则

"STAR" 原则通常用于回答面试或描述工作经验等场景中&#xff0c;以清晰、有条理地传达信息。"STAR" 是 Situation&#xff08;情境&#xff09;、Task&#xff08;任务&#xff09;、Action&#xff08;行动&#xff09;、Result&#xff08;结果&#xf…

P2241 统计方形(数据加强版)题解

题目 有一个nm方格的棋盘&#xff0c;求其方格包含多少正方形、长方形&#xff08;不包含正方形&#xff09;。 输入输出格式 输入格式 一行&#xff0c;两个正整数n,m&#xff08;n≤5000,m≤5000&#xff09;。 输出格式 一行&#xff0c;两个正整数&#xff0c;分别表…

部署YUM仓库服务

一、yum仓库 1. yum简介 yum是一个基于RPM包&#xff08;是Red-Hat Package Manager红帽软件包管理器的缩写&#xff09;构建的软件更新机制&#xff0c;能够自动解决软件包之间的依赖关系。 为什么会有依赖关系的发生 因为linux本身就是以系统简洁为自身优势&#xff0c;所以…

超超超详细讲解TCP三次握手与四次挥手(大图解),值得收藏

TCP 三次握手与四次挥手深入探究 TCP基础知识 TCP 头格式有哪些 TCP首部包括20字节的固定首部部分及长度可变的其他选项&#xff0c;所以TCP首部长度可变。20个字节又分为5部分&#xff0c;每部分4个字节32位&#xff0c;如图中的前5行&#xff0c;每行表示32位。 TCP 头格…

云服务器如何快速部署访问静态页面(个人网站博客等)

1&#xff0c;购买云服务器 2&#xff0c;配置安全项 云服务器ecs下&#xff0c;配置ip、端口所有人都可访问 3&#xff0c;关闭防火墙&#xff0c;将前端静态项目传输到云服务器上 可以使用SecureCRT&#xff0c;本地远程连接到服务器&#xff08;需要用户名与密码&#x…

LVS常用的NAT模式和DR模式实战示例

引言&#xff1a;紧接上文&#xff0c;了解LVS&#xff0c;这一篇就够了-CSDN博客&#xff0c;今天我们对LVS常用的两种模式来进行示例配置演示 LVS-NAT模式 1、环境准备 准备 3 台纯净的虚拟机 关闭防火墙和selinux 例&#xff1a; lvs-server 添加两个网卡 NAT模式 …

基于连续相位负载调制的单输入宽带混合Doherty功率放大器设计(2023.05 MTT)-从理论到ADS版图

基于连续相位负载调制的单输入宽带混合Doherty功率放大器设计-从理论到ADS版图 最近开始搞大论文了&#xff0c;Doherty方面对最新的一些的技术看的比较少&#xff0c;找几个牛逼的学习一下下&#xff0c;虽然最后可能也用不上。已经完成了理论的推导和ADS版图仿真&#xff0c…

4、this指向、动画案例、封装、offset、client、scroll

一、this指向问题 1、在构造函数中this指向实例化对象 2、在自定义对象的函数&#xff08;方法&#xff09;中指向this指向当前的对象 3、在普通函数中this指向window 4、函数中this指向&#xff1a;在事件函数中this指向事件源 5、在定时器函数中this指向window 二、动…

原型链继承: 原理:将父类的实例作为子类的原型

function Father(){this.age10this.phone{first:"华为",second:"小米"}}Father.prototype.getagefunction(){return this.age}function Son(name,money){this.namenamethis.moneymoney}Son.prototypenew Father() //子类型的原型为父类型的一个实例对象Son…

Jython调用openwire库连接activemq转发topic订阅消息到另一个activemq 服务器上 完整代码

以下是一个示例代码&#xff0c;演示如何在Jython中使用OpenWire库连接ActiveMQ&#xff0c;将一个主题&#xff08;topic&#xff09;上的订阅消息转发到另一个ActiveMQ服务器上&#xff1a; from org.apache.activemq import * from org.apache.activemq.transport import *…

7-上传下载

上传下载 首先创建一张上传文件的表&#xff0c;例如&#xff1a; drop table if exists sys_file_info; create table sys_file_info (file_id int(11) not null auto_increment comment 文件id,file_name varchar(50) default …

动态分析C语言代码生成函数调用关系的利器——gprof

大纲 准备工作下载libevent代码安装编译依赖编译libevent 收集运行数据编译插入检测代码的可执行程序收集数据 数据转换环境准备转换为dot 转换为图片环境准备转换图片 参考代码参考资料 gprof是一个C语言程序性能分析工具。在编译期间&#xff0c;我们给编译指令增加-pg选项&a…

第 8 章:Linux中使用时钟、计时器和信号

在本章中&#xff0c;我们将开始探索Linux环境中可用的各种计时器。随后&#xff0c;我们将深入了解时钟的重要性&#xff0c;并探讨UNIX时间的概念。接下来&#xff0c;我们将揭示在Linux中使用POSIX准确测量时间间隔的方法。之后&#xff0c;我们将进入std::chrono的领域&…

20240130收获

el-table-column的formatter属性的回调函数会传给我们row的数据&#xff0c;即直接把整行的数据给到我们了&#xff0c;而不是给我们该列的数据。所以我们应该通过{xx}解构的方式来取我们要的属性。解构的时候&#xff0c;不要写错了&#xff0c;比如obj.name&#xff0c;我们想…

创业7年复盘,中美企业服务市场差异浅析

2024 年伊始&#xff0c;Kyligence 联合创始人兼 CEO 韩卿在公司内部的飞书订阅号发表了多篇 Rethink Data & Analytics 的内部信&#xff0c;分享了对数据与分析行业的一些战略思考&#xff0c;尤其是 AI 带来的各种变化和革命&#xff0c;是如何深刻地影响这个行业乃至整…