由于在做手机项目中需要用到预览pdf文件的需求,一搜还真多,试用后发现兼容性不是很好,大多需要浏览器对pdf阅读的支持;

如果你只是想不依赖浏览器本身对pdf解析的情况下,在手机展示pdf文件,就需要了解各个插件的优缺点进行选择;

1、PDFObject

该插件需要用到浏览器h5解析pdf的支持,在手机webview使用兼容性不是很好,下面看官方的说明:

Why use PDFObject?

PDFObject 2.0 detects browser support for inline/embedded PDFs. (In case you were wondering, your browser supports embedded PDFs. You lucky dog, you!)

If you're working with dynamic HTML, such as a single-page web app, you may need to insert PDFs on-the-fly. However, PDF embedding is not supported by certain browsers. If you insert markup without first checking for PDF support, you could wind up with missing content or a broken UI.

The PDFObject utility helps you avoid these situations by detecting support for PDF embedding in the browser; if embedding is supported, the PDF is embedded. If embedding is NOT supported by the browser, the PDF will NOT be embedded.

By default, PDFObject 2.0 inserts a fallback link to the PDF when the browser does not support inline PDFs. This ensures your users always have access to your PDF, and is designed to help you write less code. The fallback link can be customized, or the option can be disabled if you prefer.

PDFObject 2.0 is npm-ready. Modern web apps use npm to manage packages and dependencies. PDFObject 2.0 is registered with Node Package Manager (npm) and can be loaded dynamically.

PDFObject also makes it easy to specify Adobe's proprietary "PDF Open Parameters". (Be warned these parameters are only supported by Adobe Reader, most PDF readers will ignore the parameters, including the built-in PDF readers in Chrome, Internet Explorer, and Safari. Read more below.)

    

为什么要使用PDFObject?

PDFObject 2.0检测浏览器支持嵌入式/嵌入式PDF。 (如果你想知道,你的浏览器支持嵌入式PDF,你幸运的狗,你!)

如果您正在使用动态HTML,例如单页网络应用程序,则可能需要即时插入PDF。但是,某些浏览器不支持PDF嵌入。如果您在没有首先检查PDF支持的情况下插入标记,则可以弥补缺少的内容或损坏的UI。

通过检测对浏览器中的PDF嵌入的支持,PDFObject实用程序可以帮助您避免这些情况;如果支持嵌入,则嵌入PDF。如果浏览器不支持嵌入,则不会嵌入PDF。

默认情况下,当浏览器不支持内联PDF时,PDFObject 2.0将插入到PDF的后备链接。这确保您的用户始终可以访问您的PDF,旨在帮助您编写更少的代码。后备链接可以自定义,或者如果您愿意,可以禁用该选项。

PDFObject 2.0已经准备好了。现代网络应用程序使用npm来管理软件包和依赖项。 PDFObject 2.0已在Node Package Manager(npm)中注册,可以动态加载。

PDFObject还可以轻松地指定Adobe的专有“PDF打开参数”。 (请注意,这些参数仅由Adobe Reader支持,大多数PDF阅读器将忽略参数,包括Chrome,Internet Explorer和Safari中的内置PDF阅读器,请阅读下文。)

What PDFObject doesn't do

PDFObject is not a rendering engine. PDFObject just writes an <embed> element to the page, and relies on the browser or browser plugins to render the PDF. If the browser does not support embedded PDFs, PDFObject is not capable of forcing the browser to render the PDF.

If you need to force browsers to display a PDF, we suggest using Mozilla's PDF.js. Note that PDF.js is subject to its own limitations, such as cross-domain security restrictions. PDFObject and PDF.js play well together, there are links to some great PDF.js examples in the Examples section below.

PDFObject does not provide the ability to customize the look and feel of the PDF toolbar. The toolbar is controlled by the browser, and will vary widely from browser to browser (Chrome versus Safari versus Firefox, etc.). Some of these browsers provide the ability to show or hide the toolbar, or a feature such as the search field, via PDF Open Parmeters. However, in general the browsers do NOT provide any mechanism for customizing the toolbar. If you really need to customize the toolbar, try forking Mozilla's PDF.js and customizing it to suit your needs.

PDFObject does not validate the existence of the PDF, or that the PDF is actually rendered. The assumption is that you are specifying a valid URL and the network is functioning normally. PDFObject does not check for 404 errors, and JavaScript cannot detect whether the PDF actually renders, unless you are using PDF.js, which is outside the scope of PDFObject.

PDFObject does not magically implement PDF Open Parameters. As mentioned above, these parameters are not widely supported. The PDF rendering engine either supports them or doesn't — PDFObject cannot force the rendering engine to implement these features.

什么PDFObject不做

PDFObject不是一个渲染引擎。 PDFObject只是将一个<embed>元素写入页面,并依赖于浏览器或浏览器插件来呈现PDF。如果浏览器不支持嵌入式PDF,PDFObject不能强制浏览器呈现PDF。

