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

xlsx冻结单元格

news 2026/1/16 5:39:00

说明

因为最近需要实现前端导出 excel 文件，并且对导出文件的样式进行一些修改，比如颜色、字体、合并单元格等，所以我找到了xlsx-style这个项目，它可以对导出的 excel 文件进行一些样式上的修改，这个项目是SheetJs的一个分支。其实SheetJs也是支持修改导出文件的样式的，不过是在它的专业版中， SheetJs 分为社区版和专业版，社区版是开源的，但是却不支持修改导出文件的样式，专业版拥有更多的功能，这其中就包括修改样式，但是如果需要使用专业版，要邮件联系SheetJS 的开发者，去咨询价格，购买它。

另外可以exceljs也可以实现冻结单元格功能，具体可以自行查看说明文档，这里主要介绍xlsx在社区版的情况下如何改造支持冻结单元格功能。

我这里是纯js改造

安装

npm install xlsx xlsx-style --save

准备工作

复制文件

在node_modules/xlsx/dist文件中复制文件：xlsx-extendscript.js

我安装的xlsx的版本是0.18.5

新建纯前端js项目

新建文件夹downExcelTest，将复制过来的文件放到downExcelTest文件夹中，并创建index.html文件

xlsx@0.18.5

安装的xlsx的版本是0.18.5，index.html文件中只需要引入xlsx-extendscript.js即可

xlsx-extendscript.js找到write_ws_xml_sheetviews方法，下面是改造后的

function write_ws_xml_sheetviews(ws, opts, idx, wb) {var sview = ({workbookViewId:"0"});// $FlowIgnoreif((((wb||{}).Workbook||{}).Views||[])[0]) sview.rightToLeft = wb.Workbook.Views[0].RTL ? "1" : "0";// 冻结窗口var pane = null;var freeze = ws['!freeze'];// console.log(freeze)if (freeze !== undefined) {pane = writextag('pane', null, {xSplit: freeze.xSplit, // 冻结列ySplit: freeze.ySplit, // 冻结行topLeftCell: freeze.topLeftCell, // 在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格activePane: freeze.activePane,state: freeze.state || 'frozen'})}return writextag("sheetViews", writextag("sheetView", pane, sview), {});
}

在index.html下载方法中写入

// 冻结第一行和第一列：
worksheet['!freeze'] = {xSplit: "1",  //冻结列ySplit: "1",  //冻结行// topLeftCell: "B2",  //在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格// activePane: "bottomLeft",state: "frozen"
}

完整代码

