本文转自:http://pdfobject.com/index.php

When possible, use standardized HTML markup and avoid JavaScript

In an ideal world, you would always embed your PDF files using an <object> element hard-coded in your HTML markup. Why? For starters, avoiding JavaScript usually means greater accessibility, greater searchability (important for those concerned with search engine optimization), and fewer browser compatibility issues. Since no JavaScript is being used, standardized markup is also quicker to load and less of a drain on computer and network resources.

Click here to learn more about embedding PDFs using standardized HTML markup.

Sometimes you need a little JavaScript. When you do, try PDFObject.

Some projects will require dynamically embedded PDFs. PDFObject was designed for this purpose, and makes embedding PDFs quick and easy while maintaining a healthy respect for standards.

PDFObject  uses JavaScript to generate the same standards-compliant <object> markup you would normally write yourself,  then inserts the <object> into your HTML element of choice. You can fill the entire browser window, or insert the PDF into a <div> or other block-level element.

Here's a very simple no-frills example of PDFObject; this example will make the PDF fill the entire browser window:

<html>
<head>
<title>PDFObject example</title>
<script type="text/javascript" src="pdfobject.js"></script><script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed();
};
</script> </head>
<body>
<p>It appears you don't have Adobe Reader or PDF support in this web
browser. <a href="sample.pdf">Click here to download the PDF</a></p>
</body>
</html>

Embedding a PDF can't get much easier! There are also many other embed options available; visit the code generator to see what's possible.

Features

  • Detection of PDF plugin or PDF file-handling support.

    • Checks for Adobe Reader.
    • Checks for generic support via the application/pdf mime type.
  • Only attempts to embed PDF if support is detected.    
    • if PDF support is detected, the <object> is embedded with all specified parameters;
    • if PDF support is not found, the <object> will not be embedded, and the fallback content is left as-is.
  • Returns reference to the HTML <object> (similar to getElementById) or null.
  • If no element ID is passed into the embed() call, PDFObject will default to document.body, filling the entire browser window.
  • Accepts optional embed parameters, including size, id, and most PDF open parameters.
  • Automatically appends extra CSS needed for full-window PDF embeds    
    • Removes padding and margins
    • Fixes 100% height issue in some browsers

Compatibility

Please note this compatibility chart has not been updated to reflect PDFObject 1.2.

PDFObject is compatible with every major browser capable of displaying PDFs. Please note these results  are from internal testing of PDFObject using Adobe Reader; no open-source PDF browser plugins were used during testing.

  Windows XP         (Professional) Windows Vista         (Business) Mac OS X 10.5         (Leopard) Ubuntu 8.04         (Hardy Heron)
Internet Explorer 6 X not applicable not applicable not applicable
Internet Explorer 7 X X not applicable not applicable
Mozilla Firefox 3 X X no Adobe Reader plugin X
Apple Safari 3.1 X X X not applicable
Opera 9.5 X X no Adobe Reader plugin X

not applicable: Specified browser is not produced for this operating system. no Adobe Reader plugin: Adobe Reader unavailable for this browser/OS combination.

Syntax

PDFObject's syntax will feel very familiar to users of JavaScript frameworks such as jQuery and MooTools. Here's a typical example:

var myPDF = new PDFObject({
url: "sample.pdf",
id: "myPDF",
width: "500px",
height: "300px",
pdfOpenParams: {
navpanes: 1,
statusbar: 0,
view: "FitH",
pagemode: "thumbs"
}
}).embed("mydiv");

Here's another example:

var myParams = {
url: "sample.pdf",
pdfOpenParams: { view: "FitV" }
}; var myPDF = new PDFObject(myParams).embed("mydiv"); //returns reference to new HTML <object>

Note that embed is chained on to the new PDFObject statement. You can also use them separately:

var myParams = {
url: "sample.pdf",
pdfOpenParams: { view: "FitV" }
}; var myPDF = new PDFObject(myParams); //returns reference to JavaScript object myPDF.embed("mydiv"); //returns reference to new HTML <object>

Properties and methods

PDFObject contains the following properties and methods.

Name Type Description
PDFObject(obj) constructor

Use an object for passing arguments. obj can contain the following arguments:

  • url (string, required)
  • id (string)
  • width (string, with unit of measurement such as "100%" or "500px")
  • height (string, with unit of measurement such as "100%" or "500px")
  • pdfOpenParams (object, may contain any of the PDF Open properties specified by Adobe)

Returns reference to self (this).

PDFObject.embed(targetID) method Embeds PDF.  Returns HTML <object> element or false if embed not successful.
PDFObject.get(prop) method

Returns value of property. If property is not found or has no value, returns null. Available properties:

  • url  (string)
  • id (string)
  • width (string)
  • height (string)
  • pdfOpenParams (object)
  • pluginTypeFound (string)
  • pdfobjectversion (string)
