vue中如何实现pdf文件预览的方法


Posted in Javascript onJuly 12, 2018

今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe、embed、vueshowpdf(测试了不咋好用)、pdf等,本文说一下pdf插件的使用过程。

说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下:

vue中如何实现pdf文件预览的方法

想复制代码如下:

<iframe src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" width="100%" height="100%">
 This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf" rel="external nofollow" >Download PDF</a>
</iframe>

显示效果如下:

vue中如何实现pdf文件预览的方法

如果pdf有很多页,也不用考虑分页功能,自动可以向下滑动就翻页,看着挺好,但是,且往下继续看----->

我们把上边的链接换成' https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf ',发现什么了?快看截图。。。同样是pdf链接,怎么这个就不行?

vue中如何实现pdf文件预览的方法

什么情况,下载框,必须下载才能看到,那多影响体验,下到本地还占我磁盘,不行不行,把上边那个连接放到浏览器,回车看一下响应头部:

content-disposition :attachment; filename="DOC-20171013-WA0035.pdf"

就是它,让我们必须弹出下载框,由于这些文件是在远程服务器上存贮着,想着让后端看能不能检测到这个响应头,他们也懒得处理,后来只能自己处理了,鉴于这种情况,网上也是有很多解决办法的,本人试验过可以的。中间也是借用了一篇文章 ,根据自己需求,做了简单的处理。

过程如下:

  • 执行npm install pdf-dist --save
  • 在comments目录下创建两个文件:pdf.vue 和 index.js
< !--pdf.vue--><template >
 <div id = "container": class = "{'back': isShow}" >
 <canvas id = "the-canvas" > 
</canvas> 
 <!-- / / 添加关闭pdf功能-->
<span: class = "{'close':isShow}"@click = "closePdf" > close < /span> 
 <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 > 
</div>
 </template > 
<script >
 import PDFJS from 'pdfjs-dist'export
default {
 data() {
  return {
  isShow:
  false,
  //通过该属性动态添加类,让pdf显示或隐藏 
  pdfDoc: null,
  //可以打印发现是一个对象,里面有页数信息等 
  pageNum: 1,
  pageRendering: false,
  pageNumPending: null,
  scale: 0.9
  }
 },
 methods: {
  closePdf() {
  this.isShow = false
  },
  showPDF(url) {
  this.isShow = true 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 ">
.back { 
background-color: rgba(0, 0, 0, 0.788); position:fixed; 
width: 100%; 
 height: 100%; 
top: 0; left: 0; 
 text-align: center; 
 padding: 20px; 
z-index: 100; 
 overflow: scroll;
}
.close{ 
 position: absolute; 
 right: 20px; 
 top: 20px; 
z-index: 200; 
color: #fff; 
cursor: pointer;
} 
.foot {
 position: absolute; 
bottom: 50px; 
left: 50%; 
 transform: translate(-50%,0);
}
</style>"
// index.js
import PDF from './pdf'
var $vmexport
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)
  }
 }
 }

3. 在main.js中引入

import pdf from './components/pdf'
Vue.use(pdf)

这样就可以全局使用了,使用的时候就直接使用,本文是在一个图片展示 的地方加上一个点击事件,点击时触发该函数即可;

function showPdf() {
 let url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
 // let url = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf' 
 this.$showPDF(url)
}

文中添加了关闭功能,点击close即可关闭pdf的展示, 同时组件中也有分页功能,如果页数大于1就会显示下一页按钮;

vue中如何实现pdf文件预览的方法

以上既是本人实现的过程,至于跨域问题,我这边还没遇到,现在是本地访问可以的,等到线上再看看行不行,如果不行后边再追加方法实现。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 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
JavaScript类的继承方法小结【组合继承分析】
Jul 11 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
python追加元素到列表的方法
2015/07/28 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python 的类、继承和多态详解
2017/07/16 Python
详细分析python3的reduce函数
2017/12/05 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
英语专业个人求职自荐信
2013/09/21 职场文书
考试违纪检讨书
2014/02/02 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
保护环境倡议书100字
2014/05/19 职场文书
商铺门面租房协议书
2014/10/21 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Python中的 enumerate和zip详情
2022/05/30 Python