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 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
jQuery实现大图轮播
Feb 13 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python3图片文件批量重命名处理
2019/10/31 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
门卫班长岗位职责
2013/12/15 职场文书
教师求职自荐书
2014/06/14 职场文书
公司门卫工作职责
2014/06/28 职场文书
创先争优个人总结
2015/03/04 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python