vue 實現頁面嵌套pdf之vue-pdf插件

　　近期vue移動端項目中遇到了頁面內，嵌套展示pdf內容。實現方法很多種，可以用iframe嵌套，但不利於引擎優化seo。所以在網上找到了vue-pdf這個插件，這個插件非常好用，其中封裝的方法也很多，屬性能進行功能擴展。

接下來開始使用

第一步、安裝

npm install --save vue-pdf

第二步、使用

<template>
<div class="pdf">
  <pdf 
    :src="pdfUrl">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          pdfUrl:"pdf存放位置",
      }
  }
</script>

注意：　1、通過 import pdf from 'vue-pdf' 進行引入，components:{  pdf }進行注冊

　　　　2、可能存在跨域問題，這里的src並不能實現jsonp的功能。（這里需要后端配合處理，或者自己寫個代理服務器）

三、相關API

Props屬性

　　:src　　　　String/Object　　　　　　pdf的鏈接，可以是相對、絕對地址或者是一個pdf的加載任務

　　:page　　   Number-default:1　　　　需要展示pdf的第幾頁；

　　:rotate　　  Number-default:0　　　　pdf的旋轉角度，‘90’的倍數才有效；

Events回調

　　@password　　　　　　updatePassword，reason　　 updatePassword:函數提示需要輸入的密碼；

　　　　　　　　　　　　　　　　　　　　　　   　　　　　 reason:提示（'NEED_PASSWORD' or 'INCORRECT_PASSWORD'）；

　　@progress　　　　　　Number　　　　　　　　　　 　 pdf的頁面的加載進度，Rang[0,1]；

   　@page-loaded　　  　　Number　　　　　　　　　　　　pdf某個頁面加載成功回調，number為頁面索引值；

　　@num-pages　　　　   Number　　　　　　　　　　　　監聽pdf加載，獲取pdf的頁數；

　　@error　　　　　　　  Object　　　　　　　　　　　　   pdf加載失敗回調；

　　@link-clicked　　　　   Number　　　　　　　　　　　　 單機內部鏈接時觸發；

Public methods公共方法

print(dpi,pageList)

調用瀏覽器打印功能；

• dpi打印的分辨率（100）
• pageList需要打印的頁面array

Public static methods靜態方法

createLoadingTask(src)

這個方法創建一個當前pdf的加載任務，可以作為:src使用或者公開的獲取當前pdf的頁面總數；

四、相關示例

　　由於pdf文檔可能有很多頁，解析時不會當做一張大圖進行處理，默認只會展示第一頁內容，想要全部查看需要進行特殊處理

1、上一頁下一頁進行翻閱

<pdf  :src="path" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf> 
翻頁縮小：
  <ul class="footers">
        
        <li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
            <p>上一頁</p>
        </li>
        <li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
            <p>下一頁</p>
        </li>
    </ul>

import pdf from "vue-pdf";
export default {
  name: "inspectionPresentation",
  components: {
    pdf
  },
  data() {
    return {
      currentPage: 0, // pdf文件頁碼
      pageCount: 0, // pdf文件總頁數
      path: this.$route.params.path,
        scale: 100, //放大系數
                idx: -1,
                clauseTitle: "",
                loadedRatio: 0
    };
  },

        methods{
         // 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁
        changePdfPage(val) {
            if(val === 0 && this.currentPage > 1) {
                this.currentPage--;
            }
            if(val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++;
            }
        },
        goBack() {
            this.$router.go(-1);
        },
        // pdf加載時
        loadPdfHandler(e) {
            this.currentPage = 1; // 加載的時候先加載第一頁
        },
        //放大
        scaleD() {
            this.scale += 5;
            // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
            this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
        },

        //縮小
        scaleX() {
            if(this.scale == 100) {
                return;
            }
            this.scale += -5;
            this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
            // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
        },
        }

2、滾動加載、顯示全部

這里寫法注意點：

　　網上大部分寫法是this.pdfSrc.then(），這種寫法是不正確的，會報this.pdfSrc.then is not a function 錯誤

 

正確寫法：   this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
 　　　　　　this.pdfSrc.promise.then(pdf => {
         　　　　this.numPages = pdf.numPages
       　　　　})

<pdf
     v-for="i in numPages"
    :key="i"
    :src="pdfSrc"
    :page="i">
</pdf>
import pdf from 'vue-pdf'
components: { pdf}


previewPdf(url){
     this.pdfSrc=url  
       this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
       this.pdfSrc.promise.then(pdf => {
         this.numPages = pdf.numPages
       })
 },