前端带样式导出excel表格,html表格生成带样式的excel表格

众所周知,前端生成表格通常是用xlsx、excel.js等js库,但这些库想要生成时增加excel样式会很麻烦。

有这么一个js库把html表格连样式带数据一并导出为excel表格: html-table-to-excel

npm install html-table-to-excel

使用

html表格:

    <el-button @click="goExport">导出</el-button><table id="myTable" ref="myTable"><tr><td style="width: 30px;"></td><td style="background-color: #000;color:yellow">123</td><td style="border:1px solid #000;color:red;font-weight: 700;font-size: 20px;font-family: Arial;">123abc</td></tr></table>

js:

const goExport = () => {const tableDOM = document.querySelector('#myTable');htmlTableToExcel(tableDOM, '文件名.xlsx', 'Sheet1');
}

可以看到表格中单元格背景、字体颜色、边框、字体都导入进了excel表格,同理就算是图片也可以,如果用xlsx单独给每个单元格都添加样式的话可是相当麻烦

npm文档:html-table-to-excel - npm

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

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

相关文章

ASP.NET JWT认证失败响应:从默认到自定义的优雅改造

本文主要介绍如何通过ASP.NET Core的JwtBearerEvents机制&#xff0c;实现JWT认证失败响应的深度定制。 1. 背景 在之前的文章《一个简单的ASP.NET一致性返回工具库》 中&#xff0c;我们介绍了 Sang.AspNetCore.CommonLibraries 这一通用库&#xff0c;它通过统一API响应模型…

AI工作流+专业知识库+系统API的全流程任务自动化

我有点悲观&#xff0c;甚至很沮丧&#xff0c;因为AI留给普通人的机会不多了&#xff0c;这既是人类之间权力的斗争&#xff0c;也是硅基生命和碳基生命的斗争。AI自动化是无法避免的趋势&#xff0c;如果人类不能平权&#xff0c;那就只能跪下接受审判。 通过整合AI工作流、专…

安卓burp抓包,bypass ssl pinning

好久好久没有发东西了。主要是懒。。。 这几天在搞apk渗透&#xff0c;遇到了burp无法抓包问题&#xff0c;觉得可以写下来。 问题描述 1. 一台安卓手机&#xff0c;装了面具&#xff0c;可以拿到root 2. 电脑上有burp&#xff0c;设置代理 3.手机和电脑连同一个网段&…

TS语言自定义脚手架

初始化 新建文件夹初始化命令 npm init -ytsc --initnpm i types/nodenpm i typescript# 处理别名npm i -D tsc-alias -y 表示选项都为yes 安装ts相关依赖 新建相关文件 bin 文件夹 src文件夹 commands 文件夹 &#xff08;命令 utils 文件夹 (封装方法&#xff09; index.t…

ETL工具: Kettle入门(示例从oracle到oracle的数据导入)

kettle介绍 ETL工具,用于对数据的抽取&#xff08;Extract), 转换(Transform),加载 (Load&#xff09; Kettle 是一种ETL工具, 现称为 Pentaho Data Integration (PDI) 特点:纯JAVA语言编写 官方学习文档 网站: https://docs.hitachivantara.com/r/en-us/pentaho-data-int…

一周学会Flask3 Python Web开发-response响应格式

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在HTTP响应中&#xff0c;数据可以通过多种格式传输。大多数情况下&#xff0c;我们会使用HTML格式&#xff0c;这也是Flask中…

内外网隔离文件传输解决方案|系统与钉钉集成+等保合规,安全提升70%

一、背景与痛点 在内外网隔离的企业网络环境中&#xff0c;员工与外部协作伙伴&#xff08;如钉钉用户&#xff09;的文件传输面临以下挑战&#xff1a; 1. **安全性风险**&#xff1a;内外网直连可能导致病毒传播、数据泄露。 2. **操作繁琐**&#xff1a;传统方式需频繁切…

【数据结构-红黑树】

文章目录 红黑树红黑树介绍红黑树的五个基本性质红黑树的平衡原理红黑树的操作红黑树的操作 代码实现节点实现插入和查询操作 红黑树 红黑树介绍 红黑树&#xff08;Red-Black Tree&#xff09;是一种自平衡的二叉查找树&#xff08;Binary Search Tree, BST&#xff09;&…

Jetpack Architecture系列教程之(三)——ViewModel控制器

目录 介绍 如何使用 添加依赖 构建ViewModel 分析ViewModel ViewModel生命周期 ViewModel加载原理 介绍 ViewModel 的出现是为了解决数据因Android UI控制器在生命周期活动中造成数据丢失的问题。 在一般情况下&#xff0c;页面数据丢失&#xff08;转屏、闪退等生命周期…

