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

vue导入导出excel、设置单元格文字颜色、背景色、合并单元格(使用xlsx-js-style库)

 

npm i xlsx-js-style
<template><button @click="download">下载 Excel 表格</button><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="维生素A" label="维生素A" width="180" /><el-table-column prop="维生素D" label="维生素D" /><el-table-column prop="维生素E" label="维生素E" width="180" /><el-table-column prop="维生素B1" label="维生素B1" width="180" /><el-table-column prop="维生素B2" label="维生素B2" width="180" /><el-table-column prop="维生素B6" label="维生素B6" width="180" /></el-table>
</template>
<script setup>
import { reactive } from "vue";
import XLSX from "xlsx-js-style";const tableData = reactive([{name: "下限",维生素A: 500,维生素D: 6,维生素E: 10,维生素B1: 500,维生素B2: 800,维生素B6: 300,date: "/",},{name: "上限",维生素A: 1200,维生素D: 10,维生素E: 20,维生素B1: 1000,维生素B2: 1600,维生素B6: 600,date: "/",},{name: "Charlie",维生素A: 674,维生素D: 7.2,维生素E: 21,维生素B1: 798,维生素B2: 1200,维生素B6: 485,date: "2024.12.29",},{name: "Alice",维生素A: 690,维生素D: 8.1,维生素E: 18,维生素B1: 698,维生素B2: 1112,维生素B6: 674,date: "2024.12.29",},{name: "Bob",维生素A: 719,维生素D: 9,维生素E: 9.8,维生素B1: 498,维生素B2: 1342,维生素B6: 241,date: "2024.12.29",},{name: "Charlie",维生素A: 674,维生素D: 7.2,维生素E: 21,维生素B1: 798,维生素B2: 1200,维生素B6: 485,date: "2024.12.30",},{name: "Alice",维生素A: 690,维生素D: 8.1,维生素E: 18,维生素B1: 698,维生素B2: 1112,维生素B6: 674,date: "2024.12.30",},{name: "Bob",维生素A: 719,维生素D: 9,维生素E: 9.8,维生素B1: 498,维生素B2: 1342,维生素B6: 241,date: "2024.12.30",},{name: "Charlie",维生素A: 684,维生素D: 5.9,维生素E: 9,维生素B1: 478,维生素B2: 1462,维生素B6: 123,date: "2024.12.30",},
]);// 获取上下限
const lowerLimit = tableData[0];
const upperLimit = tableData[1];// 判断每列的值,超出范围时给相应单元格添加红色样式
const getFormattedData = () => {const formattedData = [];const merges = []; // 用于存储需要合并的单元格// 插入下限行并设置背景色为灰色const lowerLimitRow = { name: "下限" };for (const [key, value] of Object.entries(lowerLimit)) {if (key !== "name") {lowerLimitRow[key] = {v: value,s: {font: { color: { rgb: "000000" } },fill: { fgColor: { rgb: "D3D3D3" } }, // 设置背景色为灰色},};} else {lowerLimitRow[key] = {v: value,s: {font: { color: { rgb: "000000" } },fill: { fgColor: { rgb: "D3D3D3" } }, // 设置背景色为灰色},};}}formattedData.push(lowerLimitRow);// 插入上限行并设置背景色为灰色const upperLimitRow = { name: "上限" };for (const [key, value] of Object.entries(upperLimit)) {if (key !== "name") {upperLimitRow[key] = {v: value,s: {font: { color: { rgb: "000000" } },fill: { fgColor: { rgb: "D3D3D3" } }, // 设置背景色为灰色},};} else {upperLimitRow[key] = {v: value,s: {font: { color: { rgb: "000000" } },fill: { fgColor: { rgb: "D3D3D3" } }, // 设置背景色为灰色},};}}formattedData.push(upperLimitRow);let currentDate = "";let startRow = 2; // 从第三行开始(下限和上限已经插入)// 遍历表格数据for (let i = 2; i < tableData.length; i++) {const row = tableData[i];const formattedRow = { name: row.name };// 遍历每一列for (const [key, value] of Object.entries(row)) {if (key === "name" || key === "date") {formattedRow[key] = value;// 检查日期是否与上一行相同,若相同则合并单元格if (row.date === currentDate) {// 继续处理} else {if (currentDate !== "") {// 合并日期单元格merges.push({ s: { r: startRow, c: 0 }, e: { r: i, c: 0 } });}currentDate = row.date;startRow = i + 1;}continue;}// 获取下限和上限const lower = lowerLimit[key];const upper = upperLimit[key];// 判断是否超出范围let cellStyle = {};if (value < lower) {cellStyle = { font: { color: { rgb: "FF0000" } } }; // 红色字体} else if (value > upper) {cellStyle = { font: { color: { rgb: "FF0000" } } }; // 红色字体}// 将样式和数据一起保存formattedRow[key] = { v: value, s: cellStyle };}formattedData.push(formattedRow);}// 合并最后一个日期的单元格merges.push({s: { r: startRow, c: 0 },e: { r: tableData.length, c: 0 },});console.log("merges", merges);return { formattedData, merges };
};// 下载 Excel 文件
const download = () => {const { formattedData, merges } = getFormattedData();const reformattedData = formattedData.map((item) => {// 创建一个新的对象,确保 `date` 始终在最前面const { date, ...rest } = item;return { date, ...rest };});// 转换格式化后的表格数据为工作表const ws = XLSX.utils.json_to_sheet(reformattedData);// 添加合并单元格的逻辑ws["!merges"] = merges;// 创建一个新的工作簿并添加工作表const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, "Sheet1");// 导出 Excel 文件XLSX.writeFile(wb, "example.xlsx");
};
</script>

相关文章:

vue导入导出excel、设置单元格文字颜色、背景色、合并单元格(使用xlsx-js-style库)

npm i xlsx-js-style <template><button click"download">下载 Excel 表格</button><el-table :data"tableData" style"width: 100%"><el-table-column prop"date" label"日期" width"180…...

电子电气架构 --- 中央处理器HPC及软件架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所谓鸡汤,要么蛊惑你认命,要么怂恿你拼命,但都是回避问题的根源,以现象替代逻辑,以情绪代替思考,把消极接受现实的懦弱,伪装成乐观面对不幸的…...

代码实战:基于InvSR对视频进行超分辨率重建

Diffusion Models专栏文章汇总:入门与实战 前言:上一篇博客《使用Diffusion Models进行图像超分辩重建》中讲解了InvSR的原理,博主实测的效果是非常不错的,和PASD基本持平。这篇博客就讲解如何利用InvSR对视频进行超分辨率重建。 目录 环境准备 代码讲解 环境准备...

一文读懂主成分分析法(PCA)

主成分分析法&#xff08;PCA&#xff09; 主成分分析法&#xff08;PCA&#xff09;主成分分析的基本思想主成分的计算主成分分析的原理主成分分析的特点主成分分析的应用 主成分分析法&#xff08;PCA&#xff09; 主成分分析的基本思想 PCA是1901 年Pearson在研究回归分析…...

Redis(基础篇 + 实践篇 )

01 | 基本架构&#xff1a;一个键值数据库包含什么&#xff1f; Redis 作为一个内存数据存储系统&#xff0c;它的架构设计非常简洁&#xff0c;但功能非常强大。理解其核心架构对高效使用 Redis 至关重要。 客户端与服务器架构&#xff1a; 客户端通过 TCP 协议连接到 Redis …...

高质量C++小白教程:2.10-预处理器简介

当你在编译项目时,你可能希望编译器完全按照你编写的方式编译每一个代码文件,当事实并非如此。 相反,在编译之前,每一个.cpp文件都会经历一个预处理的阶段,在此阶段中,称为预处理器的程序对代码文件的文本进行各种更改. 预处理器实际上不会以任何方式修改原始代码文件,预处理…...

一、二极管(模电理论篇)

导论&#xff1a;PN结&#xff08;结电容&#xff09;是构成二极管&#xff0c;三极管&#xff0c;场效应管的原理基础 1.二极管特性&#xff08;单向导电性&#xff09; 1.1 P型半导体与N型半导体 在单晶体硅&#xff08;原子核为正四价电子&#xff0c;可以形成四条共价键&…...

JAVA学习笔记_JVM

文章目录 初识jvm内存结构程序计数器(寄存器) 栈问题辨析内存溢出 线程诊断本地方法栈Heap堆内存溢出内存诊断 方法区内存溢出常量池 stringTable直接内存垃圾回收 初识jvm JRE JVM 基础类库 JDK JRE 编译工具 JavaSE JDK IDE工具 JavaEE JDK 应用服务器 IDE工具 jvm是…...

SQL 中复杂 CASE WHEN 嵌套逻辑优化

目标&#xff1a;优化复杂的 CASE WHEN 逻辑&#xff0c;提升 SQL 语句的可读性与执行效率&#xff0c;减少多层嵌套带来的复杂性。 1. CASE WHEN 的常见问题 嵌套过深&#xff1a;多个条件判断嵌套&#xff0c;难以阅读和维护。重复逻辑&#xff1a;相似逻辑在多个分支中重复…...

STM32-笔记34-4G遥控灯

4G接线 一、项目需求 服务器通过4G模块远程遥控开关灯。 二、项目实现 复制项目文件夹38-wifi控制风扇项目 重命名为39-4G遥控点灯 打开项目文件 加载文件 main.c #include "sys.h" #include "delay.h" #include "led.h" #include "ua…...

被催更了,2025元旦源码继续免费送

“时间从来不会停下&#xff0c;它只会匆匆流逝。抓住每一刻&#xff0c;我们才不会辜负自己。” 联系作者免费领&#x1f496;源&#x1f496;码。 三联支持&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 更多内容敬请期待。如有需要源码可以联系作者免…...

Java(day1)

注释 在Java中注释分为单行注释、多行注释还有文档注释 //我是单行注释/*我 是多行 注释 *//** 我是文档注释*/ 关键字 关键字&#xff1a;是被Java赋予了特定含义的英文单词 特点&#xff1a;关键字的字母都是c 在常用的代码编辑器中关键字都有特殊的高亮标记 在这个里…...

PDF文件提示-文档无法打印-的解决办法

背景信息 下载了几个签名的PDF文件&#xff0c;想要打印纸质版&#xff0c;结果打印时 Adobe Acrobat Reader 提示【文档无法打印】: 解决办法 网上的方案是使用老版本的PDF阅读器&#xff0c; 因为无法打印只是一个标识而已。 PDF文件不能打印的五种解决方案-zhihu 这些方…...

ubuntu操作系统安装SSH服务

1、更新仓库 sudo apt-get update 2、安装SSH服务 #安装SSH服务 apt-get install openssh-server#启用SSH服务 service ssh start#查看SSH服务运行状态 service ssh status 3、修改SSH配置文件 sudo vi /etc/ssh/sshd_config 4、开启ssh端口 sudo ufw allow ssh 5、重启SSH…...

Beamer-LaTeX学习(教程批注版)【1】

该文档总体由beamer-latex的教程而来&#xff0c;由耳东小白以自身学习路径整理。因其中要点基本按照教程的顺序和结构整理&#xff0c;故而不能称之为完全原创&#xff0c;但也不是翻译&#xff0c;更不是抄袭&#xff0c;是个人自学笔记和批注&#xff0c;其中添加了小白个人…...

IIS设置IP+端口号外网无法访问的解决方案

在IIS将站点设置为IP端口访问&#xff0c;假设端口为8080&#xff0c;设好后&#xff0c;服务器上可以访问&#xff0c;外网无法访问。 通常是端口8080没有加入【入站规则】的缘故&#xff0c;将8080端口加入【入站规则】即可&#xff0c;操作如下&#xff1a; 一、ctrlr 输入 …...

Markdown段落的空行缩进用法

Markdown段落的空行缩进用法。 前言语法详解●正文●段落●不分段换行●缩进 使用场景及实例小结其他文章快来试试吧&#x1f970; Markdown段落&#xff0c;分割线的用法 &#x1f448;点击这里也可查看 前言 段落由一句或多句连续的文本组成&#xff0c;通过一个或多个空行…...

[paddle] 非线性拟合问题的训练

利用paddlepaddle建立神经网络&#xff0c;模拟有限个数据的非线性拟合 本文仍然考虑 f ( x ) sin ⁡ ( x ) x f(x)\frac{\sin(x)}{x} f(x)xsin(x)​ 函数在区间 [-10,10] 上固定数据的拟合。 import paddle import paddle.nn as nn import numpy as np import matplotlib.…...

每日一学——监控工具(Grafana)

2.2 Grafana 2.2.1 数据源配置 嘿&#xff0c;各位小伙伴们&#xff01;既然我们已经有了Prometheus这位超级英雄来帮我们收集数据&#xff0c;那么接下来我们就需要一位艺术家来把这些枯燥的数据变成美丽的图画。这就是Grafana出场的时候了&#xff01;Grafana是一款非常流行…...

FreshTomato 路由器固件常见配置以及踩坑记录

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 在上一篇文章《网件 R6400 梅林固件恢复官方固件后刷入 FreshTomato》中&#xff0c;我将网件 R6400 刷入了 FreshTomato 固件&#xff0c;目前已经使用了大半个月了&#xff0c;稳定性比起 380.70_0-X7.9…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...