初次体验PDF.JS，非常好用的pdf前台包

客户死活要用IE，IE这破烂仗着他老爹微软这几年的影响力，在各大公司占了浏览器的重要职位。

IE就连自己打开pdf也不会，只能靠外援他爹的盘友adobe，adobe自以为有点料，一打开就要上头条，给个iframe让他穿穿他都不要，直接裸身出镜，把哥的整个页面都挡住，靠！！这俩2B！！

pdf.js 是firefox的pdf解析，现在开源，试用了一下，挺好，全js操作，可控性好，想怎么显示就怎么显示，基本达到了人尽可夫滴境地啦~~~哈

首先去下个git。（待会需要用git去拿pdf.js哦）

http://git-scm.com/downloads

下载完毕后安装（哥安装的是IE他老爹windows的，哥也被window控制了好些年，悲催）

然后去https://github.com/mozilla/pdf.js/

里面有下载包，有例子，还教你怎么取buil你想要的包。

打开你本地cmd，把direct到安装git的bin包里，

C:\Program Files\Git\bin>

然后输入

git clone git://github.com/mozilla/pdf.js c:/xxxx (此为你要储存的本地路径）

回车，这时你会看到git开始下载。

下载完毕后，你可以再c:/xxxx文件夹里看到下载的文件

好了，里面有examples文件夹，装有一些简单的例子，hellow world，

右键击index.html，open with ie9, 额，开不了，打开修改index.html

添加一个js连接

让它支持IE9

接着打开hello.js, 找到PDFJS.getDocument('helloworld.pdf')，改为PDFJS.getDocument('http://www.copyright.gov/legislation/dmca.pdf')，让他打开一个online的pdf，安全考虑，因为pdfjs不能打开本地文件，必须要是服务器上的，他原本的这个测试包，是要求发布到一个服务器，然后可以读取http://localhost/helloworld.pdf，而我没发布，直接点击的，所以就在网上找了一个在线pdf，好了，可以打开了。很好，还没有完成哦

现在要build一个js的包，他包括显示pdf的所有功能，就是他的viewer。

先下载一个node.js

http://nodejs.org/download/

因为只是用来buil，所以我只下了个exe。

把下载下来的exe拷贝到之前下载pdf.js的路径里c:/xxxx

打开cmd， direct to c:/xxxx

确定该路径里有个make.js

然后输入

node make generic

运行结束后，该路径下会生成一个bulid文件夹，里面才是我们要用到的文件

我们来看一下效果

打开一个wamp server，把generic拷贝到wamp server的www里。（大家可以选择自己的web server，我刚好装了wamp，用它比较简单）

打开localhost，找到generic，打开找到里面的web文件夹，点开，选择里面的viewer.html

页面显示

漂亮哦，全pdf的功能，左上角还有slider，最重要的是，全js，可控性强，想要什么按钮就要什么按钮~~哈

注：项目当中有跨域读取pdf的问题，pdf.js只能读取同一个域里的pdf，如果需要跨域读取，一般需要被请求方set head的Access-Control-Allow-Origin：*，这个不是很好，最好是先用后台读取跨域的pdf流，写到前台，pdf.js读取该后台方法获取流显示。

如php：

打开viewer.js

找到var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';

该为var DEFAULT_URL = 'test.php';

然后再test.php里

<?php
echo file_get_contents("http://somedomain/doc/manuals/R-intro.pdf");
?>

初次体验PDF.JS，非常好用的pdf前台包相关推荐

pdf.js 利用HTML5技术显示pdf内容
Mozilla实验室最近在github上开源了一款js库pdf.js,用来读取PDF文件. http://mozilla.github.io/pdf.js/ Using base64 encoded ...
利用PDF.JS插件解决了本地pdf文件在线浏览问题（根据需要隐藏下载功能，只保留打印功能）
利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能) 参考文章: (1)利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功 ...
使用pdf.js在web页面展示pdf文件
最近弄的项目中需要在线展示PDF文件,以前用的是Adobe PDF阅读器直接在浏览器端打开的,这要求客户端必须安装这个软件,若是没有安装就不能在线预览了.为了解决这个问题,最终决定用pdf.js来实现 ...
JavaScript前端：与PDF.js结合，实现网页PDF内容批量下载
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 JavaScript前端:与PDF.js结合,实现网页PDF内容批量下载前言一.PDF.js是什么? 二.PDF.js单个PDF文 ...
PDF.js实现html页面读取pdf文件内容
项目中遇到要在HTML页面上读取PDF文档的内容,并显示在网页上. pdf.js官网:pdf.js官网本地附件:pdf.js 一.下载 1.下载至本地 2.创建PDF.js文件夹并将刚解压的文件放 ...
html 打印预览兼容,vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
springboot整合pdf.js实现在线预览pdf文件
今天在项目中实现pdf在线预览的功能的如图, 通过百度,查询合适的方法,最为简单的的是通过pdf.js的插件在前台展示.本以为是挺容易实现的,但都有莫名其妙的错误. 第一步:下载源码https://g ...
vue使用pdf.js实现移动端在线PDF文件预览
背景产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力方案 H5展示合同PDF,有很多实现方式.但是通过尝试后发现在不同操作系 ...
php 集成 pdf.js,JavaScript_js插件方式打开pdf文件(浏览器pdf插件分享)，两种方案：一种直接链接，把p - phpStudy...
js插件方式打开pdf文件(浏览器pdf插件分享) 两种方案:一种直接链接,把pdf文件当作img文件,类似这种形式,这样链接: 另一种:使用js插件哈. 其中实现阅读pdf文件的js插件很多,比如: ...

初次体验PDF.JS，非常好用的pdf前台包

初次体验PDF.JS，非常好用的pdf前台包相关推荐

最新文章

热门文章