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

news2025/7/9 12:02:28

众所周知,前端生成表格通常是用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.coloradmin.cn/o/2300311.html

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

相关文章

【Linux】【网络】Libevent 内核实现简略版

【Linux】【网络】Libevent 内核实现简略版 1 event_base结构–>相当于Reactor 在使用libevent之前&#xff0c;就必须先创建这个结构。 以epoll为例&#xff1a; 1.1evbase void* evbase-->epollop结构体&#xff08;以epoll为例&#xff09; libevent通过一个void…

VScode内接入deepseek包过程(本地部署版包会)

目录 1. 首先得有vscode软件 2. 在我们的电脑本地已经部署了ollama&#xff0c;我将以qwen作为实验例子 3. 在vscode上的扩展商店下载continue 4. 下载完成后&#xff0c;依次点击添加模型 5. 在这里可以添加&#xff0c;各种各样的模型&#xff0c;选择我们的ollama 6. 选…

Ubuntu虚拟机NDK编译ffmpeg

目录 一、ffmpeg源码下载1、安装git(用于下载ffmpeg源码)2、创建源码目录&#xff0c;下载ffmpeg源码 二、下载ubuntu对应的NDK&#xff0c;并解压到opt下1、下载并解压2、配置 ~/.bashrc 三、源码编译、1、创建编译脚本2、脚本文件内容3、设置可执行权限并运行4、编译的结果在…

机器学习:k近邻

所有代码和文档均在golitter/Decoding-ML-Top10: 使用 Python 优雅地实现机器学习十大经典算法。 (github.com)&#xff0c;欢迎查看。 K 邻近算法&#xff08;K-Nearest Neighbors&#xff0c;简称 KNN&#xff09;是一种经典的机器学习算法&#xff0c;主要用于分类和回归任务…

讯飞唤醒+VOSK语音识别+DEEPSEEK大模型+讯飞离线合成实现纯离线大模型智能语音问答。

在信息爆炸的时代&#xff0c;智能语音问答系统正以前所未有的速度融入我们的日常生活。然而&#xff0c;随着数据泄露事件的频发&#xff0c;用户对于隐私保护的需求日益增强。想象一下&#xff0c;一个无需联网、即可响应你所有问题的智能助手——这就是纯离线大模型智能语音…

Day4 25/2/17 MON

【一周刷爆LeetCode&#xff0c;算法大神左神&#xff08;左程云&#xff09;耗时100天打造算法与数据结构基础到高级全家桶教程&#xff0c;直击BTAJ等一线大厂必问算法面试题真题详解&#xff08;马士兵&#xff09;】https://www.bilibili.com/video/BV13g41157hK?p4&v…

HTML【详解】input 标签

input 标签主要用于接收用户的输入&#xff0c;随 type 属性值的不同&#xff0c;变换其具体功能。 通用属性 属性属性值功能name字符串定义输入字段的名称&#xff0c;在表单提交时&#xff0c;服务器通过该名称来获取对应的值disabled布尔值禁用输入框&#xff0c;使其无法被…

Jvascript网页设计案例:通过js实现一款密码强度检测,适用于等保测评整改

本文目录 前言功能预览样式特点总结&#xff1a;1. 整体视觉风格2. 密码输入框设计3. 强度指示条4. 结果文本与原因说明 功能特点总结&#xff1a;1. 密码强度检测2. 实时反馈机制3. 详细原因说明4. 视觉提示5. 交互体验优化 密码强度检测逻辑Html代码Javascript代码 前言 能满…

用React实现一个登录界面

使用React来创建一个简单的登录表单。以下是一个基本的React登录界面示例&#xff1a; 1. 设置React项目 如果你还没有一个React项目&#xff0c;你可以使用Create React App来创建一个。按照之前的步骤安装Create React App&#xff0c;然后创建一个新项目。 2. 创建登录组…

图论:tarjan 算法求解强连通分量

