記得在 project-card 上設計了兩個按鈕嗎?一個是「設計理念」,另一個是「產品網址」。希望「設計理念」按鈕點擊後,直接打開我在 Day 18 準備的內容頁面。
直接開啟pdf
把 pdf 放在 /public 資料夾下,並設定點擊按鈕時,開啟分頁顯示。
const openLink = (url) => {
  if (!url) return
  if (typeof window !== 'undefined') {
    window.open(url, '_blank')
  }
};
網站內嵌顯示 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>
強制下載
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');
  }
};
或許有很多其他種方法可以呈現,我就先簡單做一版了喔!我要去洗澡了!