【完整教學】Vue 3 + Vite 串接 .NET API 並以中文表格輸出網頁與 Excel（含樣式與欄位對應）

-

✨ 前言：當工程師遇上 Excel 輸出與中文表格的挑戰

在企業內部系統開發中，「將資料表格輸出成 Excel」是常見的需求之一。如果你使用 Vue 3 搭配 Vite 作為前端框架，並以 .NET Core API 提供後端資料，還希望將表格顯示為「中文欄位名稱」並美觀呈現在網頁上與 Excel 檔中，那你可能會遇到以下挑戰：

  1. API 回傳資料是英文欄位，但客戶要看中文

  2. Excel 匯出標題變成英文字串，不符合格式

  3. 頁面表格欄寬不一致，看起來很亂

  4. 想要像群創光電一樣的表格 UI 和下載功能

別擔心，這篇文章一步一步教你解決以上所有問題！


🧱 系統架構概覽

  • 前端技術：Vue 3 + Vite + Axios

  • 後端技術：ASP.NET Core Web API

  • 匯出工具：xlsx + file-saver

  • API 範例：/api/Data/GetDataByVersionA?apsVersion=V1


🛠️ Step 1：建立 API 並正確回傳資料

.NET API Controller 中，我們設計一個 GetDataByVersionA 方法： 

[HttpGet("GetDataByVersionA")]
public async Task>> GetDataByVersionA([FromQuery] string apsVersion)
{
    var result = await _dataProcessor.GetDataByVersionA(apsVersion);
    return Ok(result);
}

這個方法會依據使用者傳入的版本編號（例如 V1），回傳對應的資料清單。


🧩 Step 2：Vue 3 前端如何串接並轉換欄位為中文？

✍️ 對照欄位轉換表（Mapping）

我們使用 JavaScript 將英文欄位名稱轉換為中文：

const columnMapping = {
  APS_VERSION: "計畫版本",
  DOC_NO: "急單編號",
  DEMAND_DATE: "需求日期",
  DEMAND_QTY: "需求數量",
  SITE: "廠別 SITE",
  CUSTOMER_NAME: "客戶",
  APPL: "Appl.",
  PLANT: "PLANT",
  PRODUCT_ID: "機種",
  RECIPE: "製程",
  EQ: "機台",
  INPUT_DATE: "日期",
  INPUT_QTY: "投入數量",
  NORMAL_OUTPUT: "產出數量"
};

我們利用 map() 函數將 API 資料進行轉換，產生新的資料供表格使用：

tableData.value = response.data.map(row => {
  let newRow = {};
  Object.keys(row).forEach(key => {
    newRow[columnMapping[key] || key] = row[key];
  });
  return newRow;
});

🎨 Step 3：網頁表格樣式與寬度優化（模仿群創風格）

為了讓網頁表格更直觀與企業風格一致，我們套用以下幾點樣式：

  • 標題列背景為黃色

  • 欄位寬度依照內容長度自適應

  • 禁止自動換行（white-space: nowrap）

th {
  background-color: #FFFF00;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
}

td {
  white-space: nowrap;
  padding: 8px;
  text-align: center;
}

📤 Step 4：匯出 Excel 並保留中文標題

我們使用 xlsx 套件轉換為 Excel 格式，並搭配 file-saver 匯出檔案：

const exportToExcel = () => {
  if (mappedTableData.value.length === 0) {
    alert('沒有數據可導出');
    return;
  }

  const ws = XLSX.utils.aoa_to_sheet([
    tableHeaders.value, // 中文標題列
    ...mappedTableData.value.map(row => Object.values(row))
  ]);

  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, '供應鏈計劃數據');

  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });

  saveAs(blob, `供應鏈計劃數據_${selectedVersion.value}.xlsx`);
};

✅ 匯出的檔案名稱會自動依照選擇的版本命名，例如：供應鏈計劃數據_V1.xlsx

 

 

✅ 實際成果展示


▲ 網頁表格介面





▲ 匯出的 Excel 檔案




💡 結語：這些細節才是企業系統的專業度體現

將英文欄位轉換為中文、設計美觀的表格、提供一鍵匯出，這些都不只是「畫面」，而是資訊整合能力的展現。如果你是負責企業內部系統或專案報表工具的開發者，這些技巧絕對值得收藏與應用！








留言

張貼留言

這個網誌中的熱門文章

🔍Vue.js 專案錯誤排查：解決 numericFields is not defined 與合併儲存格邏輯最佳化

