對于 100 條這種量級的數(shù)據(jù)，雖然內(nèi)存壓力不大，但格式的標(biāo)準(zhǔn)化和導(dǎo)出的順滑度是區(qū)分“初級實現(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） ，因為這個庫體積較大（數(shù)百 KB），沒必要在首屏加載。

實戰(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 報錯）

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

對策：在 json_to_sheet 之前，遍歷數(shù)據(jù)，對超長 Prompt 進(jìn)行截斷或分塊，或者至少給用戶一個提示。

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

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

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

5. 加分項

• 文件名命名規(guī)范：不要只叫 data.json。推薦 [應(yīng)用名]_[分類]_[日期].xlsx。
• 表頭國際化：如果你的工具面向國際，導(dǎo)出的 Excel 表頭（如：標(biāo)題、內(nèi)容、創(chuàng)建時間）應(yīng)該根據(jù)當(dāng)前 UI 語言動態(tài)映射。
• 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;' });

到此這篇關(guān)于前端JS實現(xiàn)高質(zhì)量批量導(dǎo)出JSON和XLSX的實戰(zhàn)指南的文章就介紹到這了,更多相關(guān)JS導(dǎo)出JSON和XLSX內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論