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

2018-09-24 21:41

阅读:528

  目前大多数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:

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

  效果显示(手机浏览器验证显示正常):

  

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

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

   // ... proxyTable: { /media: { target: 换成正确的服务器域名 changeOrigin: true, pathRewrite: { ^/media: /media } } } // ...

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

   // ... mounted () { this.$showPDF(/media/up/2018/3/9/494079c7ec333bd371798dd0a73c0a0b.pdf) } // ...

  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


评论


亲,登录后才可以留言!