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

前端插件使用xlsx-populate,花样配置excel内容,根据坐添加标替换excel内容,修改颜色,合并单元格...。

需求要求:业务人员有个非常复杂得excel表格,各种表头等,但是模板是固定得。当然也可以实现在excel上搞出各种表格,但是不如直接用已有模板替换其中要动态得内容方便,这里我们用到CSDN得 xlsx-populate  插件。

实列中我们使用node做一个服务

一、首先创建一个空白文件夹  my-xlsx-populate

1、创建index.html文件

这里得html主要用来点击操作作用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Excel 文件处理</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f4f4f9;}button {padding: 10px 20px;background-color: #007BFF;color: #fff;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #0056b3;}</style>
</head><body><button id="processButton">处理文件</button><script>const processButton = document.getElementById('processButton');processButton.addEventListener('click', async () => {try {const response = await fetch('/process', {method: 'POST',headers: {'Content-Type': 'application/json'}});if (response.ok) {const blob = await response.blob();const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = '修改后.xlsx';a.click();window.URL.revokeObjectURL(url);} else {const errorText = await response.text();alert(`处理文件时出错: ${errorText}`);}} catch (error) {alert(`网络请求出错: ${error.message}`);}});</script>
</body></html>

1、创建server.js文件

const express = require('express');
const XlsxPopulate = require('xlsx-populate');
const path = require('path');
const fs = require('fs');const app = express();// 检查 uploads 目录是否存在,不存在则创建
const uploadDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadDir)) {fs.mkdirSync(uploadDir);
}// 处理静态文件,使得前端页面可以被访问
app.use(express.static(__dirname));// 处理文件处理请求
app.post('/process', async (req, res) => {try {// 获取 uploads 目录下的所有文件const files = fs.readdirSync(uploadDir);if (files.length === 0) {console.error('uploads 目录中没有文件');return res.status(400).send('uploads 目录中没有文件');}// 选择第一个文件进行处理const selectedFile = path.join(uploadDir, files[0]);console.log('选定文件:', selectedFile);// 检查文件扩展名const fileExtension = path.extname(selectedFile).toLowerCase();if (fileExtension !== '.xlsx') {console.error('文件扩展名不正确:', fileExtension);return res.status(400).send('仅支持 .xlsx 文件');}try {// 检查文件是否可读fs.accessSync(selectedFile, fs.constants.R_OK);// 读取 Excel 文件const workbook = await XlsxPopulate.fromFileAsync(selectedFile);console.log('成功读取文件:', selectedFile);const sheet = workbook.sheet(0);// 获取第一行const firstRow = sheet.row(1);// 示例修改:在 A1 单元格写入特定文本sheet.cell('B1').value('此文件已被处理');sheet.cell('F9').value(22.00);sheet.cell('C9').value('测试文件内容替换');// 生成修改后的文件路径const outputPath = path.join(__dirname, 'output.xlsx');await workbook.toFileAsync(outputPath);// 检查修改后的文件是否存在if (!fs.existsSync(outputPath)) {console.error('修改后的文件未生成:', outputPath);return res.status(500).send('修改后的文件未生成');}// 对文件名进行严格编码const originalFileName = '修改后.xlsx';const encodedFileName = encodeURIComponent(originalFileName).replace(/'/g, '%27');// 设置响应头res.setHeader('Content-Disposition', `attachment; filename="${encodedFileName}"`);res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');// 发送修改后的文件给客户端下载res.download(outputPath, originalFileName, async (err) => {if (err) {console.error('下载文件时出错:', err);res.status(500).send('下载文件时出错');}try {// 删除临时文件if (fs.existsSync(selectedFile)) {fs.unlinkSync(selectedFile);}if (fs.existsSync(outputPath)) {fs.unlinkSync(outputPath);}} catch (unlinkErr) {console.error('删除临时文件时出错:', unlinkErr);}});} catch (parseError) {console.error('解析 Excel 文件时出错:', parseError.message);res.status(500).send(`解析 Excel 文件时出错,请检查文件是否损坏或格式是否正确: ${parseError.message}`);}} catch (error) {console.error('处理文件时出错:', error.message);res.status(500).send(`处理文件时出错: ${error.message}`);}
});// 启动服务器
const port = 3000;
app.listen(port, () => {console.log(`服务器运行在端口 ${port}`);
});

3.my-xlsx-populate目录中下创建uploads文件里面存放 .xlxs文件模板

3.my-xlsx-populate目录中右键打开CMD

安装依赖:

npm init -y
npm install express multer xlsx-populate
具体结构:

启动服务器:运行 server.js 文件

node server.js

 打开页面

在浏览器中访问 http://localhost:3000

运行后下载文件打开:

server.js中代码对应exce代码中得坐标

下面我们会详细介绍一下 xlsx-populate ,这做效果演示

下载修改完得excel文件

xlsx-populate介绍

xlsx-populate 主要是为 Node.js 环境设计的,因为它依赖于一些仅在 Node.js 环境中可用的功能和库,比如文件系统访问(fs 模块)等。这意味着它不能直接在浏览器端的 JavaScript 中使用,因为浏览器环境缺乏对本地文件系统的直接访问权限,并且存在安全限制。

生产环境中Linux中可以使用pm2来运行server.js文件保持node运行。

主要功能

  • 读写Excel文件:可以打开现有的 .xlsx 文件进行编辑或创建新的文件。
  • 数据处理:支持对单元格的数据进行各种操作,如设置值、公式计算等。
  • 格式调整:能够修改单元格的样式,包括字体大小、颜色、背景色等。
  • 图片插入:支持在工作表中添加图片。
  • 图表支持:可以在工作表内生成图表。

  1. 示例修改:在单元格写入特定文本
            sheet.cell('B1').value('此文件已被处理');sheet.cell('F9').value(22.00);sheet.cell('C9').value('测试文件内容替换');   

  

  2. 设置公式
sheet.cell('D1').formula('SUM(F9:F10)');
3.设置样式
sheet.cell('B1').style({fontColor: 'FF0000', // 红色bold: true,horizontalAlignment: 'center'
});

3.插入图片
const fs = require('fs');
const imageBuffer = fs.readFileSync('path/to/image.png');sheet.addImage({image: imageBuffer,type: 'picture',position: {x: 5, // 列号y: 5, // 行号}
});

4.添加或删除行/列
// 添加一行在第3行的位置
sheet.insertRow(3);// 删除第4行
sheet.deleteRow(4);

5.设置列宽和行高
// 设置列宽
sheet.column('C').width(20);// 设置行高
sheet.row(9).height(30);

更多高级和实用的操作方法:

6. 数据验证(Data Validation)

你可以为单元格添加数据验证规则。

sheet.cell('A1').dataValidation({type: 'list',allowBlank: true,formula1: '"Apple,Banana,Cherry"'
});
7.条件格式(Conditional Formatting)

为单元格或范围设置条件格式。

sheet.range('A1:A10').conditionalFormat({type: 'cellIs',operator: 'greaterThan',formula: 50,style: {fill: 'FFFF00' // 黄色背景}
});

8.添加图表

可以在工作表中插入图表。

sheet.addChart({type: 'column', // 图表类型range: sheet.range('A1:B10'), // 数据范围position: {x: 12, // 列号y: 12  // 行号},width: 400,height: 300
});
9. 复制和移动区域

可以复制或移动指定的区域。

// 复制 A1:B2 区域到 C3
sheet.range('A1:B2').copyTo(sheet.range('C3'));// 移动 A1:B2 区域到 D4
sheet.range('A1:B2').moveTo(sheet.range('D4'));
10.获取单元格值和属性

获取特定单元格的值、公式或其他属性。

const value = sheet.cell('A1').value(); // 获取单元格值
const formula = sheet.cell('A1').formula(); // 获取单元格公式
const style = sheet.cell('A1').style(); // 获取单元格样式
11.批量操作

使用批量操作可以提高性能,尤其是在处理大量数据时。

sheet.batch(() => {for (let i = 1; i <= 100; i++) {sheet.cell(`A${i}`).value(i);}
});
12.设置页眉和页脚、

可以为工作表设置页眉和页脚。

sheet.headerFooter({oddHeader: '&C&"Arial,Bold"Page &P of &N',oddFooter: '&L&"Arial,Italic"Confidential&R&D&T'
});
13. 设置打印区域

可以指定打印区域和打印标题行/列。

sheet.printArea('A1:D20'); // 设置打印区域
sheet.printTitles({rows: '1:1', // 设置第一行为标题行columns: 'A:A' // 设置第一列为标题列
});
14.保存到流(Stream)

可以将修改后的文件保存到一个流中,而不是直接保存到文件系统。

const fs = require('fs');
const writeStream = fs.createWriteStream('output.xlsx');workbook.toStream().pipe(writeStream);
15.冻结窗格

你可以设置工作表中的冻结窗格,方便查看大量数据时固定某些行或列。

sheet.freezePanes('B2'); // 冻结 B2 左上方的所有单元格
16.隐藏行列

可以隐藏指定的行或列。

// 隐藏第3行
sheet.row(3).hidden(true);// 隐藏第C列
sheet.column('C').hidden(true);
17.保护工作表

可以设置工作表的保护功能,防止未经授权的修改。

sheet.protect({password: 'your-password',selectLockedCells: false,selectUnlockedCells: true
});
18. 设置超链接

可以在单元格中插入超链接。

sheet.cell('A1').hyperlink('https://www.example.com');
sheet.cell('A1').value('点击这里访问 Example.com');
19.设置注释

可以为单元格添加注释。

sheet.cell('A1').comment({text: '这是一个示例注释',author: '作者名字'
});
20. 批量设置样式

可以通过 range 方法对多个单元格应用相同的样式。

sheet.range('A1:C3').style({fontColor: '0000FF', // 蓝色字体bold: true,horizontalAlignment: 'center'
});
21.设置单元格类型

可以设置单元格的数据类型(如日期、数字、文本等)。

sheet.cell('A1').type('date'); // 设置单元格为日期类型
sheet.cell('A1').value(new Date()); // 设置当前日期sheet.cell('B1').type('number'); // 设置单元格为数字类型
sheet.cell('B1').value(12345); // 设置数值
22.导入和导出 JSON 数据

可以从 JSON 数据导入到 Excel 文件,或者将 Excel 文件导出为 JSON 数据。

// 导入 JSON 数据到 A1 开始的区域
const jsonData = [{ "Name": "John", "Age": 30, "City": "New York" },{ "Name": "Anna", "Age": 22, "City": "London" }
];
sheet.importData(jsonData, 'A1');// 将 A1 开始的区域导出为 JSON 数据
const exportedData = sheet.exportData('A1:C3');
console.log(exportedData);

相关文章:

前端插件使用xlsx-populate,花样配置excel内容,根据坐添加标替换excel内容,修改颜色,合并单元格...。

需求要求&#xff1a;业务人员有个非常复杂得excel表格&#xff0c;各种表头等&#xff0c;但是模板是固定得。当然也可以实现在excel上搞出各种表格&#xff0c;但是不如直接用已有模板替换其中要动态得内容方便&#xff0c;这里我们用到CSDN得 xlsx-populate 插件。 实列中我…...

分布式大语言模型服务引擎vLLM论文解读

论文地址&#xff1a;Efficient Memory Management for Large Language Model Serving with PagedAttention 摘要 大语言模型&#xff08;LLMs&#xff09;的高吞吐量服务需要一次对足够多的请求进行批处理。然而&#xff0c;现有系统面临困境&#xff0c;因为每个请求的键值…...

如何开发一个大模型应用?

1. 背景 AIGC技术的突破性进展彻底改变了技术开发的范式&#xff0c;尤其是以GPT为代表的LLM&#xff0c;凭借其强大的自然语言理解与生成能力&#xff0c;迅速成为全球科技领域的焦点。2023年末&#xff0c;随着ChatGPT的爆火&#xff0c;AIGC技术从实验室走向规模化应用&…...

01-零基础入门嵌入式系统

1.什么是嵌入式系统 首先我们要知道计算机系统分为大型机、通用计算机和嵌入式系统三大类。 计算机系统的发展&#xff0c;经历了由1台计算机系统为N个人服务的大型机时代到由1台计算机系统为1个人服务的PC时代&#xff0c;正在步入由N台计算机系统为1个人服务的嵌入式时代。 嵌…...

【机器学习】CNN与Transformer的表面区别与本质区别

仅供参考 表面区别 1. 结构和原理: CNN:主要通过卷积层来提取特征,这些层通过滑动窗口(卷积核)捕捉局部特征,并通过池化层(如最大池化)来降低特征的空间维度。CNN非常适合处理具有网格状拓扑结构的数据,如图像。Transformer:基于自注意力(Self-Attention)机制,能…...

[数据结构]二叉搜索树详解

目录 一、二叉搜索树的概念 二、二叉搜索树的性能分析 三、二叉搜索树的中序遍历用于排序去重 四、二叉搜索树的查找 1、查找的非递归写法 2、查找的递归写法 五、二叉搜索树的插入 1、插入的非递归写法 2、插入的递归写法 六、二叉搜索树的删除 1、删除的非递归写法…...

撕碎QT面具(2):groupBox内容居中显示

问题描述&#xff1a; 当笔者在GroupBox中使用Form Layout构建图中内容时&#xff0c;不能居中显示。 解决方案&#xff1a; 1、首先在form layout左右添加横向弹簧&#xff0c;并ctrl进行选中这三个控件。点击水平布局&#xff0c;让中间的控件不变形。 2、选中groupBox&#…...

SpringBoot速成(14)文件上传P23-P26

1. 什么是 multipart/form-data&#xff1f; 想象一下&#xff0c;你有一个包裹要寄给朋友&#xff0c;但包裹里有不同类型的东西&#xff1a;比如一封信&#xff08;文字&#xff09;、一张照片&#xff08;图片&#xff09;和一个小礼物&#xff08;文件&#xff09;。为了确…...

图论入门算法:拓扑排序(C++)

上文中我们了解了图的遍历(DFS/BFS), 本节我们来学习拓扑排序. 在图论中, 拓扑排序(Topological Sorting)是对一个有向无环图(Directed Acyclic Graph, DAG)的所有顶点进行排序的一种算法, 使得如果存在一条从顶点 u 到顶点 v 的有向边 (u, v) , 那么在排序后的序列中, u 一定…...

PTA:使用指针方式求一个给定的m×n矩阵各行元素之和

本题要求编写程序&#xff0c;使用指针方式求一个给定的mn矩阵各行元素之和。&#xff08;例如&#xff1a;scanf("%d", *(matrix i) j); // 使用指针方式访问二维数组元素&#xff09; 输入格式: 输入第一行给出两个正整数m和n&#xff08;1<m<6, 1<n&…...

【iOS】SwiftUI状态管理

State ObservedObject StateObject 的使用 import SwiftUIclass CountModel: ObservableObject {Published var count: Int 0 // 通过 Published 标记的变量会触发视图更新init() {print("TimerModel initialized at \(count)")} }struct ContentView: View {State…...

自制简单的图片查看器(python)

图片格式&#xff1a;支持常见的图片格式&#xff08;JPG、PNG、BMP、GIF&#xff09;。 import os import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTkclass ImageViewer:def __init__(self, root):self.root rootself.root.…...

ChatGPT行业热门应用提示词案例-AI绘画类

AI 绘画指令是一段用于指导 AI 绘画工具&#xff08;如 DALLE、Midjourney 等&#xff09;生成特定图像的文本描述。它通常包含场景、主体、风格、色彩、氛围等关键信息&#xff0c;帮助 AI 理解创作者的意图&#xff0c;从而生成符合要求的绘画作品。 ChatGPT 拥有海量的知识…...

Visual Studio Code的下载安装与汉化

1.下载安装 Visual Studio Code的下载安装十分简单&#xff0c;在本电脑的应用商店直接下载安装----注意这是社区版-----一般社区版就足够用了---另外注意更改安装地址 2.下载插件 重启后就是中文版本了...

分词器(Tokenizer) | 有了分词器,为什么还需要嵌入模型

文章目录 什么是tokenizer有了分词器&#xff0c;为什么还需要嵌入模型分词器为什么在transformers 里Hugging Face的Tokenizer大模型不同tokenizer训练效果对比分词器库选择当前顶尖大模型所采用的 Tokenizer 方法与词典大小 参考 什么是tokenizer Tokenizers huggingface官方…...

scala中 隐式转换

一、 隐式转换&#xff1a; 编译器 偷偷地&#xff0c;自动地帮我们把一种数据类型转换为另一种类型 例如&#xff1a; int --> double object test {// 复习隐式转换// 隐式转换&#xff1a; 编译器 偷偷地&#xff0c;自动地帮我们把一种数据类型转换为另一…...

实战开发coze应用-姓氏头像生成器(上)

​欢迎关注【AI技术开发者】 上次&#xff0c;我们开发了一个对话形式的头像生成器智能体&#xff08;Agents&#xff09;&#xff0c;广受大家欢迎。 同时也接收到一些用户的反馈&#xff0c;生成前无法看到头像样式、初次使用不会用等等。 对此&#xff0c;我准备使用Coze开…...

【Node.js】express框架

目录 1初识express框架 2 初步使用 2.1 安装 2.2 创建基本的Web服务器 2.3 监听方法 2.3.1 监听get请求 2.3.2 监听post请求 2.4 响应客户端 2.5 获取url中的参数(get) 2.5.1 获取查询参数 2.5.2 获取动态参数 2.6 托管静态资源 2.6.1 挂载路径前缀 2.6.2 托管多…...

JS逆向实战三:1688工厂信息

本文说明&#xff1a;B站学习笔记整理&#xff0c;仅供学习参考~~ 网站&#xff1a;https://sale.1688.com/factory/category.html 1. 页面分析与解密 刷新页面&#xff0c;通过对关键词进行搜索&#xff0c;实现接口定位。 通过多次刷新页面或者页面翻页&#xff0c;找到变化…...

Pipeline 获取 Jenkins参数

Pipeline 获取 Jenkins参数 Jenkins 提供了一系列默认的环境变量&#xff0c;这些变量在构建过程中可以被使用。以下是一些常见的 Jenkins 默认环境变量&#xff1a; WORKSPACE: 当前构建的工作目录路径 JOB_NAME: 当前构建的作业名称 BUILD_NUMBER: 当前构建的编号&#xff…...

ESP32 在IDF_V5.3.1版本下实现AP无线热点模式!(带WIFI事件处理)

一、什么是ESP32的AP无线热点模式&#xff1f; ESP32 的 AP&#xff08;Access Point&#xff09;模式 是指 ESP32 作为无线接入点运行&#xff0c;它自己创建一个 Wi-Fi 网络&#xff0c;允许其他设备&#xff08;如手机、电脑、平板等&#xff09;直接连接到它上面&#xff0…...

Elasticsearch:探索 CLIP 替代方案

作者&#xff1a;来自 Elastic Jeffrey Rengifo 及 Toms Mura 分析图像到图像和文本到图像搜索的 CLIP 模型的替代方案。 在本文中&#xff0c;我们将通过一个模拟房地产网站的实际示例介绍 CLIP 多模态模型&#xff0c;探索替代方案&#xff0c;并分析它们的优缺点&#xff0c…...

Nginx 在Linux中安装、使用

Nginx 在Linux中安装、使用 一、官网下载Nginx 官网地址&#xff1a;http://nginx.org/en/download.html 二、上传到服务器解压 1、上传到指定的服务器地址 上传的地址自己决定&#xff0c;我上传到 /data/home/prod/nginx/ 2、解压 使用命令&#xff1a; tar -zxvf “你的N…...

CodeGPT 使用教程(适用于 VSCode)

CodeGPT 使用教程&#xff08;适用于 VSCode&#xff09; CodeGPT 是一个 VSCode 插件&#xff0c;可以让你在代码编辑器中直接调用 GPT 进行代码补全、优化、调试等操作。以下是详细的安装和使用步骤&#xff1a; 1. 安装 CodeGPT 方式 1&#xff1a;从 VSCode 插件市场安装…...

Python常见面试题的详解9

1. 如何找出整数数组中第二大的数 要点 定义一个函数用于在整数数组里找出第二大的数。 若数组元素少于 2 个&#xff0c;则返回 None。 借助两个变量 first 和 second 来跟踪最大数和第二大数。 可以添加异常处理&#xff0c;以应对输入非整数数组的情况。 若数组包含重复…...

【Spring+MyBatis】_图书管理系统(下篇)

图书管理系统上篇、中篇如下&#xff1a; 【SpringMyBatis】_图书管理系统&#xff08;上篇&#xff09;-CSDN博客 【SpringMyBatis】_图书管理系统&#xff08;中篇&#xff09;-CSDN博客 目录 功能5&#xff1a;删除图书 6.1 约定前后端交互接口 6.2 后端接口 6.3 前端…...

若依-@Excel新增注解numberFormat

Excel注解中原本的scale会四舍五入小数&#xff0c;导致进度丢失 想要的效果 显示的时候保留两个小数真正的数值是保留之前的数值 还原过程 若以中有一個專門的工具类&#xff0c;用来处理excel的 找到EXCEL导出方法exportExcel()找到writeSheet,写表格的方法找到填充数据的方法…...

Cherry-Studio下载安装教程,AI面向开发者的工具或平台(付安装包)

文章目录 一、Cherry Studio是什么&#xff1f;二、功能特点 一、Cherry Studio是什么&#xff1f; Cherry Studio 是一款开源跨平台的多模型服务桌面客户端&#xff0c;集成超 300 个大语言模型&#xff0c;内置 300 多个预配置 AI 助手&#xff0c;支持多格式文件处理、全局…...

多信道接收机

线性调频&#xff08;LFM&#xff09;信号&#xff0c;模拟多个目标反射的回波信号&#xff0c;并进行混频和滤波处理。 % 参数设置 c 3e8; % 光速 (m/s) f0 8.566e9; % 载波频率 (Hz) T 10e-6; % 脉冲持续时间 (s) B 100e6; % 信号带宽 (Hz) mu B / T; % 调频斜率 (Hz/s…...

修改项目的一些前端记录(自用)

<div style"background:#f2f2f2;position:absolute;top:75px;width:10%;bottom:0px">\<ol class"tree">\<li>\<label for"folder1" class"folderOne foldertop"><img src"common/img/时间.png" …...