背景

實現預覽ofd/pdf超鏈接功能

業務實現

1. pdf的預覽

   實現方式：

   1. 直接使用 <iframe :src="${url}#navpanes=0&toolbar=0" /> 實現pdf的預覽。

      • navpanes=0 隱藏側邊欄
      • toolbar=0 隱藏頂部工具欄

   2. 使用pdf.js，代碼先行：

      <template><a-tabsv-if="props.urls.length > 0":default-active-key="activateTab"type="card"class="pdf-tabs"@change="tabChangeHandler"><a-tab-pane v-for="url in props.urls" :key="url" :tab="fileName(url)"><div class="pdf-container"><canvasv-if="url.endsWith('.pdf')"class="canvas":ref="(el) => (canvasRefs[url] = el)"></canvas><a-button class="mb-2" type="link" @click="handleDownload(url)">{{ fileName(url) }}</a-button></div></a-tab-pane></a-tabs>
      </template><script lang="ts" setup>
      import { ref, watch, nextTick } from 'vue'
      import * as pdfjsLib from 'pdfjs-dist'
      import { debounce } from 'lodash-es'
      import { saveAs } from 'file-saver'
      import EasyOFD from 'easyofd'interface Props {urls?: string[]
      }const props = withDefaults(defineProps<Props>(), {urls: () => [],
      })
      const url = ref<string>('')
      const activateTab = ref<string>('')
      const canvasRefs = ref<Record<string, HTMLCanvasElement | null>>({})// 文件類型判斷
      const ext = ref<string>('pdf')
      const isOfd = ref<boolean>(false)
      const isPdf = ref<boolean>(false)//  設置 PDF.js worker 路徑（推薦方式）
      pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'//  從 URL 中提取文件名
      function fileName(url: string): string {try {const decodeURL = decodeURIComponent(url).split('/')const lastSegment = decodeURL[decodeURL.length - 1]const firstIndex = lastSegment.indexOf('-')const lastIndex = lastSegment.lastIndexOf('-')if (firstIndex === -1 || lastIndex === -1 || lastIndex <= firstIndex) {return lastSegment.split('.')[0] // fallback 文件名}const name = lastSegment.substring(firstIndex + 1, lastIndex)const ext = name.split('.').pop()if (['pdf', 'ofd'].includes(ext ?? '')) {return name.substring(0, name.lastIndexOf('.'))}return name} catch {return 'unknown'}
      }// 獲取文件類型
      const getFileType = (url: string) => {const decodeURL = decodeURIComponent(url)ext.value = decodeURL.endsWith('.pdf') ? 'pdf' : 'ofd'isPdf.value = ext.value === 'pdf'isOfd.value = ext.value === 'ofd'isPdf.value ? loadAndRenderPdf(url) : loadAndRenderOfd(url)
      }
      //  下載文件
      const handleDownload = debounce((url: string) => {saveAs(url, `${fileName(url)}.${ext.value}`)
      }, 300)//  加載并渲染 PDF
      async function loadAndRenderPdf(pdfUrl: string) {try {const canvas = canvasRefs.value[pdfUrl]if (!canvas) returnconst loadingTask = pdfjsLib.getDocument(pdfUrl)const pdf = await loadingTask.promiseconst page = await pdf.getPage(1)const viewport = page.getViewport({ scale: 1.3 })canvas.height = viewport.heightcanvas.width = viewport.widthconst context = canvas.getContext('2d')if (!context) returnconst renderContext = {canvasContext: context,viewport,}await page.render(renderContext).promise} catch (error) {console.error('PDF 渲染失敗:', error)}
      }//  標簽頁切換時加載 PDF
      async function tabChangeHandler(key: string) {url.value = keyactivateTab.value = fileName(key)await nextTick() // 等待 DOM 更新if (key.endsWith('.pdf')) {await loadAndRenderPdf(key)}
      }//  頁面初始化時自動加載第一個 PDF
      watch(() => props.urls,async (newUrls) => {if (newUrls && newUrls.length > 0) {console.log('newUrls:', newUrls)url.value = newUrls[0]activateTab.value = fileName(newUrls[0])await nextTick()getFileType(newUrls[0])}},{ immediate: true },
      )
      </script><style lang="less" scoped>
      .canvas {border: 1px solid #000;width: 100%; // 響應式寬度border: 1px solid #000;
      }
      .pdf-container {display: flex;flex-direction: column;align-items: start;gap: 12px;max-width: 100%; // 限制最大寬度max-height: 400px;overflow: auto;
      }
      </style>
      

      說一下重點:

      問題一： 通過命令pnpm install pdf.js安裝后，通常出現引用問題；Cannot resolve pdf.worker.entry。代碼中使用的版本"pdfjs-dist": "^5.2.133"

      import * as pdfjsLib from 'pdfjs-dist';
      import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
      

      解決方案：

      1. 將文件從node_modules/pdfjs-dist/build/pdf.worker.min.mjs移動至項目的public/pdf.worker.min.mjs，可以使用命令 cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/pdf.worker.min.mjs
      2. 修改引用：

         import * as pdfjsLib from 'pdfjs-dist';pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'
         

      ps: 上面的代碼中包含了文件的下載功能，需要安裝 "file-saver": "^2.0.5",

2. ofd的預覽

   實現方式：easyofd
   安裝的依賴：pnpm -i jszip x2js jb2 opentype.js easyofd
   業務實現：

   <template><div ref="containerRef" style="width: 100%; height: 800px;"></div>
   </template><script setup>
   import EasyOFD from "easyofd"
   import { ref, onMounted } from 'vue'const containerRef = ref(null)onMounted(async () => {if (!containerRef.value) {console.error('OFD 容器不存在')return}const ofd = new EasyOFD('myOFD', containerRef.value)try {const response = await fetch('/files/sample.ofd')const blob = await response.blob()ofd.loadFromBlob(blob)} catch (e) {console.error('OFD 加載失敗:', e)}
   })
   </script><style lang="less" scoped>
   // 隱藏右側的ppi模塊，減少空白
   :deep(#myOFD-ppi) {display: none;
   }
   // 增加邊框
   :deep(#myOFD-ofd-canvas) {border: 1px solid #000;
   }
   // 隱藏頂部按鈕
   :deep(.OfdButton) {display: none !important;
   }
   </style>
   

官網效果：（easyOfd官網手冊）