当前位置：首页 > article >正文

使用Handsontable实现动态表格和下载表格

article 2025/10/13 1:46:45

1.效果

2.实现代码

首先要加载Handsontable，在示例中我是cdn的方式引入的，vue的话需要下载插件

      let hot = null;var exportPlugin = null;function showHandsontable(param) {const container = document.getElementById("hot-container");// 如果已有实例，先销毁if (hot) {hot.destroy();}hot = new Handsontable(container, {data: [], // 初始为空colHeaders: true, // 动态列头rowHeaders: true, // 动态行头width: "100%",height: 800,licenseKey: "non-commercial-and-evaluation", // 免费版许可证contextMenu: true, // 启用右键菜单manualColumnResize: true, // 允许调整列宽manualRowResize: true, // 允许调整行高filters: true, // 启用筛选dropdownMenu: true, // 启用下拉菜单columnSorting: true, // 启用列排序stretchH: "all", // 列宽自适应afterChange: function (changes, source) {if (source === "edit") {console.log("数据已修改:", changes);}},});}showHandsontable();

点击后开始加载数据，注意colHeaders，rowHeaders，是行和列的名称，是数组格式

updateSettings：更新表格数据和表头

loadData：重新加载数据

      document.getElementById("load-data").addEventListener("click", async function () {try {const response = await mockApiCall();console.log(response, "这时候弄-");// 更新表格数据和表头hot.updateSettings({colHeaders: response.headers.columns,rowHeaders: response.headers.rows,});hot.loadData(response.data);exportPlugin = hot.getPlugin("exportFile");console.log("数据加载成功");} catch (error) {console.error("加载数据失败:", error);}

3.下载表格

主要用到downloadFile和hot.getPlugin("exportFile")下载格式为csv，目前在Handsontable官网没有看到可以下载xlsx格式的，可能需要xlsx插件

   button.addEventListener("click", () => {//下载表格的数据exportPlugin.downloadFile("csv", {bom: false,columnDelimiter: ",",columnHeaders: true,//显示表头exportHiddenColumns: true,exportHiddenRows: true,fileExtension: "csv",filename: "Handsontable-CSV-file_[YYYY]-[MM]-[DD]",mimeType: "text/csv",rowDelimiter: "\r\n",rowHeaders: true,});//改为下载报表接口数据});

4.完整代码


<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>动态表格示例 - Handsontable</title><!-- <script src="./handsontable.full.min.js"></script><link rel="stylesheet" href="./handsontable.full.min.css" /> --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/handsontable/15.0.0/handsontable.full.min.js"integrity="sha512-3Os2SFklHFmIWzqQsBOmpA9fYBiar8ASBI4hqgeUKttdJ6lDWli7W+JmXyN8exab8NOpiYT441s6hfqX6Tx+WA=="crossorigin="anonymous"referrerpolicy="no-referrer"></script><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/15.0.0/handsontable.full.min.css"integrity="sha512-reELraG6l/OUbRy0EnDh2RxkanfohOkWJX7afyUG1aGHv49SA9uqrAcJOMhyCNW6kcwbnhePc6JKcdUsQxmjvw=="crossorigin="anonymous"referrerpolicy="no-referrer"/><style>body {font-family: Arial, sans-serif;margin: 20px;}#hot-container {margin-top: 20px;}.controls {margin-bottom: 10px;}button {padding: 8px 12px;margin-right: 10px;cursor: pointer;}</style></head><body><h1>动态表格示例</h1><div class="controls"><button id="load-data">加载数据</button><button id="export-file">下载表格</button></div><div id="hot-container"></div><!-- <script src="app.js"></script> --><script type="text/javascript">let hot = null;var exportPlugin = null;function showHandsontable(param) {const container = document.getElementById("hot-container");// 如果已有实例，先销毁if (hot) {hot.destroy();}hot = new Handsontable(container, {data: [], // 初始为空colHeaders: true, // 动态列头rowHeaders: true, // 动态行头width: "100%",height: 800,licenseKey: "non-commercial-and-evaluation", // 免费版许可证contextMenu: true, // 启用右键菜单manualColumnResize: true, // 允许调整列宽manualRowResize: true, // 允许调整行高filters: true, // 启用筛选dropdownMenu: true, // 启用下拉菜单columnSorting: true, // 启用列排序stretchH: "all", // 列宽自适应afterChange: function (changes, source) {if (source === "edit") {console.log("数据已修改:", changes);}},});}showHandsontable();// 加载数据按钮事件document.getElementById("load-data").addEventListener("click", async function () {try {const response = await mockApiCall();console.log(response, "这时候弄-");// 更新表格数据和表头hot.updateSettings({colHeaders: response.headers.columns,rowHeaders: response.headers.rows,});hot.loadData(response.data);exportPlugin = hot.getPlugin("exportFile");console.log("数据加载成功");} catch (error) {console.error("加载数据失败:", error);}});function mockApiCall() {return new Promise((resolve) => {// 模拟网络延迟setTimeout(() => {const mockData = {headers: {columns: ["ID", "姓名", "年龄", "部门", "薪资"],rows: Array.from({ length: 15 }, (_, i) => `员工${i + 1}`),},data: Array.from({ length: 15 }, (_, i) => [i + 1000,`员工${i + 1}`,Math.floor(Math.random() * 20) + 20,["研发部", "市场部", "人事部", "财务部"][Math.floor(Math.random() * 4)],(Math.random() * 10000 + 5000).toFixed(2),]),};resolve(mockData);}, 500);});}const button = document.querySelector("#export-file");button.addEventListener("click", () => {//下载表格的数据exportPlugin.downloadFile("csv", {bom: false,columnDelimiter: ",",columnHeaders: false,exportHiddenColumns: true,exportHiddenRows: true,fileExtension: "csv",filename: "Handsontable-CSV-file_[YYYY]-[MM]-[DD]",mimeType: "text/csv",rowDelimiter: "\r\n",rowHeaders: true,});//改为下载报表接口数据});</script></body>
</html>

文章到此结束，希望对你有所帮助~

使用Handsontable实现动态表格和下载表格

1.效果 2.实现代码首先要加载Handsontable，在示例中我是cdn的方式引入的，vue的话需要下载插件 let hot null;var exportPlugin null;function showHandsontable(param) {const container document.getElementById("hot-container");// 如果…...

编程日记 2025/10/13 1:46:45

Action:Update your application‘s configuration

在使用Maven项目时，有一个报错信息是：Update your applications configuration 这类问题，就是我们的application.yml文件或者 application.properties文件内容哪里写错了最有可能就是对齐方式有问题...

编程日记 2025/9/30 10:31:57

【计算机网络】IP地址

IPv4 五类地址 1.0.0.0 ~ 126.255.255.255A类子网8位，主机24位128.0.0.0 ~ 191.255.255.255B类子网16位，主机16位192.0.0.0 ~ 223.255.255.255C类子网24位，主机8位224.0.0.0 ~ 239.255.255.255D类不分网络地址和主机地址，作为组播…...

编程日记 2025/10/6 22:04:40

Rundeck 介绍及安装：自动化调度与执行工具

Rundeck介绍概述：Rundeck 是什么？ Rundeck 是一款开源的自动化调度和任务执行工具，专为运维场景设计，帮助工程师通过统一的平台管理和执行跨系统、跨节点的任务。它由 PagerDuty 维护（2016 年收购）&#…...

编程日记 2025/10/7 9:20:42

vue element使用el-table时，切换tab，table表格列项发生错位问题

展示问题问题描述：使用el-table的fixed"right"属性后，如果切换tab时，回出现最后一列错误的问题官网提供解决方法：doLayout 需要注意的事项：我这里是通过组件使用的table组件，涉及多层组件封装…...

编程日记 2025/10/6 2:02:25

第十二章 Python语言-大数据分析PySpark（终）

目录一. PySpark前言介绍二.基础准备三.数据输入四.数据计算 1.数据计算-map方法 2.数据计算-flatMap算子 3.数据计算-reduceByKey方法 4.数据计算-filter方法 5.数据计算-distinct方法 6.数据计算-sortBy方法五.数据输出 1.输出Python对象 （1&am…...

编程日记 2025/10/11 17:07:49

【RedisLockRegistry】分布式锁

RedisLockRegistry分布式锁介绍 RedisLockRegistry‌是Spring框架提供的一种分布式锁机制，它基于Redis来实现对共享资源的保护，防止多个进程同时对同一资源进行修改，从而避免数据不一致或其他问题‌ 基本原理 RedisLockRegistry通过Redi…...

编程日记 2025/5/24 5:17:34

leetcode-排序

排序面试题 01.01. 判定字符是否唯一题目实现一个算法，确定一个字符串 s 的所有字符是否全都不同。示例 1： 输入: s "leetcode" 输出: false 示例 2： 输入: s "abc" 输出: true限制： 0 < len(s) &…...

编程日记 2025/7/19 7:03:44

AD相同网络的铜皮和导线连接不上

出现这样的情况是不是很烦恼，明明是相同的网络连接不上？？？？？ 直接修改铜皮属性（选择所有相同这个选项） 这样就可以连接上了...

编程日记 2025/9/25 21:09:36

keil修改字体无效，修改字体为“微软雅黑”方法

在网上下载了微软雅黑字体，微软雅黑参考下载链接结果在Edit->Configuration中找不到这个字体这个时候可以在keil的安装目录中找到UV4/global.prop文件用记事本打开它进行编辑，把字体名字改成微软雅黑重新打开keil就发现字体成功修改了。这个…...

编程日记 2025/9/29 14:23:00

【网络编程】从零开始彻底了解网络编程(三)

本篇博客给大家带来的是网络编程的知识点. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅🚀 要开心要快乐顺便进步 TCP流…...

编程日记 2025/10/7 22:44:07

NVIDIA --- 端到端自动驾驶

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、传统驾驶模型二、NVIDIA的端到端驾驶模型1.基本模型2.自查讯向量3.通用框架总结前言端到端自动驾驶指的是系统接收来自摄像头雷达和激光雷达的原始传感…...

编程日记 2025/10/12 5:05:37

关于在Springboot中设置时间格式问题

目录 1-设置全局时间格式1.Date类型的时间2.JDK8时间3.使Date类和JDK8时间类统统格式化时间 2-关于DateTimeFormat注解 1-设置全局时间格式 1.Date类型的时间对于老项目来说，springboot中许多类使用的是Date类型的时间，没有用到LocalDateTime等JDK8时…...

编程日记 2025/9/21 0:24:37

CSRF请求伪造

该漏洞主要是关乎于用户，告诫用户不可乱点击链接，提升自我防范，才能不落入Hacker布置的陷阱！ 1. cookie与session 简单理解一下两者作用 1.1. 🍪 Cookie：就像超市的会员卡存储位置：你钱包里…...

编程日记 2025/10/6 13:17:01

（一）单机架构、应用数据分离架构、应用服务集群架构

文章目录明确为什么要学习架构的演进单机架构什么是单机架构单机架构的模型单机架构的优缺点优点缺点单机架构的技术案例应用数据分离架构什么是应用数据分离架构架构模型应用数据分离架构的优缺点优点缺点技术案例应用服务集群架构什么是应用服务集群架构架构模型应用服务…...

编程日记 2025/10/4 17:30:14

Python数据分析案例72——基于股吧评论数据的情感分析和主题建模(LDA)

背景好久没更新了，最近忙其他去了。最近股市波动太大，看了不少新闻的评论。抽空写了个股吧评论数据的LDA建模和情感分析，简单写到博客上来更新一下。数据来源上证指数(000001)股吧_上证指数怎么样_分析讨论社区— 数据来源上述网站的东…...

编程日记 2025/10/12 9:09:49

Git分支管理方案

成都众望智慧有限公司Git分支管理方案采用轻量级Git Flow 敏捷版本控制策略，在保证稳定性的同时提升开发效率。以下是优化后的方案： 1. 精简分支模型（相比6-8人团队减少分支层级） 分支类型作用生命周期devops生产环境代码&am…...

编程日记 2025/9/26 7:08:20

力扣-160.相交链表

题目描述给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点，返回 null 。图示两个链表在节点 c1 开始相交： 题目数据保证整个链式结构中不存在环。注意，函数返…...

编程日记 2025/10/10 22:20:39

c语言中float和double 类型的区别

在 C 语言里，float和double都用于表示浮点数，不过二者在多个方面存在差异，下面为你详细介绍： 1. 存储空间大小在 C 语言中，数据类型所占用的存储空间大小通常与编译器和系统架构有关，但一般来说&#xf…...

编程日记 2025/10/13 14:58:15

【C++】特殊类的设计、单例模式以及Cpp类型转换

编程日记 2025/10/12 13:47:53

050_基于springboot的音乐网站

编程日记 2025/9/29 21:37:15

全局变量Msg.sender

msg.sender 在 Solidity 中，有一些全局变量可以被所有函数调用。其中一个就是 msg.sender，它指的是当前调用者（或智能合约）的 address。注意：在 Solidity 中，功能执行始终需要从外部调用者开始。一个合…...

编程日记 2025/9/23 21:17:17

【论文阅读】平滑量化：对大型语言模型进行准确高效的训练后量化

论文题目：SmoothQuant: Accurate and Efficient Post-Training Quantization for Large Language Models 论文地址：[2211.10438] SmoothQuant: Accurate and Efficient Post-Training Quantization for Large Language Models 代码地址：http…...

编程日记 2025/10/9 11:15:48

【资料推荐】LVDS Owner’s Manual

一份年代有些久远的技术资料，但是内容全面且经典！ 本用户手册提供了很多有用的信息，首先简要概述了三种最常见的高速接口技术：LVDS（包括B-LVDS和M-LVDS）、CML和LVPECL，并对其相应的特性进行了分…...

编程日记 2025/10/5 13:48:06

ARM Cortex-M (STM32)如何调试HardFault

目录步骤 1: 实现一个有效的 HardFault 处理程序步骤 2: 复现 HardFault 并使用调试器分析步骤 3: 解读故障信息步骤 4: 定位并修复源代码 HardFault 是 ARM Cortex-M 处理器中的一种异常。当处理器遇到无法处理的错误，或者配置为处理特定类型错误&#xff…...

编程日记 2025/10/10 22:52:39

黑马 redis面试篇笔记

redis主从 version: "3.2"services:r1:image: rediscontainer_name: r1network_mode: "host"entrypoint: ["redis-server", "--port", "7001"]r2:image: rediscontainer_name: r2network_mode: "host"entrypoint:…...

编程日记 2025/10/12 8:09:17