pipwerks.pdfUTILS.detect.hasReader() support function Returns boolean indicating whether navigator.plugins version of Adobe Reader has been found.
pipwerks.pdfUTILS.detect.hasReaderActiveX() support function Returns boolean indicating whether ActiveX version of Adobe Reader has been found.
pipwerks.pdfUTILS.detect.hasGeneric() support function Returns boolean indicating whether application/pdf mime type is supported via navigator.mimeTypes
pipwerks.pdfUTILS.detect.pluginFound() support function Returns string "Adobe" or "generic". Returns null if none found.
pipwerks.pdfUTILS.setCssForFullWindowPdf() support function sets the following style properties:
html.style.height = "100%";         html.style.overflow = "hidden"; body.style.margin = 0; body.style.padding = 0; body.style.height = "100%"; body.style.overflow = "hidden";
These properties need to be set in order to remove margins/padding in the document, and to enable the object to stretch to 100% vertically.
pipwerks.pdfUTILS.buildQueryString(pdfOpenParams) support function Takes properties of pdfOpenParams object and 'stringifies' them.
pipwerks.pdfUTILS.termFound(strToSearch, term) support function Returns boolean         shortcut for strToSearch.indexOf("term") !== -1

Known issues

PDFObject has no known issues at this time. The biggest issue you may face is browser support for Adobe Reader and/or funky behavior in Reader. This is beyond the scope of this simple embed script. Shortcomings encountered with Reader during testing included:

  • Crashes/hanging when trying to replace an embedded PDF with a second PDF (by replacing the first <object> element with a new <object>).
  • Crashes/hanging when attempting to embed more than one PDF on a single HTML page (FYI this behavior can be avoided by using iframes).

Important note: PDFObject does NOT include version detection

PDFObject does not allow you to target a specific version of Adobe Reader, such as version 7 and higher. While version detection is possible, it is a very cumbersome task and nearly impossible to maintain or make future-proof, largely due to Adobe frequently changing the plugin's name and description. For instance, in Safari,  Adobe Reader 8.1's name is reported as "Adobe Acrobat and Reader Plug-in," while the name in the Windows version of Firefox is "Adobe PDF Plug-In For Firefox and Netscape." Until version reporting is consistent in Adobe Reader (across browsers and operating systems), PDFObject will not include version detection.

Tip of the cap

PDFObject was built using information, code, tools, or inspiration provided by others, including (in no particular order):

Thanks, guys!

[转]PDF预览插件PDFObject.js的更多相关文章

  1. PDF预览之PDFObject.js总结

    get from:PDF预览之PDFObject.js总结   PDFObject.js - 将PDF嵌入到一个div内,而不是占据整个页面(要求浏览器支持显示PDF,不支持,可配置PDF.js来实现 ...

  2. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  3. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  4. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  5. 浏览器实现PDF预览

    1.使用jquery.media.js预览PDF <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. Pdf预览功能实现(asp.net)

    asp.net中使用 1.pdf预览功能实现的插件是pdfjs-1.5.188-dist //引入插件中相关的文件以及jquery文件 @section css{ <link rel=" ...

  7. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  8. 图像本地预览插件(基于JQUERY、HTML5)

    最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样 ...

  9. Android原生PDF功能实现:PDF阅读、PDF页面跳转、PDF手势伸缩、PDF目录树、PDF预览缩略图

    1.背景 近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开发的 ...

随机推荐

  1. BI之SSAS完整实战教程3 -- 创建第一个多维数据集

    上一篇我们已经完成了数据源的准备工作,现在我们就开始动手,创建第一个多维数据集(Cube). 文章提纲 使用多维数据集向导创建多维数据集 总结Cube设计器简介 维度细化 总结 一.使用向导创建多维数 ...

  2. 编译安装memcached扩展记要

    编译memcached扩展的时候,得指定libmemcached库的位置 --with-libmemcached-dir=DIR 来指定路径.这个路径就是安装libmemcached时指定的prefi ...

  3. [Architecture Design] CLK Architecture

    CLK.Prototype.Architecture 最近找数据,看到了博客园在不久之前,办了一个架构分享的活动:.Net项目分层与文件夹结构大全.看完之后觉得获益良多,接着也忍不住手痒,开始整理属于 ...

  4. 使用openssl创建自签名证书及部署到IIS教程

    概要 本文讲解三个部分:1. 创建自签名证书2. 创建自己的证书颁发机构3. 以及如何配置IIS 创建自签名证书 首先,创建一个私钥文件: openssl genrsa -out myselfsign ...

  5. 身份证校验(c++实现)

    描述: 我国国标[GB 11643-1999]中规定:公民身份号码是18位特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码 ...

  6. ElasticSearch实战使用

    注意:以下命令都是使用sense测试(ElasticSearch第二步-CRUD之Sense),且数据都已经使用过IK分词. 以下测试数据来源于文档(db_test/person) 需要注意的是下面的 ...

  7. RHEL7文件管理

    Linux系统目录结构 主要目录说明 目录 说明 / 通常称为根分区所有的文件和目录的起始点只有root用户对此目录拥有写权限 /home 普通用户的宿主目录 /root 超级用户的宿主目录 /dev ...

  8. Uploading Files in SharePoint 2013 using CSOM and REST

    http://www.shillier.com/archive/2013/03/26/uploading-files-in-sharepoint-2013-using-csom-and-rest.as ...

  9. 解析XML的几种方法之SAX解析

    假期总结不能停,坚持坚持....接下来总结一下XMl和json的解析和生成.. 解析XML的四种方法,即:DOM.SAX.JDOM和DOM4J 下面首先给出这四种方法的jar包下载地址: DOM:在现 ...

  10. MQTT for UWP

    老规矩,先简单介绍下MQTT: MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协 ...