對于 100 條這種量級的數(shù)據(jù)，雖然內(nèi)存壓力不大，但格式的標(biāo)準(zhǔn)化和導(dǎo)出的順滑度是區(qū)分“初級實(shí)現(xiàn)”和“資深工具”的關(guān)鍵。

在應(yīng)用場景下，用戶導(dǎo)出數(shù)據(jù)通常有兩個目的：備份/遷移（JSON）或分享/離線審閱（Excel） 。

1. 方案選擇：JSON vs. XLSX

2. 導(dǎo)出 JSON：最純粹的無損備份

這是最簡單的方案，不需要任何庫，直接利用 Blob 和 URL.createObjectURL。

/**
 * 導(dǎo)出為 JSON 文件
 * @param {Array} data - Prompt 數(shù)組
 */
function exportToJSON(data) {
  // 1. 序列化，添加 2 個空格縮進(jìn)方便閱讀
  const content = JSON.stringify(data, null, 2);
  
  // 2. 創(chuàng)建 Blob 
  const blob = new Blob([content], { type: 'application/json' });
  
  // 3. 觸發(fā)下載
  downloadFile(blob, `Prompts_Backup_${new Date().getTime()}.json`);
}

3. 導(dǎo)出 XLSX：專業(yè)的表格方案

對于 Excel 導(dǎo)出，SheetJS (xlsx) 是行業(yè)標(biāo)準(zhǔn)。作為 8 年老兵，我會建議你使用 動態(tài)引入（Dynamic Import） ，因?yàn)檫@個庫體積較大（數(shù)百 KB），沒必要在首屏加載。

實(shí)戰(zhàn)代碼（按需加載型）

async function exportToXLSX(data) {
  // 1. 動態(tài)加載 SheetJS
  const XLSX = await import('https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js');

  // 2. 數(shù)據(jù)扁平化（如果你的 Prompt 包含嵌套對象，需要先處理）
  const worksheet = XLSX.utils.json_to_sheet(data);
  
  // 3. 創(chuàng)建工作簿
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "MyPrompts");

  // 4. 寫入并觸發(fā)下載
  XLSX.writeFile(workbook, `Prompt_Export_${new Date().toLocaleDateString()}.xlsx`);
}

4. 資深開發(fā)的“性能與健壯性”補(bǔ)丁

① 統(tǒng)一的下載觸發(fā)器（避免內(nèi)存泄漏）

頻繁導(dǎo)出時，如果不銷毀 ObjectURL，會導(dǎo)致頁面內(nèi)存占用持續(xù)攀升。

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();
  
  // 關(guān)鍵：延遲移除和銷毀，確保下載任務(wù)已交給瀏覽器
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}

② 數(shù)據(jù)清洗（避免 Excel 報(bào)錯）

Excel 對某些特殊字符或過長的單個單元格（超過 32767 字符）會報(bào)錯。

• 對策：在 json_to_sheet 之前，遍歷數(shù)據(jù)，對超長 Prompt 進(jìn)行截?cái)嗷蚍謮K，或者至少給用戶一個提示。

③ 導(dǎo)出時的“防抖”與“狀態(tài)反饋”

100 條數(shù)據(jù)雖然快，但如果是 10000 條，UI 可能會卡死。

• 對策：點(diǎn)擊導(dǎo)出后，按鈕立即進(jìn)入 Loading 狀態(tài)，并使用 Web Worker 處理數(shù)據(jù)序列化，最后再回到主線程觸發(fā)下載。

5. 加分項(xiàng)

1. 文件名命名規(guī)范：不要只叫 data.json。推薦 [應(yīng)用名]_[分類]_[日期].xlsx。
2. 表頭國際化：如果你的工具面向國際，導(dǎo)出的 Excel 表頭（如：標(biāo)題、內(nèi)容、創(chuàng)建時間）應(yīng)該根據(jù)當(dāng)前 UI 語言動態(tài)映射。
3. CSV 降級：如果不想引幾十 KB 的 xlsx 庫，且數(shù)據(jù)結(jié)構(gòu)簡單，導(dǎo)出 CSV 是最高性能的方案。但要注意加上 BOM (Byte Order Mark) 頭（\ufeff），否則 Excel 打開中文會亂碼。

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

以上就是前端實(shí)現(xiàn)高質(zhì)量批量導(dǎo)出數(shù)據(jù)的實(shí)戰(zhàn)指南的詳細(xì)內(nèi)容，更多關(guān)于前端實(shí)現(xiàn)批量導(dǎo)出數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論