• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

网页在线预览pdf文件的demo pdf.js

400 0

在用BOSS直聘的时候发现他那边可以直接查看pdf文档,我想着web能不能做到,于是今天花了一点时间去做这个,顺带用vue写了个单页demo,用的是bootstrap-vue框架。

第一次用的这个,文档有点怪怪的,用习惯国内的框架,一上来用英文的,而且也不怎么详细,所以导致没研究出单个模块引入的方式,于是js文件就变的很大了,废话少说,这次的重点是如何在web端查看pdf文件。

基本做法就是将文件渲染成画布canvas,然后在输出到网页中,其中最好的,也是最复杂的就是pdf.js,该项目在github开源,并且是mozilla发布,有点东西。

不过github的东西可能比较适合使用iframe元素,因为他有一个已经做好的文件夹,我们调用这个文件夹里的viewer.html,然后通过get传参的方式加上我们要打开的文件就能直接在该网页中查看。

例:

<iframe src="viewer.html?file=pdf文件路径" frameborder="0"></iframe>

通过传入文件路径达到预览的效果。

但是这个ui是固定的,我就想简单一点,直接给我渲染出pdf就行了,其他的东西我自己做。

因为本身就是个demo,按上面那个实用性可能不是很大。

所以我直接就调用两个js文件:pdf.jspdf.worker.js;然后利用里面封装的方法来使用。

下载

官网

下载完打开里面有两个文件夹:buildweb

其中web就是上面说的,已经做好的项目了,你直接合并到自己的项目里,然后通过链接的方式调用。

我使用的是build里面的js文件,在index.html中引入pdf.jspdf.worker.js这两个文件。

方法

pdfjsLib.getDocument会有一个promise,利用then捕获到成功回调,并且会传入这个object对象,这个对象就是pdf.js生成的对象。

pdfjsLib.getDocument("pdf文件路径").promise.then(pdf => {

});

显示第几页pdf.getPage(page)

通过pdf对象的方法getPage我们可以设置渲染第几页,然后用then来捕获,在里面我们要先计算好canvas的大小和绘制比例,然后创建画布,最后再将这些参数保存在一个对象的键值对中,然后进入render初始化,初始化后这个canvas对象就绘制好了,我们再将这个canvas插入到页面中去。

这个部分的例子可以去官网查看到,我这里不放了,因为vue的东西太多绑定了,显示这个看不到那个,还不如直接看源码,源码又在我本地,demo也有了。

预览图

demo

demo

0
  • 本文分类:vue 基础
  • 本文标签:pdf.js
  • 流行热度:已超过 400 人围观了本文
  • 最后更新:2020年04月26日 - 23时52分36秒
  • 发布日期:2020年04月26日 - 23时50分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码