pdf 弹窗预览，vue-pdf

用vue.pdf实现弹窗预览 ，不过一次只能预览一页，什么功能都有的

效果图：

页面代码，页面功能按钮，以及pdf内容显示

 <template>
   <div class="pdf">
     <div class="pdf_footer">
       <div class="info">
         <div>当前页数/总页数：{{ pageNum }}/{{ numPages }}</div>
       </div>
       <div class="operate">
         <div class="btn" @click.stop="clock">顺时针</div>
         <div class="btn" @click.stop="counterClock">逆时针</div>
         <div class="btn" @click.stop="prePage">上一页</div>
         <div class="btn" @click.stop="nextPage">下一页</div>
         <div class="btn" @click="scaleD">放大</div>
         <div class="btn" @click="scaleX">缩小</div>
         <div class="btn" @click="downLoadFile(fileSrc, 'pdf文件')">下载</div>
       </div>
     </div>
     <div class="show" id="lookPdf">
       <pdf ref="pdf" :rotate="pageRotate" :src="src" :page="pageNum" style="display: inline-block; width: 100%;"></pdf>
     </div>

   </div>
 </template>

 js代码，把文件转为文件流的形式，获取pdf内容，页码，按钮功能等实现，

<script>
   import pdf from "vue-pdf";
   import {
     workLook
   } from "@/api/system/notice";
   export default {
     name: "AppPdf",
     components: {
       pdf,
     },
     props: {
       fileSrc: {
         type: String,
         require: true,
         default: "",
       },
     },
     data() {
       return {
         baseUrl: process.env.VUE_APP_BASE_API,

         src: "",
         numPages: undefined,
         pageNum: 1,
         // 加载进度
         loadedRatio: 0,
         // 页面加载完成
         curPageNum: 0,
         // 放大系数 默认百分百
         scale: 80,
         // 旋转角度 ‘90’的倍数才有效
         pageRotate: 0,
       };
     },
     mounted() {
       this.get()
       //   this.loadUPDf(this.fileSrc);
     },

     methods: {
       get() {
         workLook({
           fileName: this.fileSrc,
         }).then((res) => {
           if (res) {
             var fileName = this.fileSrc.split(".");
             this.src =
               fileName[0].indexOf("/dev-api") !== -1 ?
               fileName[0] + ".pdf" :
               this.baseUrl + fileName[0] + ".pdf";
             console.log('dddddddd', this.src);
             this.loadUPDf(this.src)
             //   window.open( this.pdf);
           } else {
             this.msgError("预览失败");
           }
         });

       },
       loadUPDf(url) {
         console.log(url);
         this.src = pdf.createLoadingTask(url);
         this.src.promise.then((pdf) => {
           this.numPages = pdf.numPages; //获取pdf页数
           this.$nextTick(() => {
             this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
             setTimeout(() => {
               let message = document.getElementById("lookPdf")
               message.scrollTop = 100
             }, 50);

           })
         });
       },
       //下载PDF
       fileDownload(data, fileName) {
         window.location.href = data;
       },
       //放大
       scaleD() {
         this.scale += 5;
         this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
         //  this.$refs.pdf.$el.style.marginLeft = 'atuo'
       },

       //缩小
       scaleX() {
         // scale 是百分百展示 不建议缩放
         // if (this.scale == 100) {
         //   return;
         // }
         this.scale += -5;
         console.log(parseInt(this.scale) + "%");
         this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
         //  this.$refs.pdf.$el.style.marginLeft = 'atuo'

       },
       // 切换上一页
       prePage() {
         var p = this.pageNum;
         p = p > 1 ? p - 1 : this.numPages;
         this.pageNum = p;

         //   let message = document.getElementById("onePage")
         let message = document.getElementById("lookPdf")
         message.scrollTop = 30

       },
       // 切换下一页
       nextPage() {
         var p = this.pageNum;
         p = p < this.numPages ? p + 1 : 1;
         this.pageNum = p;

         //   let message = document.getElementById("onePage")
         let message = document.getElementById("lookPdf")
         message.scrollTop = 30

       },
       // 顺时针选中角度
       clock() {
         this.pageRotate += 90;
       },
       // 逆时针旋转角度
       counterClock() {
         this.pageRotate -= 90;
       },
       //很重要,父组件关闭前,清空子组件的值,不然第二次预览打开空白
       resetPageNum() {
         this.numPages = undefined;
       },
     },
   };

 </script>

样式

 <style lang="scss" scoped>
   .pdf {
     .show {
       overflow: auto;
       margin: auto;
       max-width: 90%;
       height: 70vh;
       max-height: 580px;
       display: flex;
       //  align-items: center;
       justify-content: center;
     }
   }

   .pdf_footer {
     position: sticky;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 10px 0;
     background-color: rgba(255, 255, 255, 0.5);

     .info {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;

       div {
         width: 30%;
       }
     }

     .operate {
       margin: 10px 0 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;

       div {
         // width: 80px;
         text-align: center;
         font-size: 15px;
       }

       .btn {
         cursor: pointer;
         margin: 5px 10px;
         width: 120px;
         border-radius: 10px;
         padding: 5px;
         color: #fff;
         background-color: #3dcbbc;
       }
     }
   }

 </style>