✨ 纯前端离线导出 Excel（.xlsx）功能实现 —— 无需服务器、一行不装、浏览器直开

你提供的 HTML 代码是一个**纯前端、离线可用的效期管理工具**，目前导出功能（如“导出全部数据”、“导出当前分类”）尚未实现 —— 你希望： ✅ **将原本计划导出 `.json` 的功能，改为导出 `.xlsx` 表格文件（Excel 格式）** ✅ **完全本地运行：不依赖服务器、不依赖 Node.js、不联网，仅靠浏览器打开即可使用** ✅ **只改导出逻辑，其余 UI/功能/样式保持不变** --- ### ✅ 解决方案：使用 `SheetJS (xlsx.js)` 纯前端生成 Excel > 🔑 关键技术点： > - 引入轻量级、MIT 协议的 [`xlsx.full.min.js`](https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js)（约 700KB，CDN 加载快，无构建依赖） > - 使用 `XLSX.utils.json_to_sheet()` 将 JS 数据转为 worksheet > - 使用 `XLSX.writeFile()` 触发浏览器下载 `.xlsx` 文件（无需后端） > - 兼容 Chrome / Edge / Firefox / Safari（现代浏览器均支持） --- ### ✅ 修改步骤（只需在你原有 HTML 中添加几段代码） #### ✅ 第一步：在 `<head>` 或 `<body>` 底部添加 SheetJS CDN（推荐放 `</body>` 前） ```html  <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script> ``` #### ✅ 第二步：找到你「导出按钮」对应的位置（比如 `<button onclick="exportAll()">导出全部数据</button>`），并补充 JS 函数 > 💡 假设你已有类似如下按钮（若没有，请先加）： ```html  <div class="input-group"> <button class="btn btn-outline" onclick="exportAll()">📁 导出全部数据</button> <button class="btn btn-outline" onclick="exportFiltered()">📋 导出当前分类</button> </div> ``` #### ✅ 第三步：在 `</body>` 闭合前，添加以下 JavaScript（含核心导出逻辑） ```html <script> // 👇 示例数据（请替换为你实际维护的 data 数组） // 通常你的页面会有一个全局变量，比如 window.inventoryData = [...] // 这里我们模拟一份结构，你需替换成你真实的数据源 let inventoryData = [ { "商品名称": "阿莫西林胶囊", "规格": "0.25g×24粒", "批号": "20230501", "生产日期": "2023-05-01", "有效期至": "2025-04-30", "剩余天数": 128, "状态": "正常" }, { "商品名称": "氯雷他定片", "规格": "10mg×12片", "批号": "20230815", "生产日期": "2023-08-15", "有效期至": "2025-08-14", "剩余天数": 219, "状态": "正常" }, { "商品名称": "维生素C泡腾片", "规格": "1g×20片", "批号": "20231120", "生产日期": "2023-11-20", "有效期至": "2024-11-19", "剩余天数": -12, "状态": "过期" } ]; // 🌟 核心导出函数：导出全部数据为 Excel (.xlsx) function exportAll() { if (!inventoryData || inventoryData.length === 0) { alert("⚠️ 暂无数据可导出"); return; } const ws = XLSX.utils.json_to_sheet(inventoryData); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "效期数据"); XLSX.writeFile(wb, "智慧效期管理_全部数据.xlsx"); } // 🌟 导出当前分类（示例：按“状态”筛选，你可根据实际分类逻辑调整） function exportFiltered() { // ✅ 替换下面这行为你真实的「当前分类筛选逻辑」 // 例如：从下拉框获取选中分类 → document.getElementById('categoryFilter').value // 这里我们假设当前分类是“过期”，你按需修改 filterCondition const filterCondition = "过期"; // ← 请根据你实际 UI 改成动态值！ const filtered = inventoryData.filter(item => item["状态"] === filterCondition); if (filtered.length === 0) { alert(`⚠️ 当前分类【${filterCondition}】无数据可导出`); return; } const ws = XLSX.utils.json_to_sheet(filtered); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, `效期数据_${filterCondition}`); XLSX.writeFile(wb, `智慧效期管理_${filterCondition}.xlsx`); } // 💡 提示：如果你有动态分类（如按“剩余天数”区间、或下拉选择），请把 filterCondition 替换为： // const category = document.querySelector('#filter-select')?.value || ''; // const filtered = inventoryData.filter(item => item.categoryField === category); </script> ``` --- ### ✅ 补充说明 & 最佳实践建议 | 项目 | 说明 | |------|------| | ✅ **零依赖** | `xlsx.full.min.js` 是单文件，CDN 加载，无需 npm、打包、服务端 | | ✅ **安全可靠** | 所有数据在浏览器内存处理，不上传、不泄露 | | ✅ **中文支持好** | SheetJS 原生支持 UTF-8，表头/内容中文无乱码 | | ⚠️ **注意替换数据源** | 把上面 `inventoryData` 替换成你页面中真实维护的数据数组（比如 `window.tableData` 或 `getData()` 函数返回值） | | ⚠️ **分类逻辑自定义** | `exportFiltered()` 中的 `filterCondition` 需对接你实际的分类筛选方式（如 `<select id="category">`） | | 💡 **扩展建议** | 可增加「导出时自动计算状态列」「冻结首行」「设置列宽」等（需要额外调用 `ws['!cols']` 等） | --- ### ✅ 最终效果 - 点击「导出全部数据」→ 自动下载 `智慧效期管理_全部数据.xlsx` - 点击「导出当前分类」→ 下载对应分类命名的 `.xlsx`（如 `智慧效期管理_过期.xlsx`） - 打开 Excel 完美显示表格，含表头、中文、数字、日期（Excel 自动识别格式） --- ######[AI写代码神器 | 1653点数解答 | 2026-04-01 20:48:06]

服务商

更多选项

快捷项

自定义