項目涉及到移動端查看電子合同的問題，前先後後試了三種方案，真是一步一個坑，三種方案各有各的優勢，不水，直接上代碼，按照本身的需求選擇。html

1、pdf-vue

直接使用vue-pdf插件，核心的代碼是pdf.js，只不過就是本身封裝了一下，優勢是方便快捷，缺點是沒法加載電子簽章。vue

一、npm install pdf-vue --save

二、template代碼

<template>
  <div class="pdf" v-show="fileType === 'pdf'">
    <p class="arrow">
    // 上一頁
    <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
    {{currentPage}} / {{pageCount}}
    // 下一頁
    <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
    </p>
    // 本身引入就能夠使用,這裏個人需求是作了分頁功能,若是不須要分頁功能,只要src就能夠了
    <pdf
      :src="src" // src須要展現的PDF地址
      :page="currentPage" // 當前展現的PDF頁碼
      @num-pages="pageCount=$event" // PDF文件總頁碼
      @page-loaded="currentPage=$event" // 一開始加載的頁面
      @loaded="loadPdfHandler"> // 加載事件
    </pdf>
  </div>
</template>
複製代碼

三、js代碼

import pdf from 'vue-pdf'
export default {
    components: {pdf},
    data () {
      return {
        currentPage: 0, // pdf文件頁碼
        pageCount: 0, // pdf文件總頁數
        fileType: 'pdf', // 文件類型
    &emsp;&emsp;&emsp;&emsp;src: '', // pdf文件地址
      }
    },
&emsp;&emsp;created: {
&emsp;&emsp;&emsp;&emsp;// 有時PDF文件地址會出現跨域的狀況,這裏最好處理一下
&emsp;&emsp;&emsp;&emsp;this.src = pdf.createLoadingTask(this.src)
&emsp;&emsp;}
    method: {
      // 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
    
      // pdf加載時
      loadPdfHandler (e) {
        this.currentPage = 1 // 加載的時候先加載第一頁
      }
    
    }
}
複製代碼

使用很是方便，尤爲是隻須要翻頁，或者不須要翻頁的，強烈推薦。github

2、pdf-dist

pdf-dist也是基於pdf.js的一個組件，只不過沒有封裝，須要本身配置，優勢是可配置，可實現特殊的需求，缺點是須要本身封裝，水印可加載，網上說能夠加載電子簽章，個人加載不出來，因此仍是沒采用。web

一、npm install pdf-dist --save

二、封裝一個pdf.vue

<template>
  <div class="cpdf" id="cpdf">
    <div class="center">
      <canvas class="canvasstyle" id="the-canvas"></canvas>
      <div class="contor">
        <button @click="prev" style="margin-right: 10px">上一頁</button>
        <span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
        <button @click="next" style="margin-left: 10px">下一頁</button>
      </div>
    </div>
  </div>
</template>
<script>
import PDFJS from 'pdfjs-dist'

