Vue3实现PDF在线预览功能

🌈个人主页：前端青山
🔥系列专栏：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代码的作用是：