Vue3.5 企业级管理系统实战(七):Sidebar组件开发 1

现在开始&#xff0c;我们要进行 Sidebar 组件的开发&#xff0c;篇幅和时间原因&#xff0c;本篇先探讨 el-menu 的配置。 1 菜单样式设置 在 src/style/variables.module.scss 中&#xff0c;我们设置菜单样式相关的变量&#xff0c;这些变量将用于后续组件的样式配置。 /…

LeetCode:2595.奇偶位数

给你一个 正 整数 n 。用 even 表示在 n 的二进制形式&#xff08;下标从 0 开始&#xff09;中值为 1 的偶数下标的个数。用 odd 表示在 n 的二进制形式&#xff08;下标从 0 开始&#xff09;中值为 1 的奇数下标的个数。请注意&#xff0c;在数字的二进制表示中&#xff0c;…

【算法精练】背包问题(01背包问题)

目录 1. 背包问题 2. 01背包问题 3. 优化 总结 1. 背包问题 经典的背包问题&#xff1a; 有一个背包&#xff0c;限制背包的体积&#xff1b;有一堆物品&#xff0c;从这堆物品中选择&#xff0c;在不超过背包容量的前提下&#xff0c;选出最大价值的物品&#xff1b; 从这个…

ubuntu 执行 sudo apt-get update 报错

记录一下&#xff0c;遇到这个问题了&#xff0c;网络上看到的解决办法&#xff0c;亲测有效 执行sudo apt-get update ,却报以下错误&#xff0c;“SECURITY: URL redirect target contains control characters rejecting ” 经检查发现&#xff0c;/etc/apt/source.list 下的…

如何调用 DeepSeek API:详细教程与示例

目录 一、准备工作 二、DeepSeek API 调用步骤 1. 选择 API 端点 2. 构建 API 请求 3. 发送请求并处理响应 三、Python 示例&#xff1a;调用 DeepSeek API 1. 安装依赖 2. 编写代码 3. 运行代码 四、常见问题及解决方法 1. API 调用返回 401 错误 2. API 调用返回…

MySQL初学之旅(5)详解查询

目录 1.前言 2.正文 2.1聚合查询 2.1.1count() 2.1.2sum() 2.1.3avg() 2.1.4max() 2.1.5min() 2.1.6总结 2.2分组查询 2.2.1group by字句 2.2.2having字句 2.2.3group by与having的关系 2.3联合查询 2.3.1笛卡尔积 2.3.2内连接 2.3.3外连接 2.3.4自连接 2.3…

深入解析 vLLM:高性能 LLM 服务框架的架构之美(二)调度管理

深入解析 vLLM&#xff1a;高性能 LLM 服务框架的架构之美&#xff08;一&#xff09;原理与解析 深入解析 vLLM&#xff1a;高性能 LLM 服务框架的架构之美&#xff08;二&#xff09;调度管理 1. vLLM 调度器结构与主要组件 在 vLLM 中&#xff0c;调度器的结构设计围绕任务…

2.20学习

crypto buu-这是什么 下载附件后打开看到是apk文件&#xff0c;试试直接用记事本打开&#xff0c;看到乱码以外&#xff0c;还有一堆有规律的符号&#xff0c;了解后发现是jsfuck编码&#xff0c;搜索在线工具解码就行 misc buu-[BJDCTF2020]藏藏藏 下载附件&#xff0c;得…

【Java八股文】08-计算机网络面试篇

【Java八股文】08-计算机网络面试篇 计算机网络面试篇网络模型网络OSI模型和TCP/IP模型分别介绍一下键入网址到网页显示&#xff0c;期间发生了什么&#xff1f; 应用层- HTTP应用层有哪些协议&#xff1f;HTTP是什么及HTTP报文有哪些部分&#xff1f;HTTP是怎么传输数据的HTTP…

DeepSeek 助力 Vue 开发:打造丝滑的瀑布流布局(Masonry Layout)

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…

基于知识图谱的问答系统:后端Python+Flask,数据库Neo4j,前端Vue3(提供源码)

基于知识图谱的问答系统&#xff1a;后端PythonFlask&#xff0c;数据库Neo4j&#xff0c;前端Vue3 引言 随着人工智能技术的不断发展&#xff0c;知识图谱作为一种结构化的知识表示方式&#xff0c;逐渐成为问答系统的重要组成部分。本文将介绍如何构建一个基于知识图谱的问答…