更新于

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

发布于 / 分类: vue 基础 / 暂无评论 / 阅读量: 183

在用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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买