脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS导出JSON和XLSX

前端JS实现高质量批量导出JSON和XLSX的实战指南

 更新时间：2026年03月03日 09:49:14   作者：前端小小栈  
在应用场景下,用户导出数据通常有两个目的,即备份/迁移（JSON）或分享/离线审阅（Excel）,下面我们就来看看具体实现方法,希望对大家有所帮助

对于 100 条这种量级的数据，虽然内存压力不大，但格式的标准化和导出的顺滑度是区分“初级实现”和“资深工具”的关键。

在应用场景下，用户导出数据通常有两个目的：备份/迁移（JSON）或分享/离线审阅（Excel） 。

1. 方案选择：JSON vs. XLSX

格式优势劣势资深开发建议
JSON结构化、无损、浏览器原生支持。对非技术人员不友好。用于系统备份、数据迁移。
XLSX可读性极强、支持排序筛选。需要第三方库、体积较大。用于周报汇报、团队分享。

2. 导出 JSON：最纯粹的无损备份

这是最简单的方案，不需要任何库，直接利用 Blob 和 URL.createObjectURL。

/**
 * 导出为 JSON 文件
 * @param {Array} data - Prompt 数组
 */
function exportToJSON(data) {
  // 1. 序列化，添加 2 个空格缩进方便阅读
  const content = JSON.stringify(data, null, 2);
  
  // 2. 创建 Blob 
  const blob = new Blob([content], { type: 'application/json' });
  
  // 3. 触发下载
  downloadFile(blob, `Prompts_Backup_${new Date().getTime()}.json`);
}

3. 导出 XLSX：专业的表格方案

对于 Excel 导出，SheetJS (xlsx) 是行业标准。作为 8 年老兵，我会建议你使用 动态引入（Dynamic Import） ，因为这个库体积较大（数百 KB），没必要在首屏加载。

实战代码（按需加载型）

async function exportToXLSX(data) {
  // 1. 动态加载 SheetJS
  const XLSX = await import('https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js');

  // 2. 数据扁平化（如果你的 Prompt 包含嵌套对象，需要先处理）
  const worksheet = XLSX.utils.json_to_sheet(data);
  
  // 3. 创建工作簿
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "MyPrompts");

  // 4. 写入并触发下载
  XLSX.writeFile(workbook, `Prompt_Export_${new Date().toLocaleDateString()}.xlsx`);
}

4. 资深开发的“性能与健壮性”补丁

统一的下载触发器（避免内存泄漏）

频繁导出时，如果不销毁 ObjectURL，会导致页面内存占用持续攀升。

function downloadFile(blob, fileName) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  
  // 关键：延迟移除和销毁，确保下载任务已交给浏览器
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}

数据清洗（避免 Excel 报错）

Excel 对某些特殊字符或过长的单个单元格（超过 32767 字符）会报错。

对策：在 json_to_sheet 之前，遍历数据，对超长 Prompt 进行截断或分块，或者至少给用户一个提示。

导出时的“防抖”与“状态反馈”

100 条数据虽然快，但如果是 10000 条，UI 可能会卡死。

对策：点击导出后，按钮立即进入 Loading 状态，并使用 Web Worker 处理数据序列化，最后再回到主线程触发下载。

5. 加分项

  • 文件名命名规范：不要只叫 data.json。推荐 [应用名]_[分类]_[日期].xlsx。
  • 表头国际化：如果你的工具面向国际，导出的 Excel 表头（如：标题、内容、创建时间）应该根据当前 UI 语言动态映射。
  • CSV 降级：如果不想引几十 KB 的 xlsx 库，且数据结构简单，导出 CSV 是最高性能的方案。但要注意加上 BOM (Byte Order Mark) 头（\ufeff），否则 Excel 打开中文会乱码。
// CSV 乱码修正技巧
const csvContent = "\ufeff" + convertToCSV(data);
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

到此这篇关于前端JS实现高质量批量导出JSON和XLSX的实战指南的文章就介绍到这了,更多相关JS导出JSON和XLSX内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论