Admin 元件
Pdf Viewer
內嵌 PDF 檢視器（EmbedPDF）。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/pdf-viewerimport { AdminPdfViewer, AdminPdfViewerFullscreen, AdminPdfViewerPageNav, AdminPdfViewerPages, AdminPdfViewerToolbar, AdminPdfViewerZoom} from '@/components/admin/pdf-viewer'用法
<script setup lang="ts">import { AdminPdfViewer } from '@/components/admin/pdf-viewer'</script><template> <admin-pdf-viewer class="h-[640px] w-full" src="https://snippet.embedpdf.com/ebook.pdf" /></template>場景
自訂 toolbar 組合
<script setup lang="ts">import { AdminPdfViewer, AdminPdfViewerPageNav, AdminPdfViewerPages, AdminPdfViewerToolbar, AdminPdfViewerZoom} from '@/components/admin/pdf-viewer'</script><template> <admin-pdf-viewer class="h-[640px] w-full" src="https://snippet.embedpdf.com/ebook.pdf"> <admin-pdf-viewer-pages /> <admin-pdf-viewer-toolbar> <template #left> <admin-pdf-viewer-page-nav /> </template> <template #right> <admin-pdf-viewer-zoom /> </template> </admin-pdf-viewer-toolbar> </admin-pdf-viewer></template>外部控制當前頁
<script setup lang="ts">import { ref } from 'vue'import { AdminButton } from '@/components/admin/button'import { AdminPdfViewer } from '@/components/admin/pdf-viewer'const page = ref<number | undefined>(1)</script><template> <div class="flex w-full min-w-0 flex-col gap-3"> <div class="flex items-center gap-2"> <admin-button size="small" variant="outline" @click="page = 1">回到首頁</admin-button> <admin-button size="small" variant="outline" @click="page = (page ?? 1) + 1" >前進 1 頁</admin-button > <span class="text-sm text-text-70">外部當前頁：{{ page }}</span> </div> <admin-pdf-viewer v-model:page="page" class="h-[560px] w-full" src="https://snippet.embedpdf.com/ebook.pdf" /> </div></template>API 參考
組成
<template> <admin-pdf-viewer src="..."> <admin-pdf-viewer-pages /> <admin-pdf-viewer-toolbar> <admin-pdf-viewer-page-nav /> <admin-pdf-viewer-zoom /> <admin-pdf-viewer-fullscreen /> </admin-pdf-viewer-toolbar> </admin-pdf-viewer></template>admin-pdf-viewer
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
src* | string | — | PDF 檔案 URL（必填） |
defaultPage | number | undefined | 1 | uncontrolled 模式之初始頁碼 |
defaultZoom | number | undefined | — | 初始縮放百分比 |
class | ClassValue | — | 根元素之自訂 class |
page | number | undefined | — | — |
* 代表必填
Events
| 名稱 | Payload | 說明 |
|---|---|---|
error | Error | 載入或渲染發生錯誤時觸發 |
load | string | PDF 載入完成時觸發，payload 為內部 documentId |
update:page | number | undefined | — |
pageChange | number | 當前頁碼變更時觸發 |
zoomChange | number | 縮放百分比變更時觸發 |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-pdf-viewer-toolbar
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
left | {} | — |
right | {} | — |
admin-pdf-viewer-pages
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
admin-pdf-viewer-fullscreen
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | unknown | — | — |
admin-pdf-viewer-page-nav
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | unknown | — | — |
admin-pdf-viewer-zoom
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | unknown | — | — |
注意事項
- 不支援 SSR：PDFium 引擎依賴 WebAssembly 與 Web Worker；元件殼不含
<ClientOnly>。Nuxt 請自行以<ClientOnly>包覆（可加#fallbackloading）；純 CSR 不需處理。見 安裝 · SSR。PDF 內容不會出現於 server-rendered HTML，無法 SEO。 - 首次掛載需下載 PDFium wasm：載入時間視網路而定，預期延遲約數百毫秒到數秒；下載期間顯示既有
admin-loading元件。 - wasm 二進位來源：PDF 解析使用 PDFium WebAssembly，預設由 EmbedPDF 官方 CDN 動態載入。若部署於離線環境、封閉內網，或資安政策禁止外部 CDN，需自行 host
.wasm檔並於usePdfiumEngine設定中指定來源（參數名請參考 EmbedPDF 文件）。 - 父容器需有明確寬度：放大時 PDF 頁面可能比 viewer 寬，內部 viewport 自動水平捲動。若元件包在無寬度約束的 flex item（例如
<div class="flex flex-col gap-3">）內，PDF 寬度會推擠父容器；需在父 wrapper 加w-full或min-w-0確保 viewer 寬度受控。