前端插件使用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);

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

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

相关文章

未来AI方向落地场景:小语言模型,super_private_agent

未来AI方向落地场景:小语言模型,super_private_agent 目录 未来AI方向落地场景:小语言模型,super_private_agent小语言模型super - private - agent(注重隐私的智能代理)碳基生命和硅基生命交互界面面向agent的专用交互协议和数据接口从web平台经济到网络平台举例说明社交…

Coze扣子新功能详解

今晚(2025-01-24)扣子再次进行更新 主要更新内容&#xff1a; 搭建小程序和 H5 用户界面时&#xff0c;支持使用音频组件播放音频内容 数据库操作体验提升 界面优化&#xff1a;对数据库详情界面进行了重新设计&#xff0c;并将工作流运行数据库的测试数据位置从原工作流底…

汇能感知的光谱相机/模块产品有哪些?

CM020A 分辨率&#xff1a;1600H1200V 光谱范围&#xff1a;350~950nm 光谱分辨率&#xff1a;1nm 接口&#xff1a;USB2.0 帧率&#xff1a;16001200 (6帧) 输出格式&#xff1a;Raw 8bit FOV&#xff1a;D73.5H58.8V44.1 相机尺寸&#xff1a;505055mm VM02S10 分辨率…

Ollama 本地GUI客户端:为DeepSeek用户量身定制的智能模型管理与交互工具

Ollama 本地GUI客户端&#xff1a;为DeepSeek用户量身定制的智能模型管理与交互工具 相关资源文件已经打包成EXE文件&#xff0c;可双击直接运行程序&#xff0c;且文章末尾已附上相关源码&#xff0c;以供大家学习交流&#xff0c;博主主页还有更多Python相关程序案例&#xf…

OpenMv识别色块通过串口发给STM32

硬件连接 1、Openmv端 这里OpenMV端仅作为数据的发送端,所以只需要共地,以及OpenMV的TX(P4)与开发板的RX端连接即可。 2、STM32端 将开发板连接STM芯片RX端与转串口TX端的跳帽取下,再将OpenMV的TX端(P4)与STM的RX连接。如果使用USB转TTL则将TTL的RX端与STM的TX端连接…

以太网交换基础(涵盖二层转发原理和MAC表的学习)

在当今的网络世界中&#xff0c;以太网交换技术是局域网&#xff08;LAN&#xff09;的核心组成部分。无论是企业网络、学校网络还是家庭网络&#xff0c;以太网交换机都扮演着至关重要的角色。本文将详细介绍以太网交换的基础知识&#xff0c;包括以太网协议、帧格式、MAC地址…

菜鸟之路Day15一一IO流(一)

菜鸟之路Day15一一IO流&#xff08;一&#xff09; 作者&#xff1a;blue 时间&#xff1a;2025.2.8 文章目录 菜鸟之路Day15一一IO流&#xff08;一&#xff09;0.概述1.初识IO流1.1.什么是IO流&#xff1f;1.2.IO流的作用1.3.IO流的分类 2.IO流的体系结构3.字节输出流的基本…

汽车零部件开发应该具备哪些编程思维?

目录 1、功能安全思维 2、实时性与确定性思维 3、可靠性和冗余思维 4、硬件软件协同思维 5、CAN总线通信思维 6、故障诊断和自诊断思维 7、功耗优化思维 8、软件更新和版本管理思维 9、用户体验与安全性思维 汽车零部件开发中&#xff0c;嵌入式软件在车辆系统中的作用…

idea拉取合并后的分支

文章目录 远程拉取代码.更新本地库拉取后本地库就有了合并后的代码 远程拉取代码.更新本地库 拉取后本地库就有了合并后的代码

1-18 GIT设置公钥

1-1 GIT如何设置公钥 1.0 注册账号 这个应该都是会的&#xff0c;就不做介绍了 2.0 设置公钥 PWD的作用是查看文件的路径 ssh-keygen -t ed25519 -C "Gitee SSH Key" 读取公钥文件&#xff1a; cat ~/.ssh/id_ed25519.pub 3.0 测试 查看绑定的用户名和邮箱&#xff1…

