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


Posted in Javascript onJuly 12, 2018

目前大多数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')
}
// ...

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

Javascript 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 #Javascript
js+css实现红包雨效果
Jul 12 #Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 #Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 #Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 #Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 #Javascript
Vue.js实现的计算器功能完整示例
Jul 11 #Javascript
You might like
转换中文日期的PHP程序
2006/10/09 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
jQuery live
2009/05/15 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
javascript常见操作汇总
2014/09/03 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
详解参数传递四种形式
2015/07/21 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
python基础教程之常用运算符
2014/08/29 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
物流管理毕业生自荐信
2013/10/24 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
军训 自我鉴定
2014/02/03 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书