PDF 是一種常用的文件格式，在很多場景下需要預覽展示。本篇文章將介紹如何使用 Vue 實現 PDF 文件的預覽功能。

在 Vue 中實現 PDF 預覽，需要用到一個名為 vue-pdf 的第三方組件。該組件提供了 PDF 文件的渲染和展示功能，同時支持鼠標滾動翻頁、放大縮小等操作。

npm install vue-pdf

安裝完依賴后，在組件中引入 vue-pdf，并傳入需要預覽的 PDF 文件路徑。以下是一個簡單的例子：

<template>
<div>
<pdf :src="pdfSrc" :page="pageNo" :rotation="rotationAngle" :on-page-change="onPageChange" />
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: { pdf },
data() {
return {
pdfSrc: 'http://test.com/test.pdf',  // 需要預覽的 PDF 文件 URL
pageNo: 1,  // 當前展示的頁碼
rotationAngle: 0  // 當前文件的旋轉角度
}
},
methods: {
onPageChange(page) {  // 翻頁事件回調
this.pageNo = page
}
}
}
</script>

上述代碼中，pdfSrc 指定了需要預覽的 PDF 文件路徑，pageNo 表示當前展示的頁碼，rotationAngle 表示文件的旋轉角度（可選）。onPageChange 為翻頁事件回調函數，當用戶翻頁時會觸發該函數并將當前頁碼傳入。開發者可在該函數內更新當前頁碼的值，達到實時監聽頁碼變化的目的。

除此之外，vue-pdf 組件還提供了很多其他可配置的選項，如縮放比例、邊距大小等，可根據實際業務需求進行定制。

以上即是 Vue 中實現 PDF 預覽的簡單方法。通過 vue-pdf 組件，我們可以方便地實現 PDF 文件的渲染和展示，并且支持用戶的常用操作。開發者可以根據業務需求進行擴展和優化，實現更加豐富和復雜的 PDF 預覽功能。