这篇文章主要介绍了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
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文档的方法的详细内容，更多请关注0133技术站其它相关文章！
