vue-pdf的使用

安装

?

1	npm install --save vue-pdf

vue-pdf默认只显示第一页，可以写按钮翻页，也可以v-for多页显示

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<template>   <div class="hello">         {{currentPage}} / {{pageCount}}         <button @click="change1">上一页</button>         <button @click="change2">下一页</button>         <br>         <pdf             :src="src"             :page="currentPage"             @num-pages="pageCount = $event"             @page-loaded="currentPage = $event"             class="pdf-set"         ></pdf>        </div> </template>   <script> import pdf from 'vue-pdf' export default {   components:{     pdf   },   name: 'HelloWorld',   data(){     return{       src:origin+'/file/数据结构与算法JavaScript描述.pdf',//路径需要留意 并非绝对路径       currentPage: 1,       pageCount: 1,     }   },   methods:{     change1(){       if(this.currentPage>1){         this.currentPage--       }     },     change2(){       if(this.currentPage < this.pageCount){         this.currentPage++       }     }   } } </script>   <style scoped> .pdf-set{   display: inline-block;   height:800px;   width:500px; } </style>

实例二 多页显示

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<template>   <div class="about">     <div>         <pdf             v-for="i in numPages"             :key="i"             :src="src"             :page="i"             class="pdf-set"         ></pdf>     </div>        </div> </template>   <script> import pdf from 'vue-pdf' export default {   components:{     pdf   },   name: 'HelloWorld',   data(){     return{       src:pdf.createLoadingTask(origin+'/file/数据结构与算法JavaScript描述.pdf'),       numPages: undefined     }   },   mounted(){     this.src.then(pdf => {         this.numPages = pdf.numPages;     });   } } </script>   <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .pdf-set{   display: inline-block;   text-align: center;   width:60%; } </style>