記得在 project-card 上設計了兩個按鈕嗎？一個是「設計理念」，另一個是「產品網址」。希望「設計理念」按鈕點擊後，直接打開我在 Day 18 準備的內容頁面。

1. 直接開啟pdf

   把 pdf 放在 /public 資料夾下，並設定點擊按鈕時，開啟分頁顯示。

   const openLink = (url) => {
     if (!url) return
     if (typeof window !== 'undefined') {
       window.open(url, '_blank')
     }
   };
   

2. 網站內嵌顯示 PDF

   <v-dialog v-model="showPdf" max-width="800">
     <iframe
       v-if="pdfUrl"
       :src="pdfUrl"
       width="100%"
       height="600"
       style="border:none;"
     ></iframe>
   </v-dialog>
   
   <CustomButton
     :btnName="'查看設計理念'"
     @click="viewPdf(props.project.designConceptUrl)"
   />
   
   <script setup>
   const showPdf = ref(false)
   const pdfUrl = ref('')
   
   const viewPdf = (url) => {
     pdfUrl.value = url
     showPdf.value = true
   }
   </script>
   
   

3. 強制下載

   const openLink = (url) => {
     if (!url) return;
     if (typeof window === 'undefined') return;
   
     // 若是 PDF 則觸發下載
     if (url.endsWith('.pdf')) {
       const a = document.createElement('a');
       a.href = url;
       a.download = url.split('/').pop(); // 自動抓檔名
       a.click();
     } else {
       window.open(url, '_blank');
     }
   };
   
   

或許有很多其他種方法可以呈現，我就先簡單做一版了喔！我要去洗澡了！