pdf.js2.2的使用

所谓工欲善其事必先利其器,要想使用pdf.js2.2,我们先需要获取这个js文件。下载

下载好了之后,我们就可以来使用了。

一:单页加载

首先,我们来看一下,html的代码:

就是一个翻页,和渲染pdf的canvas。

接下来,就开始使用pdf.js编码了

第一步:引入几个js文件

第二步:相关初始化

canvas的初始化可放后,这里实现的是翻页加载的功能,所以维护一个canvas对象就行了,然后对pdf.js做一些初始化的工作,首先加载pdf.worker.js文件,这个和pdf.js就是负责pdf解析相关工作的。然后设置字体库。在上面给的链接里面下载了之后,直接有(其实就是官方demo里的啦~),不设置也无所谓,不过如果pdf里没有相关字体,可能报错,你也可以在这个cmaps文件夹选择一些字体文件,不选择所有的。

第三步:初始化相关做完了,此时就可以加载pdf文件了。首先我们需要获取pdf文件,如下所示:

url方式
base64编码格式

此时pdf已经加载好了,但是!注意,这个时候,页面还是空白,因为没有渲染。所以,接下来,要做的就是渲染文件

第四步:渲染页面

因为此处我们需要把宽度,固定为800,所以重新计算了一次缩放比例,然后给canvas这个页面元素设置宽高,当然此处,还可以设置canvas的其他效果,详见canvas。然后静待页面渲染完成即可。因为此处,设置了翻页。可能连续点击下一页上一页啊的按钮。所以,做了判断,如果在当前页还在加载的情况下,就又点击了一次的话,那么,应该不是马上就渲染,要等当前页渲染完成在渲染。当然,可以在渲染一页的时候,拦截这个事件,或者做别的处理也行。

上面说的,其实页面已经渲染完成了。加载的是第一页。

下面补充一些方法。

最后看下效果:

二:加载全部(多页)

前面实现了单页加载的功能,但是我想一次性加载完所有的该怎么办呢,其实和前面的单页加载一样,就改几个小地方就行啦

1、pdf加载完成之后,直接把所有页面渲染出来

其次,每个循环时,重新创建个canvas对象,设置相关属性即可:

这样,就把所有页面加载出来啦。当然,其他很多效果都可以实现,参考canvas和html5就行~~~

项目地址:地址

参考资料:资料

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 基于html5的移动web页面搭建技术总结 1.技术要点 1.1面向不同尺寸的手机屏幕,页面布局适配问题。 网页的...
    敲代码的张阅读 1,648评论 0赞 3
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,895评论 1赞 32
  • 基于html5的移动web页面搭建技术总结1.技术要点1.1面向不同尺寸的手机屏幕,页面布局适配问题。 网页的he...
    敲代码的张阅读 444评论 0赞 0
  • 文从小就没有父亲,也就没有感受过一星半点的父爱。母亲含辛茹苦把他和姐姐拉扯长大。文性格内向,也很少接触姐姐和母亲以...
    沉浮梦醒阅读 404评论 0赞 2
  • 关于金岳霖,我们听到的更多的是有关他的情感方面的传闻。比如他和秦丽莲,他和林徽因,还有“女子当如林徽因,情人当若金...
    王根云阅读 394评论 0赞 0

友情链接更多精彩内容