189 8069 5689

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方法即可。

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

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')
}
// ...

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

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站标题:vue插件开发之如何使用pdf.js实现手机端在线预览pdf文档的方法-创新互联
文章分享:http://jkwzsj.com/article/dpccii.html

其他资讯