🌈个人主页：前端青山 🔥系列专栏：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 = false
state.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预览组件的性能和用户体验。无论是通过技术创新还是设计改进，我们的目标始终是为用户提供更加优质的服务。
