如何在网页中实现pdf在线预览？

我们在给客户做项目的时候，客户会提出各种要求，例如在线预览pdf文件，这个问题在普通的浏览器中是解决不了的。那么如何在网页中实现pdf在线预览?哪个浏览器支持pdf在线预览?万兴PDF可以帮助大家哦!

第 1 部分：实现pdf文件在线预览功能有哪些？

方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

方式二、通过jquery插件jquery.media.js实现

这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。

方式三、PDF.js

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker. js，一个负责API解析，一个负责核心解析。

第 2 部分：哪个浏览器支持pdf在线预览？

firefox 和chrome，是可以直接打开来看的，其他的浏览器都不能直接看。

不过如果你装了万兴PDF这些pdf阅读器，那不论哪个浏览器都能看pdf了，利用的实际上是pdf阅读器的功能，并不是浏览器自己在解析pdf文件。

第 3 部分：如何在网页中实现pdf在线预览？

在这次踩坑的过程中，html中有一个标签让我对ta又有了新的认识，那就是embed标签，(我称ta为曾经的王者),ta天生就带着多媒体的属性，ta真的几乎什么都可以加载，一个pdf文件而已，小case~，一个src赋值走起!!!

但话说会来，如果ta这么强，为什么没有上天呢?当然是有原因的啦。

其一：加载的速度有点差，如果你的文件稍微大一点，页面就会陷入长期的一个停顿。如果你是以base64传输数据的，那等待时间会更长。

其二：兼容性

对IE不太友好(呵呵)，在IE中使用需要搭配object等一系列标签;

移动端貌似对这个标签的支持很不友好。

pdf在线预览

如果要实现pdf在线预览的话，首先浏览器必须支持，其次如果你下载了万兴PDF的话，软件内部就支持pdf在线功能，大家可以打开试一下！