下面是index.html下载excel完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><button id="btn" onclick="downExcel()">点击下载excel</button></div><script src="./xlsx.extendscript.js"></script><script>function downExcel() {var data = [['allsdkf', 'asdfsdfsdf', 'asdfsdfsdf', 'sdfsdfsdf'],['lowene', 'asdfsdfsdf', 'asdfsdfsdf', 'sdfsdfsdf'],['sfwerwer', 'asdfsdfsdf', 'asdfsdfsdf', 'sdfsdfsdf'],['allserwersdkf', 'asdfsdfsdf', 'asdfsdfsdf', 'sdfsdfsdf']]exportExcel('冻结测试', data)}function exportExcel(title, data, fileName="out.xlsx") {// 样式不起作用，具体可以引入xlsx-style获取pro版var style = {hs: {font: {fz: 16, color: {rgb: '000000'}, bold: true},alignment: {horizontal: 'center', vertical: 'center', wrapText: true}}}var workbook = XLSX.utils.book_new();var worksheet = XLSX.utils.aoa_to_sheet([]);// worksheet['A1'] = {t: 's', v: title, s: style.hs}worksheet["A1"] = {v: "123",t: "s",s: {font: {color: { rgb: "FF0187FA" }},}}XLSX.utils.sheet_add_aoa(worksheet, data, {origin: 'A2'})XLSX.utils.book_append_sheet(workbook, worksheet, 'sheetName')var ranges = {s: {c: 0, r: 0}, e: {c: data.length - 1, r: 0}}worksheet['!merges'] = [ranges]// 冻结第一行和第一列：worksheet['!freeze'] = {xSplit: "0",  //冻结列ySplit: "1",  //冻结行// topLeftCell: "A2",  //在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格state: "frozen"}var wbout = XLSX.write(workbook, {bookType: 'xlsx',bookSST: false,type: 'binary'})console.log(XLSX)var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });saveAs(blob, fileName);}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) & 0xFF;return buf;}function saveAs(url, filename) {if (typeof url === 'object' && url instanceof Blob) {url = URL.createObjectURL(url) }var link = document.createElement("a");link.download = filename;link.href = url;var event;if (window.MouseEvent) event = new MouseEvent('click')else {event = document.createEvent('MouseEvents')event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);}link.dispatchEvent(event)}</script>
</body>
</html>

相关文章：

xlsx冻结单元格

说明 因为最近需要实现前端导出 excel 文件&#xff0c;并且对导出文件的样式进行一些修改&#xff0c;比如颜色、字体、合并单元格等&#xff0c;所以我找到了xlsx-style这个项目&#xff0c;它可以对导出的 excel 文件进行一些样式上的修改&#xff0c;这个项目是SheetJs的一…...

编程日记 2023/10/11 22:32:35

yolov8剪枝实践

本文使用的剪枝库是torch-pruning &#xff0c;实验了该库的三个剪枝算法GroupNormPruner、BNScalePruner和GrowingRegPruner。 安装使用 安装依赖库 pip install torch-pruning 把 https://github.com/VainF/Torch-Pruning/blob/master/examples/yolov8/yolov8_pruning.py&…...

编程日记 2023/10/11 22:31:35

功能基础篇6——系统接口，操作系统与解释器系统

系统 os Python标准库&#xff0c;os模块提供Python与多种操作系统交互的接口 import os import stat# 文件夹 print(os.mkdir(r./dir)) # None 新建单级空文件夹 print(os.rmdir(r./dir)) # None 删除单级空文件夹 print(os.makedirs(r.\dir\dir\dir)) # None 递归创建空…...

编程日记 2023/10/11 22:30:34

由于导线材质不同绕组直流电阻不平衡率超标

实测证明&#xff0c; 有的变压器绕组的直流电阻偏大&#xff0c; 有的偏差较大&#xff0c; 其主要原因是某些导线的铜和银的含量低于国家标准规定限额。 有时即使采用合格的导线&#xff0c; 但由于导线截面尺寸偏差不同&#xff0c; 也可以导致绕组直流电阻不平衡率超标。  …...

编程日记 2023/10/11 22:29:32

选择智慧公厕解决方案，开创智慧城市公共厕所新时代

在城市建设和发展中&#xff0c;公厕作为一个不可或缺的城市基础设施&#xff0c;直接关系到城市形象的提升和居民生活品质的改善。然而&#xff0c;传统的公厕存在着管理不便、卫生状况差、设施陈旧等问题。为了解决这些困扰着城市发展的难题&#xff0c;智慧公厕源头厂家广州…...

编程日记 2023/10/11 22:28:31

FFmpeg 基础模块：AVIO、AVDictionary 与 AVOption

目录 AVIO AVDictionary 与 AVOption 小结 思考 我们了解了 AVFormat 中的 API 接口的功能&#xff0c;从实际操作经验看&#xff0c;这些接口是可以满足大多数音视频的 mux 与 demux&#xff0c;或者说 remux 场景的。但是除此之外&#xff0c;在日常使用 API 开发应用的时…...

编程日记 2023/10/11 22:27:30

代数——第3章——向量空间

第三章 向量空间(Vector Spaces) fmmer mit den einfachsten Beispielen anfangen. (始终从最简单的例子开始。) ------------------------------David Hilbert 3.1 (R^n)的子空间 我们的向量空间的基础模型(本章主题)是n 维实向量空间 的子空间。我们将在本节讨论它。…...

编程日记 2023/10/11 22:26:29

2023年软考网工上半年下午真题

试题一&#xff1a; 阅读以下说明&#xff0c;回答问题1至问题4&#xff0c;将解答填入答题纸对应的解答栏内。 [说明] 某企业办公楼网络拓扑如图1-1所示。该网络中交换机Switch1-Switch 4均是二层设备&#xff0c;分布在办公楼的各层&#xff0c;上联采用干兆光纤。核心交换…...

编程日记 2023/10/11 22:25:29

Flutter 直接调用so动态库，或调用C/C++源文件内函数

开发环境 MacBook Pro Apple M2 Pro | macOS Sonoma 14.0 Android Studio Giraffe | 2022.3.1 Patch 1 XCode Version 15.0 Flutter 3.13.2 • channel stable Tools • Dart 3.1.0 • DevTools 2.25.0 先说下历程&#xff0c;因为我已经使用了Flutter3的版本&#xff0c;起初…...

编程日记 2023/10/11 22:24:27

elasticsearch(ES)分布式搜索引擎03——（RestClient查询文档，ES旅游案例实战）

目录 3.RestClient查询文档3.1.快速入门3.1.1.发起查询请求3.1.2.解析响应3.1.3.完整代码3.1.4.小结 3.2.match查询3.3.精确查询3.4.布尔查询3.5.排序、分页3.6.高亮3.6.1.高亮请求构建3.6.2.高亮结果解析 4.旅游案例4.1.酒店搜索和分页4.1.1.需求分析4.1.2.定义实体类4.1.3.定…...

编程日记 2023/10/11 22:23:26

198、RabbitMQ 的核心概念 及 工作机制概述； Exchange 类型 及 该类型对应的路由规则

JMS 也是一种消息机制 AMQP ( Advanced Message Queuing Protocol ) 高级消息队列协议 ★ RabbitMQ的核心概念 Connection&#xff1a; 代表客户端&#xff08;包括消息生产者和消费者&#xff09;与RabbitMQ之间的连接。 Channel&#xff1a; 连接内部的Channel。 Exch…...

编程日记 2023/10/11 22:22:25

系统架构设计：18 论基于DSSA的软件架构设计与应用

目录 一 特定领域软件架构DSSA 1 DSSA 2 DSSA的基本活动和产物 （1）DSSA的基本活动和产物...

编程日记 2023/10/11 22:21:24

Android原生实现控件outline方案（API28及以上）

Android控件的Outline效果的实现方式有很多种&#xff0c;这里介绍一下另一种使用Canvas.drawPath()方法来绘制控件轮廓Path路径的实现方案&#xff08;API28及以上&#xff09;。 实现效果&#xff1a; 属性 添加Outline相关属性&#xff0c;主要包括颜色和Stroke宽度&…...

编程日记 2023/10/11 22:20:23

ROS学习笔记(六)---服务通信机制

1. 服务通信是什么 在ROS中&#xff0c;服务通信机制是一种点对点的通信方式&#xff0c;用于节点之间的请求和响应。它允许一个节点&#xff08;服务请求方&#xff09;向另一个节点&#xff08;服务提供方&#xff09;发送请求&#xff0c;并等待响应。 服务通信机制在ROS中…...

编程日记 2023/10/11 22:18:22

常见的C/C++开源QP问题求解器

1. qpSWIFT qpSWIFT 是面向嵌入式和机器人应用的轻量级稀疏二次规划求解器。它采用带有 Mehrotra Predictor 校正步骤和 Nesterov Todd 缩放的 Primal-Dual Interioir Point 方法。 开发语言&#xff1a;C文档&#xff1a;传送门项目&#xff1a;传送门 2. OSQP OSQP&#…...

编程日记 2023/10/11 22:17:20

前端axios发送请求，在请求头添加参数

1.在封装接口传参时&#xff0c;定义形参&#xff0c;params是正常传参&#xff0c;name则是我想要在请求头传参 export function getCurlList (params, name) {return request({url: ********,method: get,params,name}) } 2.接口调用 const res await getCurlList(params,…...

编程日记 2023/10/11 22:16:19

CTF Misc(3)流量分析基础以及原理

前言 流量分析在ctf比赛中也是常见的题目&#xff0c;参赛者通常会收到一个网络数据包的数据集&#xff0c;这些数据包记录了网络通信的内容和细节。参赛者的任务是通过分析这些数据包&#xff0c;识别出有用的信息&#xff0c;例如登录凭据、加密算法、漏洞利用等等 工具安装…...

编程日记 2023/10/11 22:15:19

Telink泰凌微TLSR8258蓝牙开发笔记（二）

在开发过程中遇到了以下问题&#xff0c;记录一下 1.在与ios手机连接后&#xff0c;手机app使能notify&#xff0c;设备与手机通过write和notify进行数据交换&#xff0c;但是在连接传输数据一端时间后&#xff0c;设备收到write命令后不能发出notify命令&#xff0c;打印错误…...

编程日记 2023/10/11 22:14:18

vue3+elementPlus：el-tree复制粘贴数据功能，并且有弹窗组件

在tree控件里添加contextmenu属性表示右键点击事件。 因右键自定义菜单事件需要获取当前点击的位置&#xff0c;所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置。 //html <div class"box-list"><el-tree ref"treeRef" node-key"id…...

编程日记 2023/10/11 22:13:17

JTS:10 Crosses

这里写目录标题 版本点与线点与面线与面线与线 版本 org.locationtech.jts:jts-core:1.19.0 链接: github public class GeometryCrosses {private final GeometryFactory geometryFactory new GeometryFactory();private static final Logger LOGGER LoggerFactory.getLog…...

编程日记 2023/10/11 22:12:16

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/15 5:26:24

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/15 5:05:24

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/1/15 6:35:49

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/1/15 6:40:37

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/15 5:27:03

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/15 12:34:48

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/1/15 5:44:15