-
  前言 在前端開發專案中，處理表格數據與 Excel 匯出是常見的需求。 最近在專案中，遇到一個常見但讓人頭痛的錯誤訊息： Uncaught ReferenceError: numericFields is not defined 本文將用簡單的方式，帶你了解這個錯誤的成因、如何修改程式碼，以及如何最佳化「合併儲存格」與「數值加總」的邏輯。 問題場景：表格合併與數值加總 專案中需要達成以下功能： 同一個 APS_PLAN_NO 下，若 TFT4 相同，則 TFT5 欄位要合併。 數值欄位要加總，並以千分位格式輸出。 匯出到 Excel 時，也要套用相同邏輯。 在 Vue 的 rowSpans 計算邏輯中，初始版本如下： const rowSpans = computed ( () => { const rows = filteredData. value const spans = rows. map ( () => { const obj = {} tableHeaders. value . forEach ( key => obj[key] = 0 ) return obj }) ... return spans }) 但是，當我們在 exportToExcel() 使用時，出現了以下錯誤： Uncaught ReferenceError: numericFields is not defined 錯誤原因 這個錯誤訊息代表： 👉 numericFields 在程式中根本沒有宣告，所以瀏覽器不知道它是什麼。 舉例來說，假設我們在程式裡寫了這樣的判斷： if (numericFields. includes (key)) { // 處理數值欄位 } 但其實 numericFields 沒有定義，程式就會直接報錯。 解決方案：定義 numericFields ...
閱讀完整內容

🔎EF Core 連 Oracle 出現 ORA-00600 [kpp_concatq:2] 的完整排錯指南（含 EF Core ToString/CultureInfo 錯誤）

-
  摘要（Meta Description） 在 .NET EF Core 對 Oracle 查詢時，若遭遇 ORA-00600 [kpp_concatq:2] ，多半是查詢優化器在字串型別轉換或重寫（Query Transformation）時踩到版本 Bug。本文以實戰日誌形式，示範如何用 FromSqlRaw + 參數型別/長度對齊 + CAST + Hint 立即止血，並處理 EF Core 另一個常見錯誤：「 CultureInfo 常值被傳進 ToString 造成可能記憶體外洩 」。附可直接套用的程式碼。 目錄 錯誤現象 根因分析 三步驟「立即止血」 安全重構：可直接貼用的程式碼 進階避雷：CTE/MATERIALIZE 與 View 包裝 EF Core ToString / CultureInfo 錯誤的正確處理 版本與長期解法（根治） 效能與穩定性小技巧 檢查清單（Checklist） FAQ 結語 錯誤現象 常見堆疊片段如下（節錄）： Oracle .ManagedDataAccess .Client .OracleException ( 0 x80004005): ORA-00600 : 內部錯誤代碼, 引數: [kpp_concatq:2] , [4] , [3] ...
閱讀完整內容

🛠【ASP.NET Core + Oracle】解決 ORA-00904 "FALSE": 無效的 ID 錯誤與資料欄位動態插入顯示問題

-
  🔍 問題描述 在開發群創光電內部的 APS 排程系統（使用 ASP.NET Core + Vue 3 + Oracle），前端發生多筆錯誤訊息： Request failed with status code 500 Oracle.ManagedDataAccess.Client.OracleException: ORA-00904: "FALSE": 無效的 ID 這是 Oracle 資料庫對布林值處理不一致造成的錯誤，我們後端嘗試將某個欄位 .Where(x => x.FLAG == false) 寫法，經由 EF Core 轉成 SQL： SELECT * FROM TABLE WHERE FLAG = FALSE 而 Oracle 並不支援 FALSE 關鍵字作為布林值 → 導致查詢失敗。 🔧 解決方案 1：避免布林值直接進入 LINQ to SQL EF Core + Oracle 不支援下列語法： .Where(x => x.IsActive == false) // ❌ Oracle 無法解析 FALSE ✅ 解法 ：將布林判斷移至 .ToList() 之後，變成記憶體篩選： var list = await db.Table.Where(x => x.Version == ver).ToListAsync(); var filtered = list.Where(x => !x.IsActive).ToList(); // ✅ 在記憶體中比對布林 🔧 解決方案 2：安全轉換 SEQ_NO 為 Decimal 後端為了將前段表 APSZFRONT 的 SEQ_NO 與 APSZLCM 的 APS_PLAN_SEQ 對應，用到了這段程式碼： Convert.ToDecimal(front.SEQ_NO) 但一旦 SEQ_NO 含有英文字母（例如 GN140CHCAAE90S_20250811_1_531 ），就會丟出 FormatException → 造成 HTTP 500。 ✅ 正確寫法（TryParse 避免失敗） ： de...
閱讀完整內容