?🌈個人主頁：前端青山
🔥系列專欄：Vue篇
🔖人終將被年少不可得之物困其一生

依舊青山,本期給大家帶來Vue篇專欄內容:Vue3現PDF在線預覽功能

前言

在開發中，PDF預覽和交互功能是一個常見的需求。無論是管理系統、在線教育平臺，還是企業內部的知識庫，能夠高效地展示和操作PDF文件都能極大地提升用戶體驗。本文將詳細介紹如何在Vue項目中集成PDF預覽功能，并實現基本的交互操作，如翻頁、縮放等。

該片段展示了如何使用vue-pdf-embed庫在Vue組件中嵌入PDF文件，并通過一系列方法實現頁面切換和縮放功能。

代碼解析

1. 引入依賴

首先，我們需要引入vue-pdf-embed庫來處理PDF文件的加載和渲染。此外，為了確保PDF文件路徑正確，我們還需要導入具體的PDF文件。

npm install vue-pdf-embed

import VuePdfEmbed from "vue-pdf-embed";
import testPdf from '@/assets/test.pdf'

這段代碼的作用是：

• testPdf：指定要預覽的PDF文件路徑。
• VuePdfEmbed：引入用于嵌入PDF文件的Vue組件。

2. 定義響應式狀態

接下來，我們定義一些響應式的變量來管理PDF的狀態，包括當前頁碼、縮放比例和總頁數等。

  const pdfLoading = ref<any>(false)const state = reactive({source:testPdf, //預覽pdf文件地址pageNum: 1, //當前頁面scale: 1, // 縮放比例numPages: 0, // 總頁數});

這段代碼的作用是：

• pdfLoading：用于控制PDF加載時的加載動畫顯示與否。
• state：一個響應式對象，包含PDF文件的源路徑、當前頁碼、縮放比例和總頁數。

3. 處理PDF加載事件

當PDF文件加載完成時，我們需要更新總頁數，并關閉加載動畫。

const handleDocument = (pdf:any)=>{if(pdf.numPages){pdfLoading.value = falsestate.numPages = pdf.numPages;}
}

這段代碼的作用是：

• 檢查PDF文件是否成功加載（通過pdf.numPages判斷）。
• 如果加載成功，則關閉加載動畫并將總頁數賦值給state.numPages。

4. 實現頁面切換功能

為了方便用戶瀏覽PDF文件，我們實現了兩個方法來切換頁面：lastPage和nextPage。

const lastPage = () => {if (state.pageNum > 1) {state.pageNum -= 1;}
}
const nextPage = () => {if (state.pageNum < state.numPages) {state.pageNum += 1;}
}

這兩段代碼的作用是：

• lastPage：如果當前頁碼大于1，則將頁碼減1。
• nextPage：如果當前頁碼小于總頁數，則將頁碼加1。

5. 實現縮放功能

為了讓用戶可以調整PDF的顯示大小，我們還實現了兩個方法來控制縮放比例：pageZoomOut和pageZoomIn。

const pageZoomOut = () => {if (state.scale < 2) {state.scale += 0.1;}
}
const pageZoomIn = () => {if (state.scale > 1) {state.scale -= 0.1;}
}

這兩段代碼的作用是：

• pageZoomOut：如果當前縮放比例小于2，則增加0.1。
• pageZoomIn：如果當前縮放比例大于1，則減少0.1。

6. 組件模板部分

最后，我們在Vue組件的模板部分添加了PDF預覽區域和相關操作按鈕。

 <div class="yaxq-bottom-jcxx yawd"  v-if="yjShowIndex == 4 &&yjyaPojo.filePath"><div class="page-tool">
<div class="page-tool-item"  @click="lastPage">上一頁</div>
<div class="page-tool-item"  @click="nextPage">下一頁</div>
<div class="page-tool-item">{{state.pageNum}}/{{state.numPages}}</div>
<div class="page-tool-item" @click="pageZoomOut">放大</div><div class="page-tool-item" @click="pageZoomIn">縮小</div></div>
<div class="pdf-preview"  v-loading="pdfLoading" element-loading-text="正在加載中..."element-loading-background="rgba(122, 122, 122, 0.0)"><vue-pdf-embed :source="state.source" :style="scale" class="vue-pdf-embed" :page="state.pageNum" @loaded="handleDocument" /></div></div>

  &.yawd{display: flex;justify-content: center;position: relative;// overflow-y: auto;.page-tool {position: absolute;bottom: 0.3vw;left: 0%;padding-left: 0.25vw;padding-right: 0.25vw;display: flex;align-items: center;background: rgb(66, 66, 66);color: white;border-radius: 0.9vw;z-index: 999!important;cursor: pointer;margin-left: 50%;transform: translateX(-50%);}.page-tool-item {font-size: 0.6vw;padding: 0.5vw 0.9vw;padding-left: 0.1vw;cursor: pointer;}.pdf-preview{width: 100%;height: 100%;overflow-y:auto;position: relative;&::-webkit-scrollbar {width: 1px !important;/* Chrome, Safari, Edge */}&::-webkit-scrollbar-track {background: transparent !important;/* 滾動條軌道背景 */}&::-webkit-scrollbar-thumb {background-color: #696969;/* 滾動條滑塊顏色 */border-radius: 1px;/* 滾動條滑塊圓角 */box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);/* 滾動條滑塊陰影 */}.vue-pdf-embed{width: 100%;height: 100%;z-index: 1!important;}}}

這段HTML代碼的作用是：

• v-if：根據條件判斷是否顯示PDF預覽區域。
• page-tool：包含了一系列操作按鈕，用于切換頁面和調整縮放比例。
• pdf-preview：用于顯示PDF文件，同時包含加載動畫。
• vue-pdf-embed：嵌入PDF文件的核心組件，綁定source、style、page等屬性，并監聽loaded事件。

功能實現

通過上述代碼，我們已經實現了一個簡單的PDF預覽組件，具備以下功能：

1. PDF加載：當用戶打開PDF預覽頁面時，自動加載指定的PDF文件，并顯示加載動畫。
2. 頁面切換：用戶可以通過點擊“上一頁”和“下一頁”按鈕來瀏覽PDF的不同頁面。
3. 縮放控制：用戶可以通過點擊“放大”和“縮小”按鈕來調整PDF的顯示大小。
4. 狀態顯示：實時顯示當前頁碼和總頁數，幫助用戶了解瀏覽進度。

這些功能不僅提升了用戶體驗，還使得PDF文件的查看更加便捷和直觀。

結尾

通過本文的介紹，我們詳細了解了如何在Vue項目中實現PDF預覽和交互功能。從引入依賴到定義響應式狀態，再到處理加載事件和實現頁面切換、縮放功能，每一步都至關重要。希望本文能為讀者提供有價值的參考，幫助大家更好地理解和應用這一技術。

在未來的工作中，我們可以繼續探索更多優化方案，不斷提升PDF預覽組件的性能和用戶體驗。無論是通過技術創新還是設計改進，我們的目標始終是為用戶提供更加優質的服務。