在日常的项目当中,有一个需求就是把我们的PDF显示在html当中,网上有很多方法,但由于浏览器兼容问题,很多方法都不是很完美。接下来我们来讲一下利用pdf.js来解决这个问题,目前我认为是比较完美的。它的使用方法非常简单,好用!
接下来一起来看看吧。
目前随着浏览器技术发展的不断成熟与强大,大部分的浏览器都支持直接把PDF文件拖到浏览器中显示,最方便的是这个操作不需要额外的插件支持。但是不同的浏览器加载显示PDF的效果不同。这时就需要专门的JS插件来处理。Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在所有主流的浏览器上显示PDF文档,使用起来十分的方便。唯一的要求就是浏览器必须支持HTML5。
一、pdf.js简介
它是Mozilla开源一个插件pdf.js,大家可以去官方网站去下载下来。
下载后得到一个压缩包pdfjs-2.0.-dist.zip(可能你下载的版本不一样)
其中:
build目录中pdf.js和pdf.worker.js是核心文件,pdf.js可以实现在线预览pdf文档,
核心部分是pdf.js和pdf.worker.js,一个负责API解析,一个负责核心解析
web目录中viewer.html是pdf查看器
二、pdf.js实现预览的原理:
1.首先把这个压缩过后的文件传到你的服务器当中
2.通过访问viewer.html的方式来查看PDF,这里要注意的是需要传递一个重要的参数,设置为要显示的pdf文件的路径
例如: