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

时间:2023-09-27 17:50:38

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

我们在给客户做项目的时候,客户会提出各种要求,例如在线预览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的话,软件内部就支持pdf在线功能,大家可以打开试一下!