vue如何使用vue-pdf实现pdf在线预览

小编这次要给大家分享的是vue如何使用vue-pdf实现pdf在线预览,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

创新互联服务项目包括十堰网站建设、十堰网站制作、十堰网页制作以及十堰网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,十堰网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到十堰省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

背景

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

安装:

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

npm install --save vue-pdf

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

vue-pdf 初体验:

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

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

  

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

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

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

vue-pdf 渐入佳境:

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

页面代码:



各个属性:

  • 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有一千页,我浏览器还不得裂开,我追求的是那种在微醺的下午,一页一页的翻看的感觉,你能给我吗?

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

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

参数介绍:

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

其他:

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

来,js代码走一个:

其他骚操作:

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

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

成品展示:

vue如何使用vue-pdf实现pdf在线预览

其他问题以及解决方案:

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

看完这篇关于vue如何使用vue-pdf实现pdf在线预览的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。


分享题目:vue如何使用vue-pdf实现pdf在线预览
文章分享:http://myzitong.com/article/jphish.html