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

文章目录

    • 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自定义公式控制有效值

运算符

对于 listcustom 以外的其他类型,以下运算符会影响验证:

运算符描述
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. 点击有效性

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

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

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

相关文章

Gitee使用教程2-克隆仓库(下载项目)并推送更新项目

一、下载 Gitee 仓库 1、点击克隆-复制代码 2、打开Git Bash 并输入复制的代码 下载好后&#xff0c;找不到文件在哪的可以输入 pwd 找到仓库路径 二、推送更新 Gitee 项目 1、打开 Git Bash 用 cd 命令进入你的仓库&#xff08;我的仓库名为book&#xff09; 2、添加文件到 …

容器化部署prometheus后再监控docker容器

一、主机部署Prometheus、cadvisor、grafana、node-exporter 1、部署cadvisor收集节点容器信息 docker run -v /:/rootfs:ro -v /var/run:/var/run/:rw -v /sys:/sys:ro -v /var/lib/docker:/var/lib/docker:ro -p 8080:8080 --detachtrue --namecadvisor google/cadvisor 2、…

在线 PDF 制作者泄露用户上传的文档

两家在线 PDF 制作者泄露了数万份用户文档&#xff0c;包括护照、驾驶执照、证书以及用户上传的其他个人信息。 我们都经历过这样的情况&#xff1a;非常匆忙&#xff0c;努力快速制作 PDF 并提交表单。许多人向在线 PDF 制作者寻求帮助&#xff0c;许多人的祈祷得到了回应。 …

PolarisMesh源码系列--Polaris-Go注册发现流程

导语 北极星是腾讯开源的一款服务治理平台&#xff0c;用来解决分布式和微服务架构中的服务管理、流量管理、配置管理、故障容错和可观测性问题。在分布式和微服务架构的治理领域&#xff0c;目前国内比较流行的还包括 Spring Cloud&#xff0c;Apache Dubbo 等。在 Kubernete…

golang开发环境搭建与踩坑记录

文章目录 一、安装下载1、go环境2、ide 二、基本使用1、运行2、结构体与方法函数指针3、闭包4、指针5、map6、接口7、异常 三、包管理1、go mod语法2、项目下载所有依赖 一、安装下载 1、go环境 下载地址&#xff1a;https://go.dev/dl/ 或者&#xff1a;https://golang.goog…

算法基础之回溯法

本文将详细介绍回溯法的基本原理和适用条件&#xff0c;并通过经典例题辅助读者理解回溯法的思想、掌握回溯法的使用。本文给出的例题包括&#xff1a;N皇后问题、子集和问题。 算法原理 在问题的解空间树中&#xff0c;回溯法按照深度优先的搜索策略&#xff0c;从根结点出发…

[开源]语雀+Vercel:打造免费个人博客网站

大家好,我是白露。 今天我想和大家分享我的今年的第一个开源项目 —— 基于语雀+Nextjs+Vercel实现免费的博客系统。 简单来说,你在语雀写博客,然后直接一键同步到个人网站上,网站自动部署! 而且,整个过程几乎不需要额外的成本,也不用充值语雀超级会员,hh。这个项目…

Teamviewer删除可信任设备

目前基本上主流的远程连接软件都有限制&#xff0c;要么收费&#xff1b; Teamviewer可信任设备有限&#xff0c;超出限制就会提示错误&#xff0c;需要删除多余的设备才能登陆账号&#xff01; 需要登陆这个网站 Teamviewer Management console&#xff0c;才能修改&#xff…

FastAPI -- 第三弹(自定义响应、中间件、代理、WebSockets)

路径操作的高级配置 OpenAPI 的 operationId from fastapi import FastAPIapp FastAPI()# 通过 operation_id 参数设置 app.get("/items/", operation_id"some_specific_id_you_define") async def read_items():return [{"item_id": "F…

【C语言】全面解析冒泡排序

文章目录 什么是冒泡排序&#xff1f;冒泡排序的基本实现代码解释冒泡排序的优化冒泡排序的性能分析冒泡排序的实际应用结论 在C语言编程中&#xff0c;排序算法是一个非常基础且重要的概念。冒泡排序作为最简单、最易理解的排序算法之一&#xff0c;广泛应用于各种编程教学和实…