题目描述 有一个 n n n 个点&#xff0c; m m m 条边的有向图&#xff0c;请求出这个图点数大于 1 1 1 的强连通分量个数。 输入格式 第一行为两个整数 n n n 和 m m m。 第二行至 m 1 m1 m1 行&#xff0c;每一行有两个整数 a a a 和 b b b&#xff0c;表示有一条…

Java:单例模式(Singleton Pattern)及实现方式

一、单例模式的概念 单例模式是一种创建型设计模式&#xff0c;确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例&#xff0c;是 Java 中最简单的设计模式之一。该模式常用于需要全局唯一实例的场景&#xff0c;例如日志记录器、配置管理、线程池、数据库…

Python爬虫实战:股票分时数据抓取与存储 (1)

在金融数据分析中&#xff0c;股票分时数据是投资者和分析师的重要资源。它能够帮助我们了解股票在交易日内的价格波动情况&#xff0c;从而为交易决策提供依据。然而&#xff0c;获取这些数据往往需要借助专业的金融数据平台&#xff0c;其成本较高。幸运的是&#xff0c;通过…

将图片base64编码后,数据转成图片

将图片数据进行base64编码后&#xff0c;可以在浏览器上查看图片&#xff0c;只需在前端加上data:image/png;base64,即可 在线工具&#xff1a; Base64转图片 - 加菲工具

天翼云910B部署DeepSeek蒸馏70B LLaMA模型实践总结

一、项目背景与目标 本文记录在天翼云昇腾910B服务器上部署DeepSeek 70B模型的全过程。该模型是基于LLaMA架构的知识蒸馏版本&#xff0c;模型大小约132GB。 1.1 硬件环境 - 服务器配置&#xff1a;天翼云910B服务器 - NPU&#xff1a;8昇腾910B (每卡64GB显存) - 系统内存&…

Jetson Agx Orin平台preferred_stride调试记录--1924x720图像异常

1.问题描述 硬件: AGX Orin 在Jetpack 5.0.1和Jetpack 5.0.2上测试验证 图像分辨率在1920x720和1024x1920下图像采集正常 但是当采集图像分辨率为1924x720视频时,图像输出异常 像素格式:yuv_uyvy16 gstreamer命令如下 gst-launch-1.0 v4l2src device=/dev/video0 ! …

DeepSeek冲击(含本地化部署实践)

DeepSeek无疑是春节档最火爆的话题&#xff0c;上线不足一月&#xff0c;其全球累计下载量已达4000万&#xff0c;反超ChatGPT成为全球增长最快的AI应用&#xff0c;并且完全开源。那么究竟DeepSeek有什么魔力&#xff0c;能够让大家趋之若鹜&#xff0c;他又将怎样改变世界AI格…

CF 144A.Arrival of the General(Java实现)

题目分析 一个n个身高数据&#xff0c;问最高的到最前面&#xff0c;最矮的到最后面的最短交换次数 思路分析 首先&#xff0c;如果数据有重复项&#xff0c;例如示例二中&#xff0c;最矮的数据就是最后一个出现的数据位置&#xff0c;最高的数据就是最先出现的数据位置&…

set的使用(c++)

STL里面已经为我们实现了两种红黑树&#xff0c;一种是存储关键字的set&#xff0c;另一种是存储双关键字的map&#xff0c;今天主要来了解set&#xff0c;无论是set还是map后面都跟一个multi&#xff0c;它们区别是set 不能存相同元素&#xff0c; multiset 可以存相同的元素&…

IDEA单元测试插件 SquareTest 延长试用期权限

SquareTest是一款强大的IDEA单元测试生成插件工具&#xff0c;具体使用方法就不过多介绍了&#xff0c;这里主要介绍变更试用期&#xff0c;方便大家使用 配置信息 我的电脑安装前提配置条件 IntelliJ IDEA 2023.2windows 系统 软件安装 IntelliJ IDEA 直接安装插件Squar…