vue3中vue-pdf-embed实现放大、缩小、上一页、下一页、滚动翻页功能（pdf文件预览）

℘团子এ

已于 2024-03-29 15:54:08 修改

阅读量3.5k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签：前端 javascript vue.js

于 2024-02-23 15:57:34 首次发布

本文链接：https://blog.csdn.net/2202_75509848/article/details/136257299

1.安装插件

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

2.完整代码

<template>
    <div class="pdf-wrap scrollbar-style">
        <vue-pdf-embed :source="state.source" v-if="state.pdfShow" :style="scaleFun" class="vue-pdf-embed" ref="vuePdfRef" :page="state.pageNum" @wheel.prevent="handleScroll"/>
    </div>
    <div class="page-tool">
        <div class="page-tool-item" @click="lastPage">上一页</div>
        <div class="page-tool-item">{
  
  {state.pageNum}}/{
  
  {state.numPages}}</div>
        <div class="page-tool-item" @click="nextPage">下一页</div>
        <div class="page-tool-item" @click="pageZoomOut">放大</div>
        <div class="page-tool-item" @click="pageZoomIn">缩小</div>
        <div class="page-tool-item" @click="PDFPrint">下载</div>
    </div>
</template