14、vue-pdf的使用

安裝

npm install --save vue-pdf

vue-pdf默認只顯示第一頁，可以寫按鈕翻頁，也可以v-for多頁顯示

項目結構

實例一 按鈕分頁

<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>

實例二 多頁顯示

<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>

so easy