vue 使用 vue-pdf 实现pdf在线预览的示例代码


Posted in Javascript onApril 26, 2020

背景

之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了。本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出了大家在实际使用的过程中可能会遇到的问题和解决方案。

安装:

这个没有啥背景知识可讲,我们直接跳到安装环节,vue-pdf 和其他vue组件的安装并无不同,打开命令行,敲入:

npm install --save vue-pdf

注意路径。别在桌面调出来个终端安装了,这种直接打回去重学Vue。

vue-pdf 初体验:

安装完之后,使用vue-pdf非常简单,和其他的组件并没有什么不同,上代码:

首先我们需要引入这个组件:

<script>
import pdf from 'vue-pdf'
export default {
 components:{
   pdf
 },
 data(){
   return {
     url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
   }
 }
</script>

然后在页面使用vue-pdf,只需要添加标签:

<template>
<div>
 <pdf 
  ref="pdf"
  :src="url">
 </pdf>
</div>
</template>

重启你的项目,访问这个界面,你大概率会发现pdf已经成功显示在你的界面上了。这没有任何问题,但是,正当你准备拿起一根烟,点上,伴着舒适的《美丽的梭罗河》,欣赏你成功的杰作的时候,你会发现,我擦,为啥只有一页,当玻璃杯碰在一起,满世界都是梦破碎的声音。

所以,这只是初体验,如果你的pdf只有一页,这样写当然没什么问题,但是当我们呢pdf 有很多页的时候,你会发现,这行不通了。所以,接下来,我们来看看怎么让它显示多页。

vue-pdf 渐入佳境:

其实,想要显示多页也没那么复杂,你每次就显示一页,我,直接v-for 循环,直接显示完,简单粗暴。

页面代码:

<template>
 <div>
 <pdf v-for="i in numPages" :key="i" :src="url" :page="i"></pdf> 
 </div>
</template>

<script>
 import pdf from 'vue-pdf'
 export default {
 components: {
  pdf
 },
 data(){
  return{
    url: '',
    numPages:1,
  }
  },
 mounted: function() {
  this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")
  
 }, 
 methods: {
  getNumPages(url) {
  var loadingTask = pdf.createLoadingTask(url)
  loadingTask.then(pdf => {
   this.url = loadingTask
   this.numPages = pdf.numPages
  }).catch((err) => {
   console.error('pdf加载失败')
  })
  },
 }
 }
</script>

各个属性:

  • url :pdf 文件的路径,可以是本地路径,也可以是在线路径。
  • numPages : pdf 文件总页数。

getNumPages 计算总页数,顺便给url和numPages赋值。

唯一需要大家注意的是这句:

this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")

注意啊,这句不一定非要写到mounted里面,你想写哪就写哪,比如你前端请求后端,后端返回一个pdf 的url,在那里写就行,写在你需要的地方。

vue-pdf 轻车熟路:

很多人看到这,就这,就这?万一,我pdf有一千页,我浏览器还不得裂开,我追求的是那种在微醺的下午,一页一页的翻看的感觉,你能给我吗?

我不能,才怪,保证满足你。

<template>
 <div>
 <div class="tools">
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="prePage" class="mr10"> 上一页</bk-button>
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="nextPage" class="mr10"> 下一页</bk-button>
  <div class="page">{{pageNum}}/{{pageTotalNum}} </div>
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="clock" class="mr10"> 顺时针</bk-button>
  <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="counterClock" class="mr10"> 逆时针</bk-button>
 </div>
 <pdf ref="pdf" 
 :src="url" 
 :page="pageNum"
 :rotate="pageRotate" 
 @progress="loadedRatio = $event"
 @page-loaded="pageLoaded($event)" 
 @num-pages="pageTotalNum=$event" 
 @error="pdfError($event)" 
 @link-clicked="page = $event">
 </pdf>
 </div>
</template>

接下来,我们一一介绍这些都是个啥。

参数介绍:

  • page: 当前显示的页数,比如第一页page=1
  • rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转。
  • progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了。
  • page-loaded :页面加载成功的回调函数,不咋能用到。
  • num-pages :总页数
  • error :加载错误的回调
  • link-clicked:单机pdf内的链接会触发。

其他:

  • print 这个是打印函数。 注意:谷歌浏览器会出现乱码,这个和字体有关系。

来,js代码走一个:

<script>
 import pdf from 'vue-pdf'
 export default {
 name: 'Home',
 components: {
  pdf
 },
 data() {
  return {
  url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
  pageNum: 1,
  pageTotalNum: 1,
  pageRotate: 0,
  // 加载进度
  loadedRatio: 0,
  curPageNum: 0,
  }
 },
 mounted: function() {},
 methods: {
      // 上一页函数,
  prePage() {
  var page = this.pageNum
  page = page > 1 ? page - 1 : this.pageTotalNum
  this.pageNum = page
  },
      // 下一页函数
  nextPage() {
  var page = this.pageNum
  page = page < this.pageTotalNum ? page + 1 : 1
  this.pageNum = page
  },
      // 页面顺时针翻转90度。
  clock() {
  this.pageRotate += 90
  },
      // 页面逆时针翻转90度。
  counterClock() {
  this.pageRotate -= 90
  },
      // 页面加载回调函数,其中e为当前页数
  pageLoaded(e) {
  this.curPageNum = e
  },
      // 其他的一些回调函数。
  pdfError(error) {
  console.error(error)
  },
 }
 }
</script>

其他骚操作:

// 打印全部
pdfPrintAll() {
 this.$refs.pdf.print()
 },
// 打印指定部分
pdfPrint() {
 this.$refs.pdf.print(100, [1, 2])
 },

具体样式什么的我就不贴出来了,这些都不是重点,完全可以改成自己喜欢的。

成品展示:

vue 使用 vue-pdf 实现pdf在线预览的示例代码

其他问题以及解决方案:

跨域问题:
网上用pdf.js 很多都会遇到跨域问题,这个我今天实际应用到自己的项目里面了,由于我服务端设置了跨域,所以没有出现跨域的问题,如果出现跨域需要修改你后端的请求头。

打印界面字符乱码:
这个我倒是碰到了,谷歌浏览器打印的时候,预览界面真的变成了 真·方块字 ,全是方块。这个问题是因为你pdf中使用了自定义字体导致的,具体解决方案如下:

首先,找到这个文件:node_modules/vue-pdf/src/pdfjsWrapper.js

然后根据github上这个issue,其中红色的是要删掉的,绿色的是要加上去的,照着改就可以解决了。

地址: https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7

根据我的实际测试,是可以解决打印乱码的问题的。

到此这篇关于vue 使用 vue-pdf 实现pdf在线预览的示例代码的文章就介绍到这了,更多相关vue pdf在线预览内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
node.js文件上传处理示例
Oct 27 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 #Javascript
详解关于Vue单元测试的几个坑
Apr 26 #Javascript
es6函数之箭头函数用法实例详解
Apr 25 #Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
es6函数之尾调用优化实例分析
Apr 25 #Javascript
es6函数之尾递归用法实例分析
Apr 25 #Javascript
javascript 易错知识点实例小结
Apr 25 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
学习jQuey中的return false
2015/12/18 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
支行行长竞聘演讲稿
2014/05/15 职场文书
合作与交流自我评价
2015/03/09 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP