第十章：老闆最愛的功能 - 匯出 Excel (CSV) 報表

作為一個打卡系統的後台，不管你的圖表畫得多漂亮，你的老闆或人資最後一定會說出這句話： 「這個可以匯出成 Excel 讓我算薪水嗎？」

如果你不會寫匯出功能，你前面的努力就白費了。這章我們將教你如何用一個套件，三分鐘搞定這項「神聖的任務」。

🎯 本章目標

1. 認識 CSV 格式的原理。
2. 使用 react-csv 套件輕鬆實作匯出按鈕。
3. 為表格加上「匯出報表」功能。

---

📄 什麼是 CSV？

CSV (Comma-Separated Values) 是一種非常古老但極度通用的文字格式。 每一行代表一筆資料，每個欄位用「逗號」隔開。

姓名,打卡時間,狀態
王大明,2026-06-27 09:00,正常
李小美,2026-06-27 09:15,遲到

這種檔案雖然副檔名是 .csv，但全世界的 Excel 都能完美點開它！這就是為什麼我們通常實作「匯出 CSV」來代替複雜的 Excel 產生器。

---

🚀 第一步：請 AI 幫你寫匯出按鈕

[!TIP] Vibe Prompt (請複製並發送給 AI)： 我的後台有一個打卡紀錄陣列 (records)。我需要一個按鈕可以把資料匯出成 CSV 讓 Excel 可以開。 1. 請給我 npm 安裝 react-csv 的指令。 2. 幫我在 DataTable 元件中加入 <CSVLink>。 3. 請定義好 CSV 的標題列 (headers)，並將按鈕設計成顯眼的綠色 (Tailwind)，寫著「下載報表」。 4. 下載的檔名請設定為 "本月打卡紀錄.csv"。

AI 的回答會讓你驚訝於這有多簡單：

1. 安裝套件：

npm install react-csv

2. 實作按鈕：

import { CSVLink } from "react-csv";

// 假設這是你的資料庫抓下來的紀錄
const data = [
  { name: "王大明", time: "2026-06-27 09:00", status: "正常" },
  { name: "李小美", time: "2026-06-27 09:15", status: "遲到" }
];

// 定義表頭，標示 key 跟顯示的名稱 (label)
const headers = [
  { label: "員工姓名", key: "name" },
  { label: "打卡時間", key: "time" },
  { label: "出勤狀態", key: "status" }
];

export default function DataTable() {
  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">打卡紀錄表</h2>
        
        {/* 魔法就在這裡！ */}
        <CSVLink 
          data={data} 
          headers={headers} 
          filename="本月打卡紀錄.csv"
          className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg flex items-center"
        >
          ⬇️ 下載 Excel 報表
        </CSVLink>
      </div>
      
      {/* 下面是你的表格 */}
      <table>...</table>
    </div>
  );
}


---

🎉 課程大總結 (Course 3 結業)

狂賀！Line Punch Web (打卡後台系統) 實戰專案 10 章全部完成！

你學習了：

1. Vite + React 的基建與 Layout 設計
2. Mock Data 與 Data Table (表格) 實作
3. API 串接 (Axios) 與解決萬惡的 CORS 錯誤
4. Recharts 商業圖表與 Zustand 狀態管理
5. React Hook Form 防呆表單與 CSV 報表匯出

這已經超越了許多初階工程師的實力了。你現在具備了獨立接下「企業內部管理系統 (ERP/CRM)」外包案的能力。 好好享受這個成果，我們下個專案見！