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 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
vue的for循环使用方法
Feb 12 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 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网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
JS跨域问题详解
2014/11/25 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python实现身份证号码解析
2015/09/01 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python 求向量的余弦值操作
2021/03/04 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
行政助理求职自荐信
2013/10/26 职场文书
毕业自我评价范文
2013/11/17 职场文书
销售经理工作职责
2014/02/03 职场文书
项目施工员岗位职责
2014/03/09 职场文书
大学生毕业求职信
2014/06/12 职场文书
《叶问2》观后感
2015/06/15 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
python使用shell脚本创建kafka连接器
2022/04/29 Python