vi 编辑器快捷生成 main 函数和基本框架

step1: 执行 sudo vi /etc/vim/vimrc &#xff08;修改vimrc需要管理员权限&#xff1a;sudo&#xff09; step2:输入用户密码&#xff0c;回车, 编辑vimrc文件 step3:在尾行输入以下代码&#xff08;可复制&#xff09; map mf i#include<stdio.h><ESC>o#includ…

.net dataexcel 脚本公式 函数源码

示例如: ScriptExec(""sum(1, 2, 3, 4)"") 结果等于10 using Feng.Excel.Builder; using Feng.Excel.Collections; using Feng.Excel.Interfaces; using Feng.Script.CBEexpress; using Feng.Script.Method; using System; using System.Collections.Gen…

Gitee 使用教程1-SSH 公钥设置

一、生成 SSH 公钥 1、打开终端&#xff08;Windows PowerShell 或 Git Bash&#xff09;&#xff0c;通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519 -C "Gitee SSH Key" 随后摁三次回车键&#xff08;Enter&#xff09; 2、查看生成的 SSH…

探索Puppeteer的强大功能:抓取隐藏内容

背景/引言 在现代网页设计中&#xff0c;动态内容和隐藏元素的使用越来越普遍&#xff0c;这些内容往往只有在特定的用户交互或条件下才会显示出来。为了有效地获取这些隐藏内容&#xff0c;传统的静态爬虫技术往往力不从心。Puppeteer&#xff0c;作为一个强大的无头浏览器工…

【Git】Git Submodules 介绍(通俗易懂,总结了工作完全够用的 submodule 命令)

Git Submodules 介绍 1、为什么你值得读这篇文章&#xff1f;2、为什么有 submodules&#xff1f;3、了解 Git Submodules3.1、如何让一个Git仓库变为另一个Git仓库的 submodule3.2、submodule 的父子关系存在哪里3.3、submodule 的父子关系信息怎么存 4、submodule 开发常用操…

昇思25天学习打卡营第30天 | MindNLP ChatGLM-6B StreamChat

今天是第30天&#xff0c;学习了MindNLP ChatGLM-6B StreamChat。 今天是参加打卡活动的最后一天&#xff0c;经过这些日子的测试&#xff0c;昇思MindSpore效果还是不错的。 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;具有62亿参数&#xff0c;基于 …

vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染

vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染&#xff01;今天和大家分享一下&#xff0c;人气推荐栏目的前端页面如何渲染内容。 经历过上一次的&#xff0c;新鲜好物的栏目渲染之后&#xff0c;我们已经熟练了&#xff0c;vue3的接口调用&#xff0c;数据渲染到页面中的整…

【Android安全】Ubuntu 下载、编译 、刷入Android-8.1.0_r1

0. 环境准备 Ubuntu 16.04 LTS&#xff08;预留至少95GB磁盘空间&#xff0c;实测占94.2GB&#xff09; Pixel 2 XL 要买欧版的&#xff0c;不要美版的。 欧版能解锁BootLoader、能刷机。 美版IMEI里一般带“v”或者"version"&#xff0c;这样不能解锁BootLoader、…

acwing796-子矩阵的和-前缀和

s矩阵是全局变量&#xff0c;维度n*m,从1~n和 1~m存储元素【0】【0】~【0】【m】和【0】【0】~【n】【0】分别存储的都是0.s矩阵刚开始是存储输入的元素&#xff0c;后面用于存储前缀和。 s矩阵的意思是s【i】【j】表示从【0】【0】到【i】【j】为对角线的矩阵里面所有元素的和…

使用 Flask 3 搭建问答平台(三):注册页面模板渲染

前言 前端文件下载 链接https://pan.baidu.com/s/1Ju5hhhhy5pcUMM7VS3S5YA?pwd6666%C2%A0 知识点 1. 在路由中渲染前端页面 2. 使用 JinJa 2 模板实现前端代码复用 一、auth.py from flask import render_templatebp.route(/register, methods[GET]) def register():re…