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

这篇文章给大家分享的是有关vue插件开发之如何使用pdf.js实现手机端在线预览pdf文档的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于雁塔网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供雁塔营销型网站建设，雁塔网站制作、雁塔网页设计、雁塔网站官网定制、微信平台小程序开发服务，打造雁塔网络公司原创品牌,更为您提供雁塔网站排名全网营销落地服务。

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

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

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

pdf.vue

#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%;
}

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: 'https://xxxx.cn', // 换成正确的服务器域名
  changeOrigin: true,
  pathRewrite: {
   '^/media': '/media'
  }
 }
}
// ...

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

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

感谢各位的阅读！关于“vue插件开发之如何使用pdf.js实现手机端在线预览pdf文档的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！