前端经验:导出表格为excel并设置样式

应用场景

将网页上的table标签内容导出为excel,并且导出的excel携带样式,比如字色、背景色、对齐等等

实施步骤

必备引入包

npm install xlsx-js-style

步骤1:准备好table

table可以是已经存在与页面中的,也可以动态创建。
行列合并的设置都提前在table内设好。

步骤2:table转excel对象

import XLSX from 'xlsx-js-style'
//这是要导出的目标table
const table_dom=$('#table')[0]
//table转excel对象
const sheet = XLSX.utils.table_to_sheet(table_dom, {raw: true,
})

步骤3:设置excel的样式

//行列索引自行想办法拿到
const colIndex=0
const rowIndex=0
//获取excel的单元格对象
const cell = sheet[`${XLSX.utils.encode_col(colIndex)}${rowIndex+ 1}`]
if(cell){cell.s = {alignment: {horizontal: 'left'//水平对齐,},font: {bold: true//是否加粗,italic: false//是否斜体,sz: 12//字体大小,color: {rgb: '66ccff'//字色,不带#号的hex字符}},fill: {bgColor: {rgb: 'ffffff'//背景色}}}
}

步骤4:导出excel

const book = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(book, sheet, "Sheet1")
XLSX.writeFile(book, `export.xlsx`)

以上。

参考资料

xlsx-js-style封装自sheetjs,sheetjs文档没有对样式设置的描述。
excel对象的操作可参考
sheetjs中文网
样式设置参考
xlsx-js-style文档

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

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

相关文章

Vue-插槽 Slots

文章目录 前言什么叫插槽简单插槽指定默认值多个插槽根据父级别名称指定区域显示(具名插槽)作用域插槽 前言 本篇文章不做过多的讲解与说明,只记录个人实验测试案例。 详见:vue 官方文档 插槽 slots 什么叫插槽 之前的博客中,父级组件可以…

06- 数组的基础知识详细讲解

06- 数组的基础知识详细讲解 一、基本概念 一次性定义多个相同类型的变量,并且给它们分配一片连续的内存。 int arr[5];1.1 初始化 只有在定义的时候赋值,才可以称为初始化。数组只有在初始化的时候才可以统一赋值。 以下是一些示例规则: …

Python网络安全项目开发实战:如何看清文件上传木马

注意:本文的下载教程,与以下文章的思路有相同点,也有不同点,最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程:Python网络安全项目开发实战_看清文件上传木马_编程案例解析实例详解课程教程.pdf 在网络安全领域,Python以其强大的功能和灵活性成为了一种非常流行…

SVM模型实现城镇居民月平均消费数据分类

SVM模型实现城镇居民月平均消费数据分类 一、SVM支持向量机简介二、数据集介绍三、SVM建模流程及分析一、SVM支持向量机简介 支持向量机是由感知机发展而来的机器学习算法,属于监督学习算法。支持向量机具有完备的理论基础,算法通过对样本进行求解,得到最大边距的超平面,并…

常见代码版本管理工具

目录 一、引言 二、Gitee (一)优点与特点 (二)缺点 (三)使用报告 三、GitHub 四、SVN 五、总结 一、引言 在软件开发过程中,代码版本控制工具是不可或缺的。Gitee、GitHub和SVN是三种常…

6.6学习总结

一.算法练习(Codeforces Round 949 (Div. 2)和) B. Turtle and an Infinite Sequence 思路:对于数字而言,轮之后的结果是所有数的或。因此只需要求区间或就行了。(其实就是找区间左边界,二进制中的特殊位置,将后面的所有位都变成1,最后输出结果) 代码实…

如何通俗易懂地理解大模型参数?

大型语言模型 (LLM) 的大小是通过参数数量来衡量的。举几个典型例子,GPT-3 有 1750 亿个参数,1750亿也可称为175B(1B 10亿),Meta最新开源的Llama3 参数数量在 80 亿到 700 亿之间,智谱公司最新开源的GLM4-…

pESC-HIS是什么,怎么看?-实验操作系列-2

01 典型的pESC-HIS质粒遗传图谱 02 介绍 质粒类型:酿酒酵母蛋白表达载体 表达水平:高拷贝 诱导方法:半乳糖 启动子:GAL1和GAL10 克隆方法:多克隆位点,限制性内切酶 载体大小:6706bp 5 测…

浅谈一下实例化

实例化对象是面向对象编程中非常重要的概念,它允许我们根据类的定义创建具体的对象,并操作这些对象的属性和方法。下面具体谈一下实例化对象的一些特点和用途: 封装性和复用性:实例化对象可以将数据和行为封装在一起,从…

C++_如何改变std::tuple中元素的值,即使是const?

1. 需求 第三方库库函数&#xff0c;使用了 const std::tuple<name, id> 作为参数, 当需要改变这里tuple中元素的值&#xff0c; 怎么办&#xff1f; 答&#xff1a; 使用引用传参数&#xff0c;如何使用引用呢&#xff1f; 见如下代码. 2. 代码 #include <iostre…

GitHub最大的开源算法库

GitHub 上最大的开源算法库 The Algorithms&#xff0c;值得每位算法工程师收藏&#xff01; 该库收录了 Python、Java、C、JavaScript、Go 等多种主流编程语言的算法实现代码。 其中包含二分查找、快速排序、斐波那契数列等众多热门算法&#xff0c;可以说是应用尽有。 此外&a…

程序代写,代码编写

Java 项目代做&#xff0c;小程序&#xff0c;安卓&#xff0c;鸿蒙&#xff0c;VUE 程序代写 Java调试安装、项目运行、代码代做、环境配置、工具安装、代码讲解、代码调试、代码运行、代码部署、项目调试、项目部署、Java Web、Spring Boot、项目设计、前后端分离、代码报错解…

利用大语言模型进行事实匹配

论文地址:Automated Claim Matching with Large Language Models: Empowering Fact-Checkers in the Fight Against Misinformation | Companion Proceedings of the ACM on Web Conference 2024 WWW 2024 Automated Claim Matching with Large Language Models: Empowering F…

神经网络 torch.nn---优化器的使用

torch.optim - PyTorch中文文档 (pytorch-cn.readthedocs.io) torch.optim — PyTorch 2.3 documentation 反向传播可以求出神经网路中每个需要调节参数的梯度(grad)&#xff0c;优化器可以根据梯度进行调整&#xff0c;达到降低整体误差的作用。下面我们对优化器进行介绍。 …

[ZJCTF 2019]NiZhuanSiWei、[HUBUCTF 2022 新生赛]checkin、[SWPUCTF 2021 新生赛]pop

目录 [ZJCTF 2019]NiZhuanSiWei [HUBUCTF 2022 新生赛]checkin 1.PHP 关联数组 PHP 数组 | 菜鸟教程 2.PHP 弱比较绕过 PHP 类型比较 | 菜鸟教程 [SWPUCTF 2021 新生赛]pop [ZJCTF 2019]NiZhuanSiWei BUUCTF [ZJCTF 2019]NiZhuanSiWei特详解&#xff08;php伪…

安装 python3 其他版本(11)后 No module named ‘distutils.util‘

ModuleNotFoundError: No module named ‘distutils.util‘ 解决在colab切换python3.7遇到的报错_mac modulenotfounderror: no module named distutil-CSDN博客 sudo apt-get install python3.11-distutils python3.11 -m pip3 install pipenv

STM32-16-ADC

STM32-01-认识单片机 STM32-02-基础知识 STM32-03-HAL库 STM32-04-时钟树 STM32-05-SYSTEM文件夹 STM32-06-GPIO STM32-07-外部中断 STM32-08-串口 STM32-09-IWDG和WWDG STM32-10-定时器 STM32-11-电容触摸按键 STM32-12-OLED模块 STM32-13-MPU STM32-14-FSMC_LCD STM32-15-DMA…

docker-compose部署 kafka 3.7 集群(3台服务器)并启用账号密码认证

文章目录 1. 规划2. 服务部署2.1 kafka-012.2 kafka-022.3 kafka-032.4 启动服务 3. 测试3.1 kafkamap搭建&#xff08;测试工具&#xff09;3.2 测试 1. 规划 服务IPkafka-0110.10.xxx.199kafka-0210.10.xxx.198kafka-0310.10.xxx.197kafkamp10.10.xxx.199 2. 服务部署 2.1…

【启明智显技术分享】sigmastar ssd202d双网口开发板多串口调试说明

提示&#xff1a;作为Espressif&#xff08;乐鑫科技&#xff09;大中华区合作伙伴及sigmastar&#xff08;厦门星宸&#xff09;VAD合作伙伴&#xff0c;我们不仅用心整理了你在开发过程中可能会遇到的问题以及快速上手的简明教程供开发小伙伴参考。同时也用心整理了乐鑫及星宸…

Windows系统没有Hyper-v的解决方法

在控制面板-程序-启用或关闭Windows功能下找不到Hyper-v节点 Windows10解决方法&#xff1a; 解决办法 1.将下面命令复制到文本文档中&#xff0c;并将文档重命名Hyper.cmd pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt …