vue 之 pdf预览

Posted 2021-03-18 s313139232

vue 之 pdf预览

加载包：pdfvuer

npm i pdfvuer

引入：

import pdfvuer from ‘pdfvuer‘

组件代码(简化版)：

  1 <template>
  2   <div id="pdfvuer">
  3     <div ref="buttons" id="buttons">
  4       <a class="item" @click="page > 1 ? page-- : 1">
  5         <i class="left chevron icon"></i>
  6         上一页
  7       </a>
  8       <a class="item" @click="page < numPages ? page++ : 1">
  9         下一页
 10         <i class="right chevron icon"></i>
 11       </a>
 12     </div>
 13     <div style="width: 800px;margin:20px auto;">
 14       <pdf :src="pdfdata" v-for="i in numPages" :key="i" :id="i" :page="i"
 15            :scale.sync="scale" style="width:100%;">
 16         <template slot="loading">
 17           loading content here...
 18         </template>
 19       </pdf>
 20     </div>
 21   </div>
 22 </template>
 23 
 24 <script>
 25 import pdfvuer from ‘pdfvuer‘
 26 export default {
 27   components: {
 28     pdf: pdfvuer
 29   },
 30   data () {
 31     return {
 32       page: 1,
 33       numPages: 0,
 34       pdfdata: undefined,
 35       errors: [],
 36       scale: ‘page-width‘
 37     }
 38   },
 39   computed: {
 40     formattedZoom () {
 41       return Number.parseInt(this.scale * 100)
 42     }
 43   },
 44   mounted () {
 45     this.getpdfUrl()
 46   },
 47   watch: {
 48     show: function (s) {
 49       if (s) {
 50         this.getpdfUrl()
 51       }
 52     },
 53     page: function (p) {
 54       if (window.pageYOffset <= this.findPos(document.getElementById(p)) || (document.getElementById(p + 1) && window.pageYOffset >= this.findPos(document.getElementById(p + 1)))) {
 55         document.getElementById(p).scrollIntoView()
 56       }
 57     }
 58   },
 59   methods: {
 60     getPdf () {
 61       let self = this
 62       self.pdfdata = pdfvuer.createLoadingTask(‘./a.pdf‘)
 63       self.pdfdata.then(pdf => {
 64         self.numPages = pdf.numPages
 65         window.onscroll = function () {
 66           changePage()
 67           stickyNav()
 68         }
 69 
 70         var sticky = this.$refs.buttons.offsetTop
 71 
 72         // Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
 73         function stickyNav () {
 74           if (window.pageYOffset >= sticky) {
 75             this.$refs.buttons.classList.remove(‘hidden‘)
 76           } else {
 77             this.$refs.buttons.classList.add(‘hidden‘)
 78           }
 79         }
 80 
 81         function changePage () {
 82           var i = 1, count = Number(pdf.numPages)
 83           do {
 84             if (window.pageYOffset >= self.findPos(document.getElementById(i)) &&
 85               window.pageYOffset <= self.findPos(document.getElementById(i + 1))) {
 86               self.page = i
 87             }
 88             i++
 89           } while (i < count)
 90           if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
 91             self.page = i
 92           }
 93         }
 94       }).catch(res => {})
 95     },
 96     findPos (obj) {
 97       return obj.offsetTop
 98     }
 99   }
100 }
101 </script>
102 
103 <style lang="scss" scoped>
104   #pdfvuer{
105     background: #ccc;
106     overflow: auto;
107     height: 100%;
108     position: relative;
109     #buttons{
110       position: fixed;
111       right: calc(50% - 500px);
112       bottom: 50px;
113       z-index: 100000;
114       a{
115         border:2px solid #000;
116         padding: 20px 10px;
117         display: block;
118         background: rgba(0,0,0,0.5);
119         border-radius: 10px;
120         color:#fff;
121         margin-top: 10px;
122       }
123     }
124   }
125   /* Page content */
126   .content {
127     padding: 16px;
128   }
129 </style>
130 <style>
131   .page{
132     margin-bottom: 15px;
133   }
134 </style>

View Code

注意事项：

pdf文件需要放在public文件下

 

 

 

 

钻研不易，转载请注明出处......