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
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文档的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
本文题目:vue插件开发之如何使用pdf.js实现手机端在线预览pdf文档的方法
本文URL:http://pwwzsj.com/article/jghhgp.html