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

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>

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

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

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

相关文章

2.1 基于委托的异步编程方法

2.1 基于委托的异步编程方法

基于委托的异步编程模型是 .NET 早期版本中实现异步操作的一种方式&#xff0c;主要通过 BeginInvoke 和 EndInvoke 方法来实现。这种基于委托的异步模式已被 Task 和 async/await 模式取代&#xff0c;但在维护旧代码时仍可能遇到这种模式。 委托的方法中&#xff1a;Invoke用…
阅读更多...
【Bluedroid】蓝牙 HID 设备信息加载与注册机制及配置缓存系统源码解析

【Bluedroid】蓝牙 HID 设备信息加载与注册机制及配置缓存系统源码解析

本篇解析Android蓝牙子系统加载配对HID设备的核心流程，通过btif_storage_load_bonded_hid_info实现从NVRAM读取设备属性、验证绑定状态、构造描述符并注册到BTA_HH模块。重点剖析基于ConfigCache的三层存储架构（全局配置/持久设备/临时设备），其通过动态持久化判定策略和LRU…
阅读更多...
Linux 下的网络管理（附加详细实验案例）

Linux 下的网络管理（附加详细实验案例）

一、简单了解 NM&#xff08;NetworkManager&#xff09; 在 Linux 中&#xff0c;NM 是 NetworkManager 的缩写。它是一个用于管理网络连接的守护进程和工具集。 在 RHEL9 上&#xff0c;使用 NM 进行网络配置&#xff0c;ifcfg &#xff08;也称为文件&#xff09;将不再…
阅读更多...
长连接、短连接与WebSocket的基本知识

长连接、短连接与WebSocket的基本知识

目录 前言正文 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器&#xff0c;无代码爬取&#xff0c;就来&#xff1a;bright.cn Java基本知识&#xff1a; java框架 零基础从入门到精通的学习路线 附…
阅读更多...
2026《数据结构》考研复习笔记四（绪论）

2026《数据结构》考研复习笔记四（绪论）

绪论 前言时间复杂度分析 前言 由于先前笔者花费约一周时间将王道《数据结构》知识点大致过了一遍&#xff0c;圈画下来疑难知识点&#xff0c;有了大致的知识框架&#xff0c;现在的任务就是将知识点逐个理解透彻&#xff0c;并将leetcode刷题与课后刷题相结合。因此此后的过…
阅读更多...
Vmware安装centos7和Redis

Vmware安装centos7和Redis

2025最详细vmware安装centos 7 教程_哔哩哔哩_bilibili 1.上面是B站安装Centos7参考视频 2.安装完成需要配置网络 (新手教程)VMware安装CentOS7_哔哩哔哩_bilibili 重启网络服务: ping www.baidu.com ip addr 查看ip地址 两种重启方式 3.关闭防火墙 依次执行如下三条命令 …
阅读更多...
二进制部署Kubernetes1.32.4最新版本高可用集群及附加组件

二进制部署Kubernetes1.32.4最新版本高可用集群及附加组件

一、前言 在云原生技术席卷全球的今天&#xff0c;Kubernetes&#xff08;K8s&#xff09;已成为容器编排领域的事实标准。当大家都习惯了kubeadm、kubeasz等自动化工具一键部署的便利时&#xff0c;选择通过二进制方式手动搭建K8s集群更像是一场"知其然亦知其所以然&qu…
阅读更多...
树莓派系统中设置固定 IP

树莓派系统中设置固定 IP

在基于 Ubuntu 的树莓派系统中&#xff0c;设置固定 IP 地址主要有以下几种方法&#xff1a; 方法一&#xff1a;使用 Netplan 配置&#xff08;Ubuntu 18.04 及以上版本默认使用 Netplan&#xff09; 查看网络接口名称 在终端输入ip link或ip a命令&#xff0c;查看当前所使…
阅读更多...
主流单片机与编程调试工具对应关系表梳理

主流单片机与编程调试工具对应关系表梳理

单片机系列/型号 | 官方IDE/工具链 | 调试器/烧录器 | 第三方支持工具 |调试接口协议 | 特点与适用场景| | STMicroelectronics (STM32) STM32全系列 STM32CubeIDE ST-LINK/V2/V3 - PlatformIO (VS Code插件) SWD/JTAG 官方集成开发环境&#xff0c;支持HAL库&#xff0c;免费…
阅读更多...
VulnHub-DarkHole_2靶机渗透教程

VulnHub-DarkHole_2靶机渗透教程

1.靶机部署 [Onepanda] Mik1ysomething 靶机下载&#xff1a;https://download.vulnhub.com/darkhole/darkhole_2.zip 直接使用VMware导入打开就行 注意&#xff1a;靶机的网络连接模式必须和kali一样&#xff0c;让靶机跟kali处于同一网段&#xff0c;这样kali才能扫出靶机…
阅读更多...
USO服务器操作系统手动升级GCC 12.2.0版本

USO服务器操作系统手动升级GCC 12.2.0版本

