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

xlsx冻结单元格

news 2025/9/19 3:14:11

说明

因为最近需要实现前端导出 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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/9/9 14:51:22

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/9/18 10:34:36

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/6 0:10:01

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/9/3 20:57:36

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/8/24 18:47:31

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/9/3 23:35:33