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

前端excel带样式导出 exceljs 插件的使用

本来用的xlsx和xlsx-style两个插件,过程一步一个坑,到完全能用要消灭好多bug。这时发现了exceljs,真香😀

在这里插入图片描述

案例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>exceljs 使用</title></head><body><button onclick="exporting()">导出</button><script>function exporting() {// 创建工作簿const workbook = new ExcelJS.Workbook()// 添加工作表const worksheet = workbook.addWorksheet('sheet1')// 设置表头worksheet.columns = [{header: '名次',key: 'sort',width: 10},{header: '班级',key: 'class',width: 20},{header: '姓名',key: 'name',width: 20},{header: '得分',key: 'score',width: 10},]// 添加表体数据worksheet.addRow({sort: 1,class: '前端三班',name: 'Buer',score: 99})worksheet.addRow({sort: 2,class: '前端一班',name: 'Jack',score: 86})worksheet.addRow({sort: 3,class: '前端一班',name: 'Mary',score: 58})// 设置单元格 const aCell = worksheet.getCell('A1')// 1.边框 https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E8%BE%B9%E6%A1%86aCell.border = {top: {style: 'thin'},left: {style: 'thin'},bottom: {style: 'thin'},right: {style: 'thin'},}// 2.填充 https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%A1%AB%E5%85%85aCell.fill = {type: 'pattern',pattern: 'mediumGray',fgColor: {rgb: '#c2c2c2'}}// 设置行样式 https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%AD%97%E4%BD%93worksheet.getRow(1).font = {bold: true,}// 导出表格workbook.xlsx.writeBuffer().then((buffer) => {const blob = new Blob([buffer], {type: ''application/vnd.openxmlformats-officedocument.spreadsheetml.sheet''})const link = document.createElement('a')link.href = URL.createObjectURL(blob)link.download = '测试' + '.xlsx'link.click()URL.revokeObjectURL(link.href) // 下载完成释放掉blob对象})}</script><script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0"></script></body>
</html>

列宽自适应:https://ask.csdn.net/questions/8062252/54484687?spm=1001.2014.3001.5501

相关文章:

前端excel带样式导出 exceljs 插件的使用

本来用的xlsx和xlsx-style两个插件&#xff0c;过程一步一个坑&#xff0c;到完全能用要消灭好多bug。这时发现了exceljs&#xff0c;真香&#x1f600; 案例 <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"view…...

用GOGS搭建GIT服务器

GOGS官网 Gogs: A painless self-hosted Git service 进入文件所在目录 cd /usr/local/develop 解压文件 tar -xvf gogs_0.13.0_linux_amd64.tar.gz 解压之后 进入gogs 目录 cd gogs 创建几个目录 userdata 存放用户数据 log文件存放进程日志 repositories 仓库根目…...

2024年美赛数学建模E题思路分析 - 财产保险的可持续性

# 1 赛题 问题E&#xff1a;财产保险的可持续性 极端天气事件正成为财产所有者和保险公司面临的危机。“近年来&#xff0c;世界已经遭受了1000多起极端天气事件造成的超过1万亿美元的损失”。[1]2022年&#xff0c;保险业的自然灾害索赔人数“比30年的平均水平增加了115%”。…...

哪种安全数据交换系统,可以满足信创环境要求?

安全数据交换系统是一种专门设计用于在不同网络环境之间安全传输数据的技术解决方案。这类系统确保数据在传输过程中的完整性、机密性和可用性&#xff0c;同时遵守相关的数据保护法规和行业标准。 使用安全数据交换系统的原因主要包括以下几点&#xff1a; 1、数据保护&#…...

OfficeWeb365 Readfile 任意文件读取漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…...

机器学习基础、数学统计学概念、模型基础技术名词及相关代码个人举例

1.机器学习基础 &#xff08;1&#xff09;机器学习概述 机器学习是一种人工智能&#xff08;AI&#xff09;的分支&#xff0c;通过使用统计学和计算机科学的技术&#xff0c;使计算机能够从数据中学习并自动改进性能&#xff0c;而无需进行明确的编程。它涉及构建和训练机器…...

小埋的解密游戏的题解

目录 原题描述&#xff1a; 题目描述 输入格式 输出格式 样例 #1 样例输入 #1 样例输出 #1 样例 #2 样例输入 #2 样例输出 #2 提示 主要思路&#xff1a; 代码实现code&#xff1a; 原题描述&#xff1a; 题目描述 小埋最近在玩一个解密游戏&#xff0c;这个游戏…...

idea常用设置

1、内存优化 根据自己电脑本身的内存&#xff0c;对idea安装包里bin目录下的idea64.exe.vmoptions文件进行修改 -server -Xms256m -Xmx2048m -XX:MaxPermSize1024m -XX:ReservedCodeCacheSize256m -ea -Dsun.io.useCanonCachesfalse -Djava.Net.preferIPv4Stacktrue -Djsse.e…...

npm出现 Error: EISDIR: illegal operation on a directory, read

npm出现 Error: EISDIR: illegal operation on a directory, read 一、问题二、解决 一、问题 可能是由于运行了npm config set cafile ""之类的方法,造成了cafile为空 二、解决 文件位于C:\Users\用户名\ 下 找到c盘下的Users下的用户目录&#xff0c;进入找到.n…...

简易计算器的制作(函数指针数组的实践)

个人主页&#xff08;找往期文章包括但不限于本期文章中不懂的知识点&#xff09;&#xff1a; 我要学编程(ಥ_ಥ)-CSDN博客 前期思路&#xff08;菜单的制作等&#xff09;&#xff1a;利用C语言的分支循环少量的函数知识写一个猜数字的小游戏-CSDN博客 计算器的制作其实与游…...

HBase相关面试准备问题

为什么选择HBase 1、海量存储 Hbase适合存储PB级别的海量数据&#xff0c;在PB级别的数&#xff0c;能在几十到几百毫秒内返回数据。这与Hbase的极易扩展性息息相关。正是因为Hbase良好的扩展性&#xff0c;才为海量数据的存储提供了便利。 2、列式存储 这里的列式存储其实说的…...

sklearn实现数据标准化(Standardization)和归一化(Normalization)

标准化&#xff08;Standardization&#xff09; sklearn的标准化过程&#xff0c;即包括Z-Score标准化&#xff0c;也包括0-1标准化&#xff0c;并且即可以通过实用函数来进行标准化处理&#xff0c;同时也可以利用评估器来执行标准化过程。接下来我们分不同功能以的不同实现…...

做技术的应该是没有什么你不会

这句话放在现在很多年轻人的观念来评价&#xff0c;肯定是错的。但小编一直捧为真理&#xff0c;也一直践行着。 我记不得这话可能也是谁给我讲的。 先讲故事吧。 小编刚参加工作是做技术支持&#xff0c;我所在公司是给一些软件开发企业提供智能卡读写机具&#xff0c;并配…...

MySQL进阶45讲【10】MySQL为什么有时候会选错索引?

1 前言 前面我们介绍过索引&#xff0c;在MySQL中一张表其实是可以支持多个索引的。但是&#xff0c;写SQL语句的时候&#xff0c;并没有主动指定使用哪个索引。也就是说&#xff0c;使用哪个索引是由MySQL来确定的。 大家有没有碰到过这种情况&#xff0c;一条本来可以执行得…...

网络安全-端口扫描和服务识别的几种方式

禁止未授权测试&#xff01;&#xff01;&#xff01; 前言 在日常的渗透测试中&#xff0c;我们拿到一个ip或者域名之后&#xff0c;需要做的事情就是搞清楚这台主机上运行的服务有哪些&#xff0c;开放的端口有哪些。如果我们连开放的端口和服务都不知道&#xff0c;下一步针…...

【分布式】雪花算法学习笔记

雪花算法学习笔记 来源 https://pdai.tech/md/algorithm/alg-domain-id-snowflake.html概述 雪花算法是推特开源的分布式ID生成算法&#xff0c;以划分命名空间的方式将64位分割成多个部分&#xff0c;每一个部分代表不同的含义&#xff0c;这种就是将64位划分成不同的段&…...

6.函数表达式 - JS

函数表达式 function (someArgs) { someStatements } function name(someArgs) { someStatements } (someArgs) > { someStatements }函数表达式就是要&#xff0c;在一个表达式中定义一个函数&#xff1b;箭头函数也是一个简洁的函数表达式&#xff1b;执行完函数表达式&a…...

【RK3288 Android10 C30 支持sim卡拔掉不弹窗,及热插拔】

文章目录 【RK3288 Android10 C30 支持sim卡拔掉不弹窗,及热插拔】需求方案patchframework【RK3288 Android10 C30 支持sim卡拔掉不弹窗,及热插拔】 需求 由于3288 硬件上的sim卡座不支持热插拔,是没有顶针来识别sim卡是否被拔掉的。所以在sim被拔掉或者松动的时候,会弹窗…...

python生成docx文件

使用python自动生成一张想要的docx文件 在这其中有指纹和公司盖章 from PIL import Image from docx import Document from docx.oxml.ns import qn from docx.shared import Pt, Inches, Cm from docx.enum.text import WD_PARAGRAPH_ALIGNMENT from xlsxtpl.writerx import …...

网络异常案例四_IP异常

问题现象 终端设备离线&#xff0c;现场根据设备ip&#xff0c;ping不通。查看路由器。 同一个路由器显示的终端设备&#xff08;走同一个wifi模块接入&#xff09;&#xff0c;包含不同网段的ip。 现场是基于三层的无线漫游&#xff0c;多个路由器wifi配置了相同的ssid信息&a…...

轰动全国的“327国债期货事件”的四大赢家后来都怎么样了?

轰动全国的“327国债期货事件”的四大赢家后来都怎么样了&#xff1f;轰动全国的“327国债期货事件”&#xff0c;四大赢家28岁的魏东、29岁的袁宝璟、34岁的周正毅以及30岁的刘汉&#xff0c;一举实现资本原始积累&#xff0c;称霸一方。天道好还&#xff0c;四人最终悲剧谢幕…...

终极解决方案:让Mac通过Android USB网络共享高速上网的HoRNDIS驱动

终极解决方案&#xff1a;让Mac通过Android USB网络共享高速上网的HoRNDIS驱动 【免费下载链接】HoRNDIS Android USB tethering driver for Mac OS X 项目地址: https://gitcode.com/gh_mirrors/ho/HoRNDIS 还在为Mac无法直接使用Android手机的USB网络共享功能而烦恼吗…...

golang如何实现QPS实时统计_golang QPS实时统计实现方案

用 time.Tick 原子计数器实现秒级QPS统计&#xff1a;每秒tick重置计数器&#xff0c;请求入口仅atomic.Add&#xff0c;轻量无锁&#xff1b;暴露QPS应独立路由避免伪共享&#xff1b;rate.Limiter不适用于观测&#xff0c;高精度需分桶滑动窗口。用 time.Tick 原子计数器做…...

Qwen3.5-9B-AWQ-4bit开源大模型部署教程:低成本多模态AI应用落地方案

Qwen3.5-9B-AWQ-4bit开源大模型部署教程&#xff1a;低成本多模态AI应用落地方案 1. 模型介绍与核心能力 Qwen3.5-9B-AWQ-4bit是一个经过量化的多模态开源大模型&#xff0c;特别适合需要图像理解能力的应用场景。这个版本通过AWQ&#xff08;Activation-aware Weight Quanti…...

5个突破点:解锁时空数据金矿的ST-DBSCAN实战指南

5个突破点&#xff1a;解锁时空数据金矿的ST-DBSCAN实战指南 【免费下载链接】st_dbscan ST-DBSCAN: Simple and effective tool for spatial-temporal clustering 项目地址: https://gitcode.com/gh_mirrors/st/st_dbscan 问题发现&#xff1a;被忽视的时空关联密码 为…...

想找界面清爽操作直观的个人记账app?不妨看看这些实用分享

前阵子跟几个朋友聊起记录日常开支的事儿&#xff0c;一圈聊下来发现&#xff1a;10个人里有8个都试过整理日常收支&#xff0c;最后都放弃了。要么是打开app一堆乱七八糟的内容&#xff0c;找个记账按钮都要翻半天&#xff1b;要么是操作繁琐&#xff0c;买瓶水还要填一堆信息…...

Python内存管理不再黑箱:手绘12张源码流程图(含PyMalloc arena分配/回收路径),带你直击PyObject_NEW与PyMem_RawMalloc底层决策逻辑

第一章&#xff1a;Python智能体内存管理策略源码分析Python智能体&#xff08;如基于LangChain或LlamaIndex构建的Agent&#xff09;在运行过程中常面临对象生命周期混乱、缓存冗余、引用泄漏等问题。其内存管理并非完全依赖CPython默认的引用计数与循环垃圾回收&#xff08;G…...

基于 MySQL+MHA+Keepalived 搭建高可用主从集群实战

一、方案背景与技术选型1.1 为什么需要 MySQL 高可用在生产环境中&#xff0c;数据库是业务系统的核心基石&#xff0c;一旦 MySQL 服务出现宕机、主库故障等问题&#xff0c;会直接导致业务中断、数据丢失&#xff0c;给企业带来不可估量的损失。因此&#xff0c;搭建一套高可…...

从分子动力学模拟到结合自由能分析:gmx_MMPBSA实战指南

从分子动力学模拟到结合自由能分析&#xff1a;gmx_MMPBSA实战指南 【免费下载链接】gmx_MMPBSA gmx_MMPBSA is a new tool based on AMBERs MMPBSA.py aiming to perform end-state free energy calculations with GROMACS files. 项目地址: https://gitcode.com/gh_mirrors…...

智能体设计模式详解 B# 附录G:编程代理

【全景】基于双向协同的能力融合设计 Agent设计模式 V1:基于双向协同的能力融合设计 39种设计模式分层清单 A#0 智能体设计模式全景(上):大模型如何“思考”?(认知视角导论) Agent Design Pattern Catalogue: A Collection of Architectural Patterns for Foundation Mo…...