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

【日常记录】【插件】excel.js导出的时候给单元格设置下拉选择、数据校验等

news 2025/11/2 0:39:01

文章目录

    • 1. 代码基本结构
    • 2. 导出的excel 某单元格的值设置为下拉选择
    • 3. 如何把下拉选择项设置为动态
    • 4. 单元格设置校验、提示
    • 5. 在WPS上的设置

1. 代码基本结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<script>const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet("导入数据明细", { properties: { tabColor: { argb: 'FFC0000' } } }); // 创建工作表const worksheet2 = workbook.addWorksheet("工作表2"); // 创建工作表worksheet.views = [{state: 'frozen',ySplit: 2,}];// 设置列worksheet.columns = [{header: "下拉选择",width: 60,}]worksheet.getCell(`A2`).dataValidation = {type: "list",allowBlank: true,formulae: ['"One,Two,Three,Four"'],// formulae: ['"' + Object.values(fieldMap.SFLogisticsType).join(",") + '"'],};workbook.xlsx.writeBuffer().then((buffer) => {const blob = new Blob([buffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});let aEl = document.createElement("a");aEl.style = "display: none";aEl.download = `测试excel ${new Date().getTime()}.xlsx`;aEl.href = window.URL.createObjectURL(blob);// 创建blob 文件链接document.body.appendChild(aEl);aEl.click();document.body.removeChild(aEl);window.URL.revokeObjectURL(aEl.href); // 销毁链接}).catch((err) => {console.error(err)});</script><body></body></html>

2. 导出的excel 某单元格的值设置为下拉选择

在 excel.js 官方文档的，数据验证 文章中有详细说明

验证类型

类型描述
list定义一组离散的有效值。Excel 将在下拉菜单中提供这些内容，以便于输入
whole该值必须是整数
decimal该值必须是十进制数
textLength该值可以是文本，但长度是受控的
custom自定义公式控制有效值

运算符

对于 list 或 custom 以外的其他类型，以下运算符会影响验证：

