參考地址：https://juejin.cn/post/7105933034771185701
這個參考文章的代碼直接可以復制使用，樣式也是給到的，但是實現的是一頁一頁的顯示pdf內容，我的需求是要全部展示出來，頁碼切換時是做一個滾動定位操作。

思路：

1. 通過vue3-pdfjs插件提供的方法createLoadingTask獲取到總頁碼numPages，通過循環將所有頁面渲染
2. 頁碼定位通過錨點定位方式實現。

安裝插件：

 npm install vue-pdf-embed@1.1.6npm install vue3-pdfjs@0.1.6

注意：vue-pdf-embed使用1.1.6版本，之前未固定版本出現內容不顯示問題（大概1版本的可以，2版本的不行，我這邊使用的是1.1.6版本）。vue3-pdfjs安裝就是0.1.6版本的，記錄加上版本好，防止后期有更新出現問題不知道原因。

完整代碼：

<template><div class="pdf-preview-container"><!-- 頭部導航欄 --><div class="pdf-header"><div class="page-navigation"><div class="page-controls"><!-- 上一頁按鈕 --><el-button link :disabled="state.pageNum <= 1" @click="prevPage"><el-icon><ArrowUp /></el-icon></el-button><!-- 頁碼輸入框 --><el-input v-model.number="state.pageNum" class="page-input" @keyup.enter="goToPage" @blur="goToPage" /><!-- 下一頁按鈕 :disabled="currentPage >= totalPages" --><el-button link @click="nextPage"><el-icon><ArrowDown /></el-icon></el-button></div><!-- 總頁數 --><span class="total-pages">/&nbsp;&nbsp;{{ state.numPages }}</span></div></div><!-- PDF預覽區域 --><div class="pdf-content"><!-- PDF內容顯示區域 --><div class="pdf-display-area"><div v-for="item in state.numPages" :key="item" class='pdf-item' :id="`pdf-page-${item}`"><vue-pdf-embed :source="state.source" class="vue-pdf-embed" :page="item" /></div></div></div></div>
</template><script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, computed, reactive } from 'vue';
import { Close, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs";const pdfFile = 'https://pic2-cdn.trytalks.com/pic2/202507091052/files_1a1b765ec00125e0FfuRNLZz.pdf?Expires=1754621583&OSSAccessKeyId=LTAI5tQd3SECCekgpXLBnQSo&Signature=nUn9kW375rdiVNHi2wdDLDm0gAM%3D'const state = reactive({source: pdfFile, // 預覽pdf文件地址pageNum: 1, // 當前頁面scale: 1, // 縮放比例numPages: 0, // 總頁數
});const loadingTask: any = ref(null)const pdfInit = () => {loadingTask.value = createLoadingTask(state.source);loadingTask.value.promise.then((pdf: { numPages: number }) => {state.numPages = pdf.numPages;});
}// 滾動到指定頁面
let isManualNavigation = false;
const scrollToPage = (page: number) => {// 設置手動導航標志isManualNavigation = true;// 先立即更新頁碼狀態const validPage = Math.max(1, Math.min(page, state.numPages));state.pageNum = validPage;// 執行滾動const element = document.getElementById(`pdf-page-${validPage}`);if (element) {element.scrollIntoView({behavior: 'smooth',block: 'start'});}// 滾動結束后清除標志setTimeout(() => {isManualNavigation = false;}, 1000);
};// 上一頁
const prevPage = (): void => {if (state.pageNum > 1) {scrollToPage(state.pageNum - 1);}
};// 下一頁
const nextPage = (): void => {const nextPage = state.pageNum + 1;if (nextPage <= state.numPages) {scrollToPage(nextPage);}
};// 跳轉到指定頁
const goToPage = (): void => {// 確保輸入是有效數字let page = parseInt(String(state.pageNum));if (isNaN(page) || page < 1) {page = 1;} else if (page > state.numPages) {page = state.numPages;}// 更新輸入框顯示正確的頁碼state.pageNum = page;scrollToPage(page);
};// 處理滾動事件，更新當前頁碼（帶防抖）
let scrollTimeout: number | null = null;
const handleScroll = () => {// 如果是手動導航觸發的滾動，則不更新頁碼if (isManualNavigation) return;if (scrollTimeout) {clearTimeout(scrollTimeout);}scrollTimeout = setTimeout(() => {const container = document.querySelector('.pdf-content');if (!container) return;const scrollPosition = container.scrollTop;const items = document.querySelectorAll('.pdf-item');const containerHeight = container.clientHeight;const threshold = containerHeight * 0.3; // 30%視口高度作為閾值let currentPage = state.pageNum;// 精確檢測當前可見頁面items.forEach((item) => {const pageNum = parseInt(item.id.replace('pdf-page-', ''));const rect = item.getBoundingClientRect();// 如果頁面頂部在視口閾值范圍內，則認為是當前頁if (rect.top >= -threshold && rect.top <= threshold) {currentPage = pageNum;}});// 只有當頁碼確實變化時才更新if (currentPage !== state.pageNum) {state.pageNum = currentPage;}}, 150) as unknown as number; // 適當增加防抖時間
};// 組件掛載時
onMounted(() => {// 檢查瀏覽器PDF支持const isPdfSupported = 'application/pdf' in navigator.mimeTypes;console.log('瀏覽器原生支持PDF:', isPdfSupported);// 添加滾動事件監聽const contentEl = document.querySelector('.pdf-content');if (contentEl) {contentEl.addEventListener('scroll', handleScroll);}pdfInit();
});onBeforeUnmount(() => {// 移除滾動事件監聽const contentEl = document.querySelector('.pdf-content');if (contentEl) {contentEl.removeEventListener('scroll', handleScroll);}
});
</script><style lang="scss" scoped>
.pdf-preview-container {display: flex;flex-direction: column;height: 100%;background-color: #fff;border-radius: 4px;overflow: hidden;.pdf-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 16px;background-color: #fff;border-bottom: 1px solid #e0e0e0;.back-button {cursor: pointer;display: inline-block;padding: 5px 5px 0px;border-radius: 4px;transition: background-color 0.2s;&:hover {background-color: #f0f0f0;}}.pdf-actions {display: flex;gap: 10px;}.page-navigation {display: flex;align-items: center;.page-controls {display: flex;align-items: center;padding: 2px 8px;.page-input {width: 50px;margin: 0 5px;:deep(.el-input__inner) {text-align: center;padding: 0 5px;}}}.total-pages {margin-left: 5px;color: #606266;}}}.pdf-content {flex: 1;overflow: auto;/* 自定義滾動條樣式 */&::-webkit-scrollbar {width: 6px;height: 6px;}&::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.05);border-radius: 3px;}&::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.15);border-radius: 3px;transition: background 0.2s;&:hover {background: rgba(0, 0, 0, 0.25);}}.pdf-loading,.pdf-error {height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}.pdf-display-area {.pdf-item {margin: 16px 0px;}}}
}
</style>