你好，Vue?開發者們！

在 Web 開發中，我們經常會遇到需要在頁面中直接展示?PDF?文件的需求，例如預覽合同、顯示報告或在線閱讀文檔。你可能會想到用?<iframe>?或者一些重量級的庫，但它們往往不夠靈活或過于臃腫。

今天，我將向你介紹一個輕量、強大且對?Vue 3?非常友好的解決方案——vue-pdf-embed。

🤔?vue-pdf-embed?是什么？

vue-pdf-embed?是一個專門為 Vue 設計的 PDF 查看器組件。它基于 Mozilla 的?PDF.js，但去除了所有不必要的 UI 和復雜性，只專注于提供一個純粹、高性能的 PDF 渲染核心。

核心亮點：

• 📦?輕量級：只包含渲染 PDF 所需的核心邏輯，打包體積小。
• 🖼??高質量渲染：利用 PDF.js，確保 PDF 內容清晰、準確地顯示。
• 📱?響應式：能夠很好地適應不同尺寸的容器。
• 🔧?高度可控：通過 Props 和事件，你可以完全控制 PDF 的渲染行為，如頁碼、縮放、旋轉等。
• ??Vue 3 兼容：完美支持 Vue 3 的組合式 API 和?<script setup>?語法。

---

🛠? 安裝

將?vue-pdf-embed?添加到你的項目中非常簡單：

npm install vue-pdf-embed

---

🚀 快速上手：三分鐘渲染你的第一個 PDF

集成?vue-pdf-embed?只需要幾行代碼。

1. 引入組件

<script setup>
import VuePdfEmbed from "vue-pdf-embed";
</script>

2. 在模板中使用

你需要提供一個?source?屬性，指向你的 PDF 文件。它可以是一個 URL、Base64 字符串或 ArrayBuffer。

<template><VuePdfEmbedsource="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf"/>
</template>

就這樣！一個 PDF 查看器已經成功渲染在你的頁面上了。是不是超級簡單？

---

? 進階實戰：打造一個功能齊全的 PDF 查看器

當然，僅僅顯示 PDF 是不夠的。我們通常需要分頁、縮放等功能。下面，我們將創建一個更完整的 PDF 查看器組件。

核心思路

1. 加載 PDF：監聽?@loaded?事件，在 PDF 加載完成后獲取總頁數。
2. 分頁控制：創建“上一頁”和“下一頁”按鈕，通過修改?page?prop 來切換頁面。
3. 縮放控制：創建“放大”和“縮小”按鈕，通過修改?scale?prop 來調整視圖大小。
4. 狀態顯示：顯示當前頁碼和總頁數。

完整代碼示例 (PdfViewer.vue)

<template><div class="pdf-viewer-container"><!-- 控制欄 --><div class="controls"><button @click="prevPage" :disabled="page <= 1">上一頁</button><span>第 {{ page }} / {{ pageCount }} 頁</span><button @click="nextPage" :disabled="page >= pageCount">下一頁</button><button @click="zoomOut" :disabled="scale <= 0.5">縮小</button><span>縮放: {{ Math.round(scale * 100) }}%</span><button @click="zoomIn" :disabled="scale >= 2">放大</button></div><!-- PDF 渲染區域 --><div class="pdf-wrapper"><VuePdfEmbedref="pdfRef":source="pdfSource":page="page":scale="scale"@loaded="handleDocumentLoaded"@rendering-failed="handleRenderingFailed"/></div></div>
</template><script setup>
import { ref, watch } from "vue";
import VuePdfEmbed from "vue-pdf-embed";// PDF 文件源
const pdfSource = ref("https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf"
);// PDF 組件引用
const pdfRef = ref(null);// PDF 狀態
const page = ref(1);
const pageCount = ref(0);
const scale = ref(1);// PDF 加載完成回調
function handleDocumentLoaded(pdf) {console.log("PDF 加載完成!", pdf);pageCount.value = pdf.numPages;
}// PDF 渲染失敗回調
function handleRenderingFailed(error) {console.error("PDF 渲染失敗:", error);
}// 分頁功能
function prevPage() {if (page.value > 1) {page.value--;}
}function nextPage() {if (page.value < pageCount.value) {page.value++;}
}// 縮放功能
function zoomIn() {if (scale.value < 2) {scale.value += 0.25;}
}function zoomOut() {if (scale.value > 0.5) {scale.value -= 0.25;}
}// 監聽頁碼變化，確保在范圍內
watch(page, (newPage) => {if (newPage < 1) {page.value = 1;}if (newPage > pageCount.value && pageCount.value > 0) {page.value = pageCount.value;}
});
</script><style scoped>
.pdf-viewer-container {max-width: 900px;margin: 2rem auto;border: 1px solid #ccc;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}.controls {display: flex;justify-content: center;align-items: center;gap: 1rem;padding: 1rem;background-color: #f5f5f5;border-bottom: 1px solid #ccc;border-radius: 8px 8px 0 0;
}.controls button {padding: 0.5rem 1rem;border: 1px solid #ddd;border-radius: 4px;background-color: #fff;cursor: pointer;
}.controls button:disabled {cursor: not-allowed;opacity: 0.5;
}.controls span {font-size: 0.9rem;min-width: 100px;text-align: center;
}.pdf-wrapper {height: 70vh;overflow: auto;background-color: #e9e9e9;padding: 1rem;
}/* vue-pdf-embed 的內部樣式，我們可以覆蓋它 */
:deep(.vue-pdf-embed > div) {margin-bottom: 8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>

常用 Props 和事件

• Props:
• source: PDF 文件來源 (URL, Base64, Uint8Array, …)。
• page: (Number) 要顯示的頁碼。
• scale: (Number) 縮放比例。
• rotation: (Number) 旋轉角度 (0, 90, 180, 270)。
• width: (Number | String) 容器寬度。
• height: (Number | String) 容器高度。
• Events:
• @loaded: PDF 文檔加載完成時觸發，回調參數為 PDF.js 的文檔對象，可以從中獲取總頁數?numPages?等信息。
• @rendered: 所有可見頁面渲染完成時觸發。
• @rendering-failed: 渲染失敗時觸發。
• @password-requested: 當 PDF 需要密碼時觸發。

---

總結

vue-pdf-embed?為在 Vue 應用中嵌入 PDF 提供了一個極其簡單而又強大的解決方案。它避免了?<iframe>?的笨重和同源策略問題，也比一些重量級 UI 庫更輕量、更靈活。

通過組合其 Props 和事件，你可以輕松構建出符合業務需求的、交互豐富的 PDF 查看器。如果你正在尋找一個可靠的 Vue PDF 渲染方案，vue-pdf-embed?絕對是你的不二之選。

?Vue 3 實戰：從零到一用 vue-pdf-embed 打造功能齊全的 PDF 查看器 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享