export default {
  name: 'c-pdf',
  // 接收父組件傳來的參數   
  props: ['pdfurl'],
  components: { },
  data () {
    return {
      pdfDoc: null, // pdfjs 生成的對象
      pageNum: 1, //
      pageRendering: false,
      pageNumPending: null,
      scale: 1, // 放大倍數
      page_num: 0, // 當前頁數
      page_count: 0, // 總頁數
      maxscale: 2, // 最大放大倍數
      minscale: 0.8// 最小放大倍數
    }
  },
  methods: {
    renderPage (num) { // 渲染pdf
      let vm = this
      this.pageRendering = true
      let canvas = document.getElementById('the-canvas')
      let ctx = canvas.getContext('2d')
      let bsr =
                ctx.webkitBackingStorePixelRatio ||
                ctx.mozBackingStorePixelRatio ||
                ctx.msBackingStorePixelRatio ||
                ctx.oBackingStorePixelRatio ||
                ctx.backingStorePixelRatio ||
                1
      let dpr = window.devicePixelRatio || 1
      let ratio = dpr / bsr
      // Using promise to fetch the page
      this.pdfDoc.getPage(num).then(function (page) {
        var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
        // alert(vm.canvas.height)
        canvas.height = ratio * viewport.width
        canvas.width = ratio * viewport.height
        canvas.style.width = 1.5 * viewport.width + 'px'
        canvas.style.height = 1 * viewport.height + 'px'
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        var renderTask = page.render(renderContext)

        // Wait for rendering to finish
        renderTask.promise.then(function () {
          vm.pageRendering = false
          if (vm.pageNumPending !== null) {
            // New page rendering is pending
            vm.renderPage(vm.pageNumPending)
            vm.pageNumPending = null
          }
        })
      })
      vm.page_num = vm.pageNum
    },
    addscale () { // 放大
      if (this.scale >= this.maxscale) {
        return
      }
      this.scale += 0.1
      this.queueRenderPage(this.pageNum)
    },
    minus () { // 縮小
      if (this.scale <= this.minscale) {
        return
      }
      this.scale -= 0.1
      this.queueRenderPage(this.pageNum)
    },
    prev () { // 上一頁
      let vm = this
      if (vm.pageNum <= 1) {
        return
      }
      vm.pageNum--
      vm.queueRenderPage(vm.pageNum)
    },
    next () { // 下一頁
      let vm = this
      if (vm.pageNum >= vm.page_count) {
        return
      }
      vm.pageNum++
      vm.queueRenderPage(vm.pageNum)
    },
    closepdf () { // 關閉PDF
      this.$emit('closepdf')
    },
    queueRenderPage (num) {
      if (this.pageRendering) {
        this.pageNumPending = num
      } else {
        this.renderPage(num)
      }
    }
  },
  computed: {
    ctx () {
      let id = document.getElementById('the-canvas')
      return id.getContext('2d')
    }
  },
  mounted () {
    let vm = this
    PDFJS.getDocument(vm.pdfurl).then(function (pdfDoc_) { // 初始化pdf
      vm.pdfDoc = pdfDoc_
      vm.page_count = vm.pdfDoc.numPages
      vm.renderPage(vm.pageNum)
    })
  }
}

</script>
<style  lang="stylus" scoped>
  .cpdf {
    display: flex;
    justify-content: center;
    align-items: center;
    .center {
      text-align: center;
      height: 100%;
      overflow: hidden;
      padding-top: 20px;
      .contor {
        position: fixed;
        bottom: 30px;
        left: 0;
        width: 100%;
        z-index: 99999;
        font-size 30px
        margin-top 20px
        margin-bottom: 10px;
      }
    }
  }
</style>
複製代碼

三、直接當成組件，引用就能夠了

import cdpdf from '../../../components/pdf.vue'

<cdpdf :pdfurl="pdfurl"></cdpdf>
複製代碼

一開始項目使用的是pdf-dist，由於後來電子簽章顯示不出來：npm

Warning: Unimplemented widget field type "Sig", falling back to base field type.
複製代碼

從網上搜了不少方法，說是須要修改pdf.work.js的源碼，全局搜索AnnotationFlag.HIDDEN：canvas

if(data.fieldType==='Sig') {
    warn('unimplemented annotation type: Widget signature');
    // 註釋下面這行代碼
    this.setFlags(AnnotationFlag.HIDDEN);
 }
複製代碼

多是移動端使用微信瀏覽器的緣由，註釋掉代碼仍是很差使，只能再想其餘辦法了跨域

3、pdf.js

最後用了最笨的辦法，直接從GitHub拉下來pdf.js的demo，用iframe標籤包住demo裏的HTML文件，直接套着用，完美解決電子簽章的問題：promise

一、從GitHub拉一下源碼，或者從這個地址直接下載

mozilla.github.io/pdf.js/gett…瀏覽器

下載下來之後放在public文件下（3.x腳手架）

二、iframe標籤直接粗暴的設置src

<iframe :src="pdfUrl" :style="{height: Height}" style="width: 100%"></iframe>

this.pdfUrl = '../pdf/web/viewer.html?file=' + this.pdfurl, +'PDF'

pdfUrl是iframe標籤的URL，pdfurl是須要查看的PDF文件的url
複製代碼

總結

只要能實現需求的代碼就是好代碼，個人項目是移動端查看PDF文件，由於文件上有電子簽章，因此嘗試了好幾種方案，我的仍是推薦第二種方案，若是沒有電子簽章的狀況下。

公衆號定時更新實戰和基礎博客，歡迎各位哥哥姐姐關注！

pdf.js實戰，含水印、電子簽章解決方案