利用html5实现pdf在线预览

2018年2月2日10:21:29

最近有做一个项目《文档中心》，就是针对公司业务上一些专业性知识的介绍和系统平台的操作手册记录，刚开始项目经理也没有想好具体要怎么做。所以我们就采用博客编辑文章和发布文章的方式给做了，结果不能满足需求，从市场那边出来的很多文档都是pdf格式的。所以新增加pdf上传和pdf在线预览的功能。

针对pdf在线预览我觉得还是可以记录一下。

现代浏览器似乎都是支持pdf查看的，都是基于pdf.js做了浏览器扩展。

方式一：原生html实现

HTML <object> 标签，几乎所有主流浏览器都拥有部分对 <object> 标签的支持。定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。

而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。

先简单了解一下Object的参数和属性

你可以采用object或者embed来装载，一般建议两个一起用。

这里有做了一个object和embed的知识的简单总结


            <object width="100%" height="400" name="objPdf" style="border:1px solid grey;" data="/assets/pdf/1.pdf">
            
            <embed src="/assets/pdf/1.pdf" style="border:1px solid grey;" id="embFlash" width="100%" height=150>
            
            你的浏览器暂时不支持在线查看pdf
            
            </embed>
            
            </object>

方式二：利用PDFObject插件

利用插件的好处就是，有问题的时候插件可以帮你，当然如果你不想要这种解决方案，要么你自己搞，要么你扩展插件的功能。譬如说在firfox上下边的内容就打上浏览器不支持pdf在线预览的提示，然后给定下载地址。方式1的模式我就没有自己处理浏览器不支持的情况处理。

pdfObject插件所做的事情就是检查浏览器是否支持embed（这里我们称之为承载元素）元素，如果不支持承载元素，那么就给需要显示的位置给出提示信息如果浏览器支持承载元素，它会在需要显示的位置添加embed元素，同时给embed设置data参数。

使用这个插件的好处就是你不用自己去判断浏览器是否支持pdf在线预览，同时也不用去过多的关心怎么设置参数。说道设置参数，肯定我们的pdf在线预览的功能还会有很多额外的需求，譬如说，屏蔽下载按钮和打印等功能，因为需求方只想要用户能够浏览pdf的内容，并不想用户下载pdf。那么实践告诉您，通过原生实现和用类似于pdfObject都不能完全满足这样子的需求。我们顶多能够给pdf文件传参数：#navpanes=0&toolbar=0&statusbar=0&view=FitV&zoom=120。 如果想要我们来控制页面的显示和按钮的布局，目前来说还是考虑用pdf.js吧！


            <div id="pdfObject-container" style="width:100%;height:400px;"></div>
            
            <script>
            
            var options = {
            
            page:2
            
            };
            
            PDFObject.embed("/assets/pdf/1.pdf", "#pdfObject-container", options)
            
            </script>

方式三：利用PDF.js插件

这里有实验了四个pdf.js的简单例子，仅供参考。

这个插件就比较good了，一开始我用的时候一看一大把，我擦吓尿了，项目上就用了pdfObject直接了事，结果那里边好多定制的东西不能实现，问题都还放那在，结果项目总结的时候看了一下pdf.js，看完代码感觉还是可以。用法也很简单如果是用插件自带的view，直接一个iframe就好了。但是如果需要重新定制，就不是那么high心了，这里简单演示一下呈现吧