🧾使用 SheetJS 在 Excel 匯出中正確顯示「千分位」與「小數」格式教學

 

前言

在現代的網頁應用中，我們常需要把後端資料匯出成 Excel，並希望在 Excel 中同時保留運算功能，又能以易讀的「千分位」和「小數」格式顯示數值。本文將介紹如何利用 SheetJS（XLSX.js）在 Vue 前端處理、設定 cell 格式，讓最終下載的 Excel 既能自動格式化，又能讓使用者直接做計算。

---

問題描述

在實作過程中，若直接把數字用 .ToString("N0") 或只將儲存格套用 #,##0，Excel 會將小數結果四捨五入到整數。例如：

• 原始值 0.9504 會顯示成 1。

• 但公式運算時，儲存格裡的真實值仍保留小數，造成顯示和運算結果不一致。

---

根本原因

• #,##0 這個 Excel number format 只顯示整數部分，並四捨五入。

• 若要顯示小數，就必須在格式碼中指定小數位數（如兩位小數 #,##0.00，四位小數 #,##0.0000）。

---

範例程式碼

以下示範如何在 Vue 前端，利用 SheetJS 下載「2.RemainSupply」工作表，並對 SUPPLY_QTY（E 欄）與 RemainSupply（G 欄）設定千分位與小數格式。

// 1. 讀取整張 ws 的範圍
const rangeTwo = XLSX.utils.decode_range(wsTwo['!ref']);

// 2. 逐列設定格式 (從第 3 列起，0-based index)
for (let R = rangeTwo.s.r + 2; R <= rangeTwo.e.r; ++R) {
  ['E','G'].forEach(col => {
    const cellRef = col + (R+1);
    const cell    = wsTwo[cellRef];
    if (cell && cell.t === 'n') {
      // 統一顯示兩位小數、並加千分位
      cell.z = '#,##0.00';
    }
  });
}

// 3. 把 sheet 加入 workbook
XLSX.utils.book_append_sheet(wb, wsTwo, '2.RemainSupply');

提醒：後端請勿 .ToString("N0")；直接傳回 decimal?，前端才能拿到純數字來套格式。

 

---

步驟總結

1. 後端投影：回傳數字型態，不要提前格式化成字串。

2. SheetJS 匯出：XLSX.utils.aoa_to_sheet + sheet_add_json 插入資料。

3. 格式化儲存格：遍歷 ws['!ref'] 範圍內的數字欄位，設定 cell.z。

4. 下載 Excel：XLSX.writeFile(wb, '檔名.xlsx')。

---