告别后端转换：高质量批量导出实战

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

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

1. 方案选择：JSON vs. XLSX

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

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

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

JavaScript

javascript 复制代码

/**
 * 导出为 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），没必要在首屏加载。

实战代码（按需加载型）

JavaScript

javascript 复制代码

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，会导致页面内存占用持续攀升。

JavaScript

ini 复制代码

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 打开中文会乱码。

JavaScript

ini 复制代码

// CSV 乱码修正技巧
const csvContent = "\ufeff" + convertToCSV(data);
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });