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

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

news 来源：原创 2025/4/24 9:18:24

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>

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