vue-pdf 預覽pdf格式的檔案

需求：預覽pdf格式的檔案

實作：

一 安裝

npm install --save vue-pdf
           

二 引入

import pdf from 'vue-pdf' // 哪個元件用到 在那個裡面引入即可
           

<div class="form">
          <p class="arrow" v-if="pageTotalNum>1">
            <el-button :type="pageNum>1?'primary':'info'" @click.stop="prePage" >上一頁</el-button>
            {{pageNum}}/{{pageTotalNum}} //pageNum 目前頁 ，pageTotalNum 總頁數
            <el-button :type="pageNum<pageTotalNum?'primary':'info'" @click.stop="nextPage" >下一頁</el-button>
          </p>
          <pdf class="pdf"
               ref="pdf"
               :page="pageNum"
               @num-pages="pageTotalNum=$event"
               @link-clicked="page = $event"
               :src="pdfUrl">
          </pdf>
        </div>
           

export default {
    name: "viewAnswerCard",
    components:{papersBg,pdf},
    data(){
      return{
        pdfUrl: '',
        pageNum:1,
        pageTotalNum:1
      }
    },
    created() {
      this.getData();
    },
    methods: {
        //這裡的文檔位址是接口傳回的
      getData(){
        this.$axios.get(dealUrl).then((res)=>{
          this.pdfUrl = res.data.data.path;
        }).catch()
      },
      prePage(){
        if(this.pageNum>1){
          var p = this.pageNum
          p = p>1?p-1:this.pageTotalNum
          this.pageNum = p
        }
      },
      nextPage(){
        if(this.pageNum<this.pageTotalNum){
          let  p = this.pageNum
          p = p<this.pageTotalNum?p+1:1
          this.pageNum = p
        }
      }
    }
  }