pdf.js使用教程

pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!)

据说IE9以上是OK的,因为我本地是IE11,所以我只在IE11上测试过,是通过的(当然火狐,360,我也测了一下,是可以的)。

因为项目开发需要,在线展示PDF,而且要兼容IE,所以就选择了pdf.js,但是网上对他的教程很少,我花了一天时间才搞定,回头看了一下,也没有想象中那么困难,所以决定写一篇博客,以便大家参考!

以下是pdf.js相关的网址:

GitHub: https://github.com/mozilla/pdf.js/

上面这个网址,有pdf.js的基本简介,以及如何获取源码,之后如何进行构建!

但是他的获取源码使用:

$ git clone git://github.com/mozilla/pdf.js.git

构建使用:

$ node make generic

不知道在Windows7上该怎么用git、node(如果有知道的,可以告诉我下,在此谢过!),所以我就改用linux进行构建(期间有很多心酸历程,感觉都可以拍成电影了!!!比如说我用git获取源码时,系统提示我git没有安装,我用node时,提示我ShellJs没有安装,安装ShellJS,他告诉我要使用npm,意料之中,npm我也没有安装...),其实,我们使用pdf.js,最终只需要构建后的内容,大家可以通过这里进行下载:

http://yunpan.cn/cwmjKF6jKY6Kb  访问密码 c14a

构建后的目录结构为:

有了构建后的build内容,我们就可以做一个简单的测试,把generic拷贝到Tomcat的webapps中

启动Tomcat后,就可以通过:

http://localhost:8080/generic/web/viewer.html

进行访问!可以看到一个很帅气的界面:

generic/web/viewer.html主要是渲染pdf阅读器的样式,而generic/web/viewer.js则是指定打开的pdf文件(当然还有其他功能,不过这些都不是我们关心的),我们看位于generic/web/viewer.js的一段代码:

我们可以看到,他默认打开generic/web/compressed.tracemonkey-pldi-09.pdf文件,再来看下面这段代码:

这就告诉我们,可以通过传递file形参来动态指定打开的pdf文件!如:

http://localhost:8080/generic/web/viewer.html?file=qbs.pdf

下面我就介绍下,具体嵌入项目中是如何运用的!

可以把generic中的内容作为第三方插件进行使用,在项目中可以像如下存放:

然后页面可以使用<iframe>标签来加载pdf

1 <iframe src="<c:url value="/resources/plugin/pdfJs/generic/web/viewer.html" />?file=<c:url value="/publicity/displayPDF.do" />" width="100%" height="800"></iframe>

效果图,如下:

实质就是我们直接访问generic/web/viewer.html,然后为其指定一个file形参,用于指定打开的pdf文件!我上面使用的流的方式进行指定的。

至此,pdf.js插件的介绍就告一段落了,第一次写博客,如有不到之处,希望大家可以不吝赐教,谢谢!

在此感谢pdf.js的两位作者!(真心佩服这些外国大师,2个人可以写一个这么好的框架,而且还是开源的!)。

感谢hyhbyl先生!他的文章指引了我!附网址一份:

http://blog.csdn.net/hyhbyl/article/details/20994945
时间: 2024-10-24 21:47:50

pdf.js使用教程的相关文章

pdf.js的使用(跨域)

开发微信公众号,项目需求是,多个pdf文件,点击时在线打开. 找了好多教程,贴一个参考文章.http://blog.csdn.net/xiangcns/article/details/42089189 pdf.js源码地址:http://mozilla.github.io/pdf.js/ 把文件上传到项目中. 文件结构如图. 把generic->web->viewer.js里的DEFAULT_URL注释掉,新建一个php文件. <?php echo file_get_contents($

pdf.js 使用实例

pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析 下载地址:http://cnblogs.com/files/xiangliuyunyang/build.zip 两个主要demo 1.点击连接读取第一页的pdf文档:http://www.51purse.com/pdf/web/demo1.html(此处没有自己上传) 2.点击连接,选择需

PDF.js实现个性化PDF渲染(文本复制)

我肥来啦??.看到Redux教程突破3w的浏览量,小窃喜,很高兴自己的文章能够帮助到大家. 这次重返,依然带给大家一个小指南,也是最近工作中遇到的一个小case. 前不久,产品经理提出要在界面上优雅地展示PDF文档,当即就有了两种实现方式: 实现方式一使用embed标记来使用浏览器自带的pdf工具. 这种实现方式优缺点都很明显:优点:自带“打印”,“搜索”,“翻页”等功能,强大且实现方便.缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等. 我们的产品经理是挑剔的

使用PDF.JS在线查看PDF

过程简单粗暴. 第一步:下载源码https://github.com/mozilla/pdf.js 第二步:将源码拷贝进项目中,可以新建一个PDFShow文件夹存放代码 第三步:修改viewer.js var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf'  里面是PDF的路径 修改为:var DEFAULT_URL = ''; 发布IIS后访问localhost:8080/PDFShow/web/viewer.html?file=09.pd

24个很赞的 Node.js 免费教程和在线指南

JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程和在线指南.这些资源对于任何想要学习更多的关于 Node.js 的知识的开发人员都是很有用的. 您可能感兴趣的相关文章 经典网页设计:超炫动画效果单页网站 30个独具匠心的精美单页网站设计案例 25个以全屏照片为背景的精美网页作品 20个与众不同的网页联系表单设计案例 20个模糊背景在网站中的经典应

pdf.js在IIS中配置使用笔记

最近在手机App开发Android版本时候遇到需要显示PDF文件的需求,记得之前直接使用系统浏览器或者WebView就可以显示,但是现在不可以了,只能另寻其他办法. 最终找到PDF.JS来进行实现,但在测试的时候发现有部分中文无法显示,但使用github上的示例是可以显示的,Clone到本地之后进行查看原因. 我配置的环境是在IIS环境下,使用Chrome来进行调试发现有文件未能正常载入,其中包含.properties文件和.bcmap文件.按照以往经验感觉应该是IIS不识别这些文件,于是在We

怎么样修改PDF文件-PDF文件修改教程

怎么样修改PDF文件-PDF文件修改教程 现在网络上共享资源非常多,大家写个文章找个答案都会到网上进行一番搜索,可是网络上的很多资料都是PDF格式,或者直接是图片,对于这种情况,很不利于用户对资料的有效使用,有什么方法可以将pdf文件进行修改呢? 经过小编的网络上众多文字识别工具的测试,终于找到一款文字提取效果非常好的工具——捷速ocr文字识别软件. 一.工具下载及安装  1.捷速ocr文字识别软件 v2.0 免费版 2.安装过程比较简单,每一步都有相应的提示,用户只需三步即可轻松完成. 二.运

使用pdf.js显示pdf文件

<script type="text/javascript" src="build/pdf.min.js"></script> <script type="text/javascript"> PDFJS.workerSrc = 'build/pdf.worker.min.js'; </script> <script type="text/javascript"> $.

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—引用传递

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 1.如何编写一个 json 对象的拷贝函数 function clone(obj){ var result; if (Array.isArray(obj)) { result = []; obj.forEach((item) => { result.push(clone(item)); }); } else if (typeof obj === 'objec