在前面的天數中，我們依序完成許多功能。資料雖然都透過 localStorage 安全地保存在瀏覽器中，但如果使用者想用 Excel 進行更深入的財務分析或備份該怎麼辦呢？所以今天我們會為記帳網站加上一個超實用的小工具：一鍵匯出 CSV（Excel）報表！讓使用者的消費紀錄不只能留在網頁上，還能隨時打包下載帶走。

一、 在預算設定頁面加入匯出按鈕

我們在原先的「預算管理設定」頁面下方，新增了一個匯出按鈕，方便使用者操作：

<!-- 預算管理頁面中的匯出按鈕 -->
<div id="budget-page" class="page-view">
    <div class="section-box">
        <h3>預算管理設定</h3>
        <p style="color: #666; margin-bottom: 15px;">在此設定您的每週與每月消費上限，幫荷包把關：</p>
        <div style="display: flex; flex-direction: column; gap: 10px; max-width: 400px;">
            <label>周預算上限：</label><input type="number" id="weekly-budget" placeholder="例如: 2000">
            <label>月預算上限：</label><input type="number" id="monthly-budget" placeholder="例如: 8000">
            <button id="set-budget-btn" style="margin-top: 10px;">儲存預算設定</button>
            
            <!-- 匯出 CSV 按鈕 -->
            <button id="export-csv-btn" style="margin-top: 20px; background-color: #27ae60; color: white; font-weight: 500; border: none; padding: 10px; border-radius: 4px; cursor: pointer;"> 匯出記帳 CSV 報表</button>
        </div>
    </div>
</div>

二、 核心邏輯：將 JSON 陣列轉為 CSV 並觸發下載

在 script.js 中，我們監聽按鈕點擊事件。透過迴圈將 expenses 陣列組裝成 CSV 格式的字串。特別注意，我們在開頭加上了 \uFEFF（BOM 標頭），這樣當使用者用 Excel 打開 CSV 時才不會發生中文亂碼的問題！

// 匯出 CSV 報表功能
const exportCsvBtn = document.getElementById('export-csv-btn');

exportCsvBtn.addEventListener('click', function() {
    if (expenses.length === 0) {
        alert("目前沒有任何記帳資料可以匯出喔！趕快去新增幾筆消費吧～");
        return;
    }

    // 加入 \uFEFF 確保 Excel 開啟 UTF-8 編碼的 CSV 時不會變亂碼
    let csvContent = "\uFEFF日期,消費名稱,金額,類別\n";

    expenses.forEach(item => {
        let catName = item.category;
        switch(item.category) {
            case 'food': catName = '吃的喝的'; break;
            case 'transport': catName = '交通'; break;
            case 'entertainment': catName = '娛樂'; break;
            case 'clothes': catName = '買買買'; break;
            default: catName = '其他';
        }
        
        // 組合每一行資料（名稱前後加上引號，避免名稱中含有逗號影響表格結構）
        csvContent += `${item.date},"${item.name}",${item.amount},${catName}\n`;
    });

    // 建立 Blob 物件並利用暫時的 <a> 標籤觸發瀏覽器下載
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', 'my_expense_report.csv');
    document.body.appendChild(link);
    
    link.click();
    document.body.removeChild(link);
    
    alert("成功匯出記帳報表 CSV 檔案！");
});