本文转自: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. sql2008 查询字段所属表

    select a.name as 表名, g.*from sysobjects as a left join syscolumns as b on a.id=b.id left JOIN sys.ex ...

  2. JMS学习(一)基本概念

    这两天面试了一两个公司,由于简历中的最近一个项目用到了JMS,然而面试官似乎对这个很感兴趣,所以都被问到了,但可惜的是,我除了说我们使用了JMS外,面对他们提出的一些关于JMS的问题,我回答得相当差, ...

  3. Java调用JavaScript

    1.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  4. Linux_Centos中搭建nexus私服

    1.在Linux下搭建Nexus私服 1).下载并且解压      下载  nexus-2.11.2-03-bundle.zip      unzip nexus-2.11.2-03-bundle.z ...

  5. vIDC v2.0 强大的端口转发神器使用总结-开放内网tfs代码服务

    vIDC2.0 端口映射工具,最近在公司闲来无事,想自己整个tfs来管理自己的研究代码. 本来是想用微软Visual Studio提供的免费tfs,但是无奈速度太慢.他们的服务器在美国,中国也没有代理 ...

  6. 聊聊GISer的职业发展

    一.前言 去年写了一篇名为<GISer们还有机会屌丝逆袭吗?>的博文,希望能和广大GISer一起探讨地理信息产业留给小团队和个人的机会.文章发布后,很多GISer通过网络和我进行了交流,其 ...

  7. SharePoint 2013: Search Architecture in SPC202

    http://social.technet.microsoft.com/wiki/contents/articles/15989.sharepoint-2013-search-architecture ...

  8. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q35-Q39)

    Question 35You have a custom Web Part that is deployed as a sandboxed solution.You need to ensure th ...

  9. Android项目实战(四):ViewPager切换动画(3.0版本以上有效果)

    学习内容来自“慕课网” 一般APP进去之后都会有几张图片来导航,这里就学习怎么在这张图片切换的时候添加切换动画效果 先看布局文件 activity_main.layout <?xml versi ...

  10. iOS图像资源Images Assets

    1. 在工程中单击并打开导航区域中的Images.xcassets,看看都有些什么东东:]: 2. 在图中可以看到中间位置有两个虚线框,感觉应该可以直接拖文件进来.OK,那就先准备一下资源文件,如下图 ...