Vue3实现PDF在线预览功能

news2025/1/5 17:27:03

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