运算符描述
between值必须介于公式结果之间
notBetween值不能介于公式结果之间
equal值必须等于公式结果
notEqual值不能等于公式结果
greaterThan值必须大于公式结果
lessThan值必须小于公式结果
greaterThanOrEqual值必须大于或等于公式结果
lessThanOrEqual值必须小于或等于公式结果
  worksheet.getCell(`A2`).dataValidation = {type: "list", // 单元格类型allowBlank: true, // 是否可以为空formulae: ['"One,Two,Three,Four"'], // 可选值};

在这里插入图片描述

现在这个样子就是这个单元格的值是下拉选择

3. 如何把下拉选择项设置为动态

一般这个下拉选择项的值，可能来源于码表，需要调接口查询，然后 设置上去

  worksheet.getCell(`A2`).dataValidation = {type: "list", // 单元格类型allowBlank: true, // 是否可以为空// formulae: ['"One,Two,Three,Four"'], // 可选值formulae: ['"' + ['小学', '中学', '大学', '研究生'].join(",") + '"'],};

要注意他这个格式

[' 逗号拼接的每一项 ']

逗号拼接的每一项，左右两边还有加上 双引号

在这里插入图片描述

4. 单元格设置校验、提示

  worksheet.getCell(`A2`).dataValidation = {type: "list", // 单元格类型allowBlank: true, // 是否可以为空// formulae: ['"One,Two,Three,Four"'], // 可选值formulae: ['"' + ['小学', '中学', '大学', '研究生'].join(",") + '"'],operator: 'equal', // 运算符showErrorMessage: true, // 如若填错是否显示错误信息errorStyle: 'error', // 错误类型errorTitle: '提示', // 错误标题error: '请选择下拉列表的项'};

如若在单元格随便输入， 就会出现这个提示
在这里插入图片描述

设置单元格提示

  worksheet.getCell(`A2`).dataValidation = {type: "list", // 单元格类型allowBlank: true, // 是否可以为空// formulae: ['"One,Two,Three,Four"'], // 可选值formulae: ['"' + ['小学', '中学', '大学', '研究生'].join(",") + '"'],operator: 'equal', // 运算符showErrorMessage: true, // 如若填错是否显示错误信息errorStyle: 'error', // 错误类型errorTitle: '提示', // 错误标题error: '请选择下拉列表的项', // 错误具体信息showInputMessage: true, // 用户输入时，是否展示提示框promptTitle: '输入提示',// 提示标题prompt: '请点击，下箭头，选择项'// 提示具体信息};

在这里插入图片描述

5. 在WPS上的设置

  1. 点击有下拉选择的单元格
  2. 点击 数据
  3. 点击有效性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章：

【日常记录】【插件】excel.js导出的时候给单元格设置下拉选择、数据校验等

文章目录 1. 代码基本结构2. 导出的excel 某单元格的值设置为下拉选择3. 如何把下拉选择项设置为动态4. 单元格设置校验、提示5. 在WPS上的设置 1. 代码基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><…...

编程日记 2024/7/19 18:40:08

分布式 I/O 系统Modbus TCP 耦合器BL200

BL200 耦合器是一个数据采集和控制系统&#xff0c;基于强大的 32 位微处理器设计&#xff0c;采用 Linux 操作系统&#xff0c;可以快速接入现场 PLC、SCADA 以及 ERP 系统&#xff0c; 内置逻辑控制、边缘计算应用&#xff0c;支持标准 Modbus TCP 服务器通讯&#xff0c;以太…...

编程日记 2024/7/19 18:38:06

人工智能导论-机器学习

机器学习概述 概述 本章主要介绍的机器学习的概念、发展历程、发展趋势、相关应用&#xff0c;着重拓展机监督学习和无监督学习的相关知识。 重点&#xff1a;机器学习的定义和应用&#xff1b; 难点&#xff1a;机器学习算法及分类。 机器学习 - 重要性 MachineLeaning出…...

编程日记 2024/7/19 18:34:02

计算机网络——网络层（路由选择协议、路由器工作原理、IP多播、虚拟专用网和网络地址转换）

目录 路由选择协议 因特网的路由选择协议特点 路由信息协议RIP RIP衡量目的网络距离 RIP选择路由器的方式 RIP具有以下三个重要特点 RIP的基本工作流程 RIP的距离向量算法 ​编辑 ​编辑 RIP存在的问题——“坏消息传播得慢” RIP的封装 开放最短路径优先协议OSPF…...

编程日记 2024/7/19 18:33:01

对接企业微信API自建应用配置企业可信IP

前言 为了实现系统调用团队会议功能&#xff0c;组织发起企业微信会议&#xff0c;于是需要和企业微信做API对接。对接过程很难受&#xff0c;文档不清晰、没有SDK、没有技术支持甚至文档报文和实际接口报文都不匹配&#xff0c;只能说企业微信的API是从业以来见过的最难用的AP…...

编程日记 2024/7/19 18:31:59

Windows右键新建Markdown文件类型配置 | Typora | VSCode

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 今天毛毛张分享的是如何在右键的新建菜单中添加新建MarkdownFile文件&#xff0c;这是毛毛张分享的关于Typora软件的相关知识的第三期 文章目录 1.前言&#x1f3dd;…...

编程日记 2024/7/19 18:30:59

PyTorch构建一个肺部CT图像分类模型来分辨肺癌

当你有5万个标注的肺部CT DICOM图像数据&#xff0c;并且希望使用PyTorch构建一个肺部CT图像分类模型来分辨肺癌&#xff0c;以下是详细的步骤和示例代码&#xff1a; 数据准备 首先&#xff0c;确保你的数据集被正确分为训练集、验证集和测试集&#xff0c;并且每个图像都有相…...

编程日记 2024/7/19 18:29:58

MySQL简介及数据库

mysql简介 mysql是一个轻量级关系型数据库管理系统&#xff0c;具有体积小&#xff0c;速度快&#xff0c;开源的优点 sql是一种结构化查询语言(Structured Query Language)&#xff0c;专门用来管理和处理关系型数据库的标准化编程语言&#xff0c;mysql实现了SQL标准&#xf…...

编程日记 2024/7/19 18:28:57

服务器基础1

服务器基础复习01 1.环境部署 系统&#xff1a;华为欧拉系统 网络简单配置nmtui 因为华为欧拉系统密码需要复杂度 所以我们可以进入后更改密码 echo 123 | passwd --stdin root也可以 echo "root:123" | chpasswd2.关闭防火墙&#xff0c;禁用SElinux 首先先关…...

编程日记 2024/7/19 18:27:56

＜数据集＞光伏板缺陷检测数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;2400张 标注数量(xml文件个数)&#xff1a;2400 标注数量(txt文件个数)&#xff1a;2400 标注类别数&#xff1a;4 标注类别名称&#xff1a;[Crack,Grid,Spot] 序号类别名称图片数框数1Crack8688922Grid8248843S…...

编程日记 2024/7/19 18:25:54

leetcode 513. 找树左下角的值

给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7提示: 二叉树的节点个数的范围是 [1,104]-231 < Node.val &…...

编程日记 2024/7/19 18:17:48

C++并发编程实战学习笔记

一、C的并发&#xff1a; 多进程并发&#xff1a; 将应用程序分为多个独立的进程&#xff0c;它们在同一时刻运行&#xff0c;就像同 时进行网页浏览和文字处理一样。独立的进程可以通过进程间常规的通信渠道传递讯息(信号、套接字、文件、管道等等)。不过&#xff0c;这种进程…...

编程日记 2024/7/19 18:15:45

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【25】【分布式事务】

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【25】【分布式事务】 本地事务事务的基本性质事务的隔离级别&#xff08;下面四个越往下&#xff0c;隔离级 别越高&#xff0c;并发能力越差&#xff09;事务的传播行为&#xff08;是否…...

编程日记 2024/7/19 18:14:44

HC05主从一体蓝牙模块的裸机使用——单片机＜--＞蓝牙模块

HC-05是一种常用的蓝牙模块&#xff0c;具有低功耗、低成本、易于使用的特点。它可以实现与其他蓝牙设备&#xff08;如手机、电脑等&#xff09;进行无线通信。HC-05蓝牙模块具有串口通信接口&#xff0c;可以通过串口与主控制器&#xff08;如Arduino、Raspberry Pi等&#x…...

编程日记 2024/7/19 18:12:41

“点点通“餐饮点餐小程序-计算机毕业设计源码11264

"点点通"餐饮点餐小程序 XXX专业XX级XX班&#xff1a;XXX 指导教师&#xff1a;XXX 摘要 随着中国经济的飞速增长&#xff0c;消费者的智能化水平不断提高&#xff0c;许多智能手机和相关的软件正在得到更多的关注和支持。其中&#xff0c;微信的餐饮点餐小程序更…...

编程日记 2024/7/19 18:11:40

C#知识|账号管理系统-账号信息管理界面[1]：账号分类选择框、Panel面板设置

哈喽，你好啊，我是雷工！ 前一节实现了多条件查询后端代码的编写， 接下来继续学习账号信息管理界面的功能编写，本节主要记录账号分类选择框和Panel的设置， 以下为学习笔记。 01 功能说明 本节实现以下功能： ①：账号分类选择框只能选择，无法自由输入； ②：账号分类框默认…...

编程日记 2024/7/19 18:10:39

Meta即将推出4000亿的Llama 3 超级AI模型，或将改写大语言模型竞争格局！｜TodayAI

2024年4月&#xff0c;科技巨头Meta发布了其最新的AI大型语言模型——Llama 3&#xff0c;该模型基于一个至少比前代产品Llama 2大七倍的数据集&#xff0c;展现出前所未有的性能。在最初发布时&#xff0c;Llama 3提供了8B和70B两种参数规模的版本&#xff0c;并迅速超越了Goo…...

编程日记 2024/7/19 18:09:38

数据挖掘新技能：Python爬虫编程指南

Python爬虫的优势 Python之所以成为数据爬取的首选语言&#xff0c;主要得益于其丰富的库和框架支持。以下是一些常用的库&#xff1a; Requests&#xff1a;用于发送HTTP请求&#xff0c;简单易用&#xff0c;是Python爬虫的基础库。BeautifulSoup&#xff1a;用于解析HTML文…...

编程日记 2024/7/19 18:06:32

object-C 解答算法:移动零(leetCode-283)

移动零(leetCode-283) 题目如下图:(也可以到leetCode上看完整题目,题号283) 解题思路: 本质就是把非0的元素往前移动,接下来要考虑的是怎么移动,每次移动多少? 这里需要用到双指针,i 记录每次遍历的元素值, j 记录“非0元素值”需要移动到的位置; 当所有“非0元素值”都移…...

编程日记 2024/7/19 18:04:30

靖江美食元宇宙

关于“靖江美食元宇宙”的具体信息&#xff0c;搜索结果中并未提供直接相关的详细描述。不过&#xff0c;搜索结果显示了有关元宇宙在食品领域的应用和探索&#xff0c;例如食品元宇宙的概念、不同品牌尝试进入元宇宙市场的例子等。这些信息表明&#xff0c;元宇宙技术正在被用…...

编程日记 2024/7/19 18:03:29

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/11/1 23:39:16

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/10/31 17:03:04

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/10/11 22:46:21

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/10/28 0:58:21

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/10/30 7:54:56

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/10/19 15:13:54

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/10/25 18:25:42

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/9/27 0:41:04

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2025/10/30 18:02:54