1. 从 GNU 官方 FTP 服务器下载 GCC 12.2.0 的源码包&#xff0c;并解压进入源码目录。 wget https://ftp.gnu.org/gnu/gcc/gcc-12.2.0/gcc-12.2.0.tar.gz tar -zxvf gcc-12.2.0.tar.gz cd gcc-12.2.0 2. 运行脚本下载并配置 GCC 编译所需的依赖库。此步骤会自动下载如 GMP…
阅读更多...
设计模式基础概念（行为模式）：观察者模式（Observer）

设计模式基础概念（行为模式）：观察者模式（Observer）

概述 我们可以发现这样一个场景&#xff1a;如果你订阅了一份杂志或报纸&#xff0c; 那就不需要再去报摊查询新出版的刊物了。 出版社 &#xff08;即应用中的 “发布者&#xff08;publisher&#xff09;”&#xff09; 会在刊物出版后 &#xff08;甚至提前&#xff09; 直…
阅读更多...
JavaFX实战：从零到一实现一个功能丰富的“高级反应速度测试”游戏

JavaFX实战：从零到一实现一个功能丰富的“高级反应速度测试”游戏

大家好&#xff01;今天我们不搞简单的“红变绿就点”了&#xff0c;来点硬核的&#xff01;我们要用 JavaFX 从头开始&#xff0c;构建一个更复杂、更有趣也更考验能力的“高级反应速度测试”游戏。这个版本将引入选择反应时 (Choice Reaction Time) 的概念——你需要在多个干…
阅读更多...
CSS 选择器介绍

CSS 选择器介绍

CSS 选择器介绍 1. 基本概念 CSS&#xff08;层叠样式表&#xff09;是一种用于描述 HTML 或 XML 文档外观的语言。通过 CSS&#xff0c;可以控制网页中元素的布局、颜色、字体等视觉效果。而 CSS 选择器则是用来指定哪些 HTML 元素应该应用这些样式的工具。 2. 基本选择器 …
阅读更多...
Vue3父子组件数据同步方法

Vue3父子组件数据同步方法

在 Vue 3 中&#xff0c;当子组件需要修改父组件传递的数据副本并同步更新时&#xff0c;可以通过以下步骤实现&#xff1a; 方法 1&#xff1a;使用 v-model 和计算属性&#xff08;实时同步&#xff09; 父组件&#xff1a; vue <template><ChildComponent v-mo…
阅读更多...
el-table中el-input的autofocus无法自动聚焦的解决方案

el-table中el-input的autofocus无法自动聚焦的解决方案

需求 有一个表格展示了一些进度信息&#xff0c;进度信息可以修改&#xff0c;需要点击进度信息旁边的编辑按钮时&#xff0c;把进度变为输入框且自动聚焦&#xff0c;当鼠标失去焦点时自动请求更新接口。 注&#xff1a;本例以vue2 element UI为例 分析 这个需求看着挺简单…
阅读更多...
用高斯溅射技术跨越机器人模拟与现实的鸿沟：SplatSim 框架解析

用高斯溅射技术跨越机器人模拟与现实的鸿沟：SplatSim 框架解析

在机器人领域&#xff0c;让机器人在现实世界中精准执行任务是大家一直追求的目标。可模拟环境和现实世界之间存在着不小的差距&#xff0c;特别是基于 RGB 图像的操作策略&#xff0c;从模拟转移到现实时总是状况百出。 今天咱们就来聊聊 SplatSim 框架&#xff0c;看看它是怎…
阅读更多...
【自然语言处理与大模型】如何知道自己部署的模型的最大并行访问数呢？

【自然语言处理与大模型】如何知道自己部署的模型的最大并行访问数呢？

当你自己在服务器上部署好一个模型后&#xff0c;使用场景会有两种。第一种就是你自己去玩&#xff0c;结合自有的数据做RAG等等&#xff0c;这种情况下一般是不会考虑并发的问题。第二种是将部署好的服务给到别人来使用&#xff0c;这时候就必须知道我的服务到底支持多大的访问…
阅读更多...
[FPGA基础] UART篇

[FPGA基础] UART篇

Xilinx FPGA UART 硬件接口使用指南 1. 引言 UART (通用异步收发器) 是一种广泛使用的串行通信接口&#xff0c;因其简单、可靠和易于实现而成为 Xilinx FPGA 设计中的常见硬件接口。UART 用于在 FPGA 与外部设备&#xff08;如 PC、微控制器、传感器等&#xff09;之间进行数…
阅读更多...
【Netty4核心原理】【全系列文章目录】

【Netty4核心原理】【全系列文章目录】

文章目录 一、前言二、目录 一、前言 本系列虽说本意是作为 《Netty4 核心原理》一书的读书笔记&#xff0c;但在实际阅读记录过程中加入了大量个人阅读的理解和内容&#xff0c;因此对书中内容存在大量删改。 本系列内容基于 Netty 4.1.73.Final 版本&#xff0c;如下&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023