如果您需要强制浏览器显示PDF,我们建议使用Mozilla的PDF.js.请注意,PDF.js有其自身的限制,如跨域安全限制。 PDFObject和PDF.js很好地协同工作,下面的例子中有一些很棒的PDF.js示例链接。

PDFObject不提供自定义PDF工具栏的外观的功能。工具栏由浏览器控制,并且从浏览器到浏览器(Chrome与Safari和Firefox等)的差异很大。其中一些浏览器提供了通过PDF打开Parmeters显示或隐藏工具栏或功能(如搜索字段)的功能。但是,一般来说,浏览器不提供自定义工具栏的任何机制。如果您真的需要自定义工具栏,请尝试针对Mozilla的PDF.js进行自定义以满足您的需求。

PDFObject不验证PDF的存在,或PDF实际呈现。假设您指定一个有效的URL,并且网络正常运行。 PDFObject不检查404错误,JavaScript无法检测PDF是否实际呈现,除非您使用的PDF.js不属于PDFObject范围。

PDFObject不会神奇地实现PDF打开参数。如上所述,这些参数不被广泛支持。 PDF渲染引擎支持它们或不支持 - PDFObject不能强制渲染引擎实现这些功能。

2、jquerymedia

下载

The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page. The plugin converts an element (usually an <a>) into a <div> which holds the object, embed or iframe tags neccessary to render the media content.

jQuery Media插件支持将标准标记转换为富媒体内容。 它可以用于将几乎任何媒体类型(包括Flash,Quicktime,Windows Media Player,Real Player,MP3,Silverlight,PDF等)嵌入到网页中。 该插件将一个元素(通常是<a>)转换成一个保存对象的<div>,需要嵌入或iframe标签才能呈现媒体内容。

3、pdf.js

重点介绍的就是这个插件,可以完全脱离浏览器的依赖,支持pdf阅读展示,真的很强大,这个才是我需要找的,且看插件说明:

  • PDF.js是使用HTML5构建的便携式文档格式(PDF)查看器。
  • PDF.js是由Mozilla实验室的社区驱动和支持。 我们的目标是创建一个通用的基于Web标准的平台,用于解析和渲染PDF。

不同之处在于pdf.js是web渲染pdf引擎。

PDFObject.js、jquerymedia.js、pdf.js的对比的更多相关文章

  1. pdf.js插件使用记录,在线打开pdf

    天记录一个js库:pdf.js.主要是实现在线打开pdf功能.因为项目需求需要能在线查看pdf文档,所以就研究了一下这个控件. 有些人很好奇,在线打开pdf文档浏览器不是支持吗.是的你说的都是现代浏览 ...

  2. pdf转为html查看pdf.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. pdf.js安装步骤和使用

    从github下载的源码不能直接使用,最好使用命令行下载安装 1.下载源码 git clone git://github.com/mozilla/pdf.js.git cd pdf.js 2.安装no ...

  4. 使用pdf.js在移动端预览pdf文档

    pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...

  5. PDF.js Electron Viewer

    PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 A ...

  6. pdf.js pdfdom.js使用(转)

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  7. 在线阅读PDF文件js插件——pdf.js

    最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能. 首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobje ...

  8. pdf.js使用总结#如何在网页读取并显示PDF格式文档

    pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核 ...

  9. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

随机推荐

  1. 给iOS项目中添加图片,并通过UIImageView引用和显示该UIImage图片

    [问题] 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件 过程中,问题转换为,需要给当前iOS项目中,添加一个图片. 类似于Windows开发中的资源文件,其中图片文件属于资源的 ...

  2. Kinect 开发 —— 控制PPT播放

    实现Kinect控制幻灯片播放很简单,主要思路是:使用Kinect捕捉人体动作,然后根据识别出来的动作向系统发出点击向前,向后按键的事件,从而使得幻灯片能够切换. 这里的核心功能在于手势的识别,我们在 ...

  3. mvn本地执行java程序

    mvn -f pom.xml compile exec:java -Dexec.classpathScope=compile -Dexec.mainClass=storm.starter.WordCo ...

  4. spring bean中的properties元素内的ref和value的区别;* 和 ** 的区别

    spring bean中的properties元素内的ref和value的区别 至于使用哪个是依据你所用的属性类型决定的. <bean id="sqlSessionFactory&qu ...

  5. 微信小程序从零开始开发步骤(七)引入外部js 文件

    上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...

  6. 如何在手机上查看测试vue-cli构建的项目

    用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一 ...

  7. SNMP介绍,OID及MIB库

    http://blog.sina.com.cn/s/blog_4502d59c0101fcy2.html

  8. IIS6下AD域设置

    简介:IIS6下AD域设置 IIS6下AD域设置 http://files.cnblogs.com/files/KingUp/AD%E5%9F%9F%E8%AE%BE%E7%BD%AE.rar

  9. 【hdu 3478】Catch

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=3478 [Description] 一个人从起点s出发,假设他在时间t在节点x; 则在时间t+1,他 ...

  10. [NPM] Publish npm packages using npm publish

    In this lesson we will publish our package. We will first add a prepublish script that runs our buil ...