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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
javascript实现标签切换代码示例
May 22 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
Js面试算法详解
Apr 08 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
js判断是否是手机页面
2017/03/17 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
vue生成随机验证码的示例代码
2017/09/29 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python类中super() 的使用解析
2019/12/19 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
小学生竞选班干部演讲稿
2014/04/24 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
自主招生自荐信范文
2015/03/04 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
推普标语口号大全
2015/12/26 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
学习心得体会
2019/06/20 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python