🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Vue篇专栏内容:Vue3现PDF在线预览功能
前言
在开发中，PDF预览和交互功能是一个常见的需求。无论是管理系统、在线教育平台，还是企业内部的知识库，能够高效地展示和操作PDF文件都能极大地提升用户体验。本文将详细介绍如何在Vue项目中集成PDF预览功能，并实现基本的交互操作，如翻页、缩放等。
该片段展示了如何使用vue-pdf-embed库在Vue组件中嵌入PDF文件，并通过一系列方法实现页面切换和缩放功能。
代码解析
1. 引入依赖
首先，我们需要引入vue-pdf-embed库来处理PDF文件的加载和渲染。此外，为了确保PDF文件路径正确，我们还需要导入具体的PDF文件。
npm install vue-pdf-embedimport 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预览组件，具备以下功能：
- PDF加载：当用户打开PDF预览页面时，自动加载指定的PDF文件，并显示加载动画。
- 页面切换：用户可以通过点击“上一页”和“下一页”按钮来浏览PDF的不同页面。
- 缩放控制：用户可以通过点击“放大”和“缩小”按钮来调整PDF的显示大小。
- 状态显示：实时显示当前页码和总页数，帮助用户了解浏览进度。
这些功能不仅提升了用户体验，还使得PDF文件的查看更加便捷和直观。
结尾
通过本文的介绍，我们详细了解了如何在Vue项目中实现PDF预览和交互功能。从引入依赖到定义响应式状态，再到处理加载事件和实现页面切换、缩放功能，每一步都至关重要。希望本文能为读者提供有价值的参考，帮助大家更好地理解和应用这一技术。
在未来的工作中，我们可以继续探索更多优化方案，不断提升PDF预览组件的性能和用户体验。无论是通过技术创新还是设计改进，我们的目标始终是为用户提供更加优质的服务。