PDF在线预览

需求

vue下的一个项目，通过点击事件在线预览pdf合同功能

需要用到的插件：
base64:

npm install  --save js-base64

pdfjs-dist:

npm i pdfjs-dist

可以在main.js中全局引入(由于我写的是demo,所以没有全局引入)

import PDFJS from 'pdfjs-dist'
Vue use(PDFJS)

定义的点击事件如下：

 

       预览
    


-------
let Base64=require('js-base64').Base64
console.log(require('js-base64'))
export default {
    name:'readPfd',
    data(){
        return{
            url:'./../../../static/2019_PDF.pdf'   //   由于demo，这个pdf放在了static下面，后期只需要更改这个数据就可以了
        }
    },
    methods:{
       readPfd(){
           this.$router.push({
               name:'pdf',
               query:{
                   url:Base64.encode(this.url)
               }
           })
       }
    }
}

PDF文件预览页面

        

-----
import PDFJS from 'pdfjs-dist'
let Base64 =require('js-base64').Base64
export default {
    data(){
        return{
            title:'',
            pdfDoc:null,
            loadding:false,
            pages:0
        }
    },
    methods:{
      renderPage (num) {
      let _this = this
      this.pdfDoc.getPage(num).then(function (page) {
        let canvas = document.getElementById('the-canvas' + num)
        let ctx = canvas.getContext('2d')
        let dpr = window.devicePixelRatio || 1
        let bsr = ctx.webkitBackingStorePixelRatio ||
                  ctx.mozBackingStorePixelRatio ||
                  ctx.msBackingStorePixelRatio ||
                  ctx.oBackingStorePixelRatio ||
                  ctx.backingStorePixelRatio || 1
        let ratio = dpr / bsr
        var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
        canvas.width = viewport.width * ratio
        canvas.height = viewport.height * ratio
        canvas.style.width = viewport.width + 'px'
        canvas.style.height = viewport.height + 'px'
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        page.render(renderContext)
        if (_this.pages > num) {
          _this.renderPage(num + 1)
        }
      })
    },
    loadFile (url) {
      let _this = this
      PDFJS.getDocument(url).then(function (pdf) {
        _this.pdfDoc = pdf
        _this.pages = _this.pdfDoc.numPages
        _this.$nextTick(() => {
          _this.renderPage(1)
        })
      })
    }
  },
   mounted () {
    let url = Base64.decode(this.$route.query.url)
    console.log(url)
    this.loadFile(url)
  }
    
}

git地址：https://github.com/yinglichen/readPDF