目前已經將前面都完成了，包含Dashboard與相關的評析等，
那今天要完成的部分
即要兌現把整個 Dashboard 以截圖形式輸出成 PDF
這個是當初在設定方案時就已經訂好的
係透過html2canvas＋jsPDF
全程在使用者瀏覽器裡完成，零後端、零成本的方式
用Vide coding的方式，本來我預想中是非常簡單的
但卻耗費了一點時間在處理BUG~

一、今日目標

實作匯出的路線設計
#dashboard-root → html2canvas 轉 Canvas → jsPDF 組頁下載

二、路徑設計

這邊會有四個步奏需要處理：
前面預留的容器 → html2canvas（scale: 2）→ jsPDF A4 直式等比縮放、過長自動分頁 → 下載（檔名含日期與產業）
因為匯出就是直接為PDF檔，
因此在設計上
針對Dashboard 的基準期聲明、假設清單、示範資料警語
直接截圖呈現

三、我下的 Prompt

實作 lib/export.ts 與匯出按鈕

1. 對 #dashboard-root 執行 html2canvas（scale: 2、背景強制白色）
2. jsPDF A4 直式，等比縮放置中，內容過長時分頁——分頁點依區塊高度計算，任何圖卡不得被切成兩半
3. 截圖前等待字型與圖表就緒
4. 匯出中按鈕顯示進度狀態，失敗給重試

四、三個坑?

在這邊總共做了幾次試驗，才完成修正
主要問題包含了以下幾點，而這些問題我也一一請Claude解釋並解決之

• 字型跑版：第一版 PDF 的中文字位置全部微妙偏移

幫我處理PDF跑板問題

Claude回覆

html2canvas 在 webfont 載入完成前量測了字寬，因此將修正：截圖前 await document.fonts.ready

• Retina 解析度差：因為預設 scale=1 在高解析螢幕上圖表的呈現結果是很差的

Claude回覆

調整至scale=2 解決，但記憶體翻倍

• 分頁切到圖：內容過長時 A4 分頁線正好落在龍捲風圖中間
  Claude回覆

改為依區塊高度計算分頁點，圖卡整張過頁

五、驗收

Claude給我的打包檔

需安裝新套件(本日唯一,也是全專案最後一次裝套件):

npm install html2canvas jspdf

確定可進行匯出
儘管前面已經先處理過一次
但仍然遇到圖表擠壓問題

因此又請Claude再修正一次

解決匯出pdf的資料會被壓縮到的問題

Claude的回覆

最後的結果呈現

六、今日小結

今天「只做截圖 PDF」這個範圍決策，是全案投報率最高的部分
因為 「自動分頁」四個字的工程量，超乎預期的大
當然我覺得圖片壓縮與解析度的問題
透過Vide coding的方式
能夠快速找到解答
同時因為在Claude使用中，
透過解析器去直接了解問題
我想這也是Claude與其他AI工具有所不同的地方
當然這很耗token
但成效卻是絕佳的~省時