【MySQL】 常见数据类型

MySQL常见数据类型 1.整数类型2.浮点数类型3.定点数类型4.bit类型5.字符串类型 5.1char和varchar类型5.2日期类型和时间类型5.3enum和set类型 1.整数类型 整数类型默认都是有符号整数 类型名称 字节数 类型说明 tinyint 1 带符号的范围-128127&#xff0c;无符号范围…

DeepSeek 部署中的常见问题及解决方案

DeepSeek 作为一款智能语义搜索框架&#xff0c;其本地化部署在实际操作中可能因环境配置、权限管理、硬件资源等因素遇到多种问题。本文结合当前市面上的实践经验&#xff0c;整合了部署中的常见问题及解决方案&#xff0c;帮助用户高效排查和优化部署流程。 一、权限不足问题…

《机器学习数学基础》补充资料:求解线性方程组的克拉默法则

《机器学习数学基础》中并没有将解线性方程组作为重点&#xff0c;只是在第2章2.4.2节做了比较完整的概述。这是因为&#xff0c;如果用程序求解线性方程组&#xff0c;相对于高等数学教材中强调的手工求解&#xff0c;要简单得多了。 本文是关于线性方程组的拓展&#xff0c;供…

Jenkins介绍

什么是Jenkins Jenkins 是一个开源的自动化服务器&#xff0c;主要用于持续集成和持续交付&#xff08;CI/CD&#xff09;。它帮助开发团队自动化构建、测试和部署软件&#xff0c;从而提高开发效率和软件质量。 如果一个系统是前后端分离的开发模式&#xff0c;在集成阶段会需…

module ‘cv2.dnn‘ has no attribute ‘DictValue‘解决办法

module ‘cv2.dnn‘ has no attribute ‘DictValue‘解决办法 pip install opencv-python4.7.0.72 -i https://pypi.tuna.tsinghua.edu.cn/simple 测试&#xff1a; python -c"import cv2"

【全栈】SprintBoot+vue3迷你商城-细节解析(2):分页

【全栈】SprintBootvue3迷你商城-细节解析&#xff08;2&#xff09;&#xff1a;分页 往期的文章都在这里啦&#xff0c;大家有兴趣可以看一下 后端部分&#xff1a; 【全栈】SprintBootvue3迷你商城&#xff08;1&#xff09; 【全栈】SprintBootvue3迷你商城&#xff08;…

kubeadm拉起的k8s集群证书过期的做法集群已奔溃也可以解决

kubeadm拉起的k8s集群证书过期的做法 这个是很久之前遇到的了&#xff0c;今天有空&#xff08;心血来潮&#xff09;就都回忆回忆写在这里为爱发光&#xff0c;部分内容来自arch先生&#xff08;死党&#xff09;的帮助。有时候有很多部门提了建k8s的需求&#xff0c;有些是临…

Webpack 基础入门

一、Webpack 是什么 Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。在 Web 开发中&#xff0c;我们的项目会包含各种类型的文件&#xff0c;如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件&#xff0c;以便在浏览器中高效加载。它就像…

torchsparse安装过程的问题

1、项目要求torchsparse githttps://github.com/mit-han-lab/torchsparse.gitv1.4.0 2、torch1.8.1cu111 nvcc--version&#xff1a;11.1 这个版本的cuda匹配的gcc、g经常是7.5。设置为7.5. &#xff08;这个gcc、g版本修改不一定&#xff0c;可以先进行后面的&#xff0c…

嵌入式音视频开发(二)ffmpeg音视频同步

系列文章目录 嵌入式音视频开发&#xff08;零&#xff09;移植ffmpeg及推流测试 嵌入式音视频开发&#xff08;一&#xff09;ffmpeg框架及内核解析 嵌入式音视频开发&#xff08;二&#xff09;ffmpeg音视频同步 嵌入式音视频开发&#xff08;三&#xff09;直播协议及编码器…