欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 20:33:12
目前大多数pc浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个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方法即可。

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

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

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

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

// ...
proxytable: {
 '/media': {
  target: 'https://xxxx.cn', // 换成正确的服务器域名
  changeorigin: true,
  pathrewrite: {
   '^/media': '/media'
  }
 }
}
// ...

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

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

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