vue3实现pdf文件预览 - vue-pdf-embed

参考地址：https://juejin.cn/post/7105933034771185701
这个参考文章的代码直接可以复制使用，样式也是给到的，但是实现的是一页一页的显示pdf内容，我的需求是要全部展示出来，页码切换时是做一个滚动定位操作。

思路：

1. 通过vue3-pdfjs插件提供的方法createLoadingTask获取到总页码numPages，通过循环将所有页面渲染
2. 页码定位通过锚点定位方式实现。

安装插件：

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

注意：vue-pdf-embed使用1.1.6版本，之前未固定版本出现内容不显示问题（大概1版本的可以，2版本的不行，我这边使用的是1.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>