vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法


            目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了备受推荐的pdf.js插件来实现。

pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（参考readme即可）。

不过更简单的方法是使用cnpm来安装： cnpm isntall --save pdfjs-dist，然后可以在项目中使用了，我使用插件的方式。具体使用示例：

pdf.vue







<template><p id="container">

  <!-- <p class='pdf-page'> -->

   <canvas id="the-canvas"></canvas></p><p class="foot" v-if="pdfDoc"><button class="left" click="onPrevPage" v-if="pageNum>1">上一页</button><button class="right" click="onNextPage" v-if="pageNum<pdfDoc.numPages">下一页</button></p>

  <!-- </p> --><p></p>

</template>

<script>

import PDFJS from 'pdfjs-dist'

 

export default {

 data () {

  return {

   pdfDoc: null,

   pageNum: 1,

   pageRendering: false,

   pageNumPending: null,

   scale: 0.9

  }

 },

 methods: {

  showPDF (url) {

   let _this = this

   PDFJS.getDocument(url).then(function (pdf) {

    _this.pdfDoc = pdf

    _this.renderPage(1)

   })

  },

  renderPage (num) {

   this.pageRendering = true

   let _this = this

   this.pdfDoc.getPage(num).then(function (page) {

    var viewport = page.getViewport(_this.scale)

    let canvas = document.getElementById('the-canvas')

    canvas.height = viewport.height

    canvas.width = viewport.width

 

    // Render PDF page into canvas context

    var renderContext = {

     canvasContext: canvas.getContext('2d'),

     viewport: viewport

    }

    var renderTask = page.render(renderContext)

 

    // Wait for rendering to finish

    renderTask.promise.then(function () {

     _this.pageRendering = false

     if (_this.pageNumPending !== null) {

      // New page rendering is pending

      this.renderPage(_this.pageNumPending)

      _this.pageNumPending = null

     }

    })

   })

  },

  queueRenderPage (num) {

   if (this.pageRendering) {

    this.pageNumPending = num

   } else {

    this.renderPage(num)

   }

  },

  onPrevPage () {

   if (this.pageNum <= 1) {

    return

   }

   this.pageNum--

   this.queueRenderPage(this.pageNum)

  },

  onNextPage () {

   if (this.pageNum >= this.pdfDoc.numPages) {

    return

   }

   this.pageNum++

   this.queueRenderPage(this.pageNum)

  }

 }

}

</script><style scoped="" type="text/css">#container {

 background-color: rgba(0,0,0,0.75);

 position:fixed;

 width: 100%;

 height: 100%;

 top: 0;

 left: 0;

 text-align: center;

 padding: 5px;

}

 

.pdf-page {

 

}

 

.foot {

 position: fixed;

 transform: translate(-50%,0);

 left: 50%;

}</style>



index.js:







import PDF from './PDF'

 

var $vm

export default {

 install (Vue, options) {

  if (!$vm) {

   const PDFPlugin = Vue.extend(PDF)

   $vm = new PDFPlugin().$mount()

   document.body.appendChild($vm.$el)

  }

  Vue.prototype.$showPDF = function (url) {

   $vm.showPDF(url)

  }

 }

}





把两个文件放到同一文件夹pdf中形成一个插件，在main.js引入并use：







import pdf from '@/components/pdf'

Vue.use(pdf)



这样，在需要显示pdf的地方调用vue的$showPDF方法即可。

效果显示（手机浏览器验证显示正常）：



不过需要注意一点问题是：

pdf.js不能处理跨域文件和本地文件，所以本地调试的时候应该请求服务器的文件，如果请求的是远程服务器，存在跨域，那就需要在config/index.js中配置一下代理：





// ...

proxyTable: {

 '/media': {

  target: 'http://xxxx.cn', // 换成正确的服务器域名

  changeOrigin: true,

  pathRewrite: {

   '^/media': '/media'

  }

 }

}

// ...





然后在使用的地方填相对路径即可：







// ...

mounted () {

 this.$showPDF('/media/up/2018/3/9/494079c7ec333bd371798dd0a73c0a0b.pdf')

}

// ...



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。