当前位置: 首页 > 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…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

二维数组 行列混淆区分 js

二维数组定义 行 row&#xff1a;是“横着的一整行” 列 column&#xff1a;是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示 第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示 第i行第j列的…...