PDFObject - An open-source standards-friendly JavaScript utility for embedding PDF
PDFObject
An open-source standards-friendly JavaScript utility for embedding PDF files into HTML documents.
Note regarding Mozilla Firefox: (December 2016) There is a known issue with Mozilla Firefox, which prevents PDFObject from properly detecting PDF support. Mozilla has removed the application/PDF MIME type from Firefox, despite built-in support for rendering PDFs. They are currently debating whether to restore this feature. PDFObject will not be updated until Mozilla has reached a final solution. Sorry for the inconvenience. If you absolutely must embed PDFs in Firefox, for now there are two options: Use static markup (the handy generator can help you) or use your own copy of PDF.js and PDFObject's forcePDFJS option (this is a sledgehammer technique). Hopefully Mozilla will reverse their decision.
Note to PDFObject 1.x users: PDFObject 2.0 introduces breaking changes and is NOT backwards-compatible with PDFObject 1.x.
Browser support: PDFObject 2.0 is designed for modern browsers, and has been successfully tested in Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge. If you find issues or would like to share your own testing results, please post an issue in GitHub.
IMPORTANT: Browser support for PDFObject does not mean the browser supports PDF embedding! PDFObject only embeds PDFs in browsers that support PDF embedding. Some browsers do not natively support PDF embedding, including Safari for iOS and Internet Explorer [chart]. For browsers that do not support PDF embedding, PDFObject provides a way for you to display alternate content. Read below for details.
1. Create a container to hold your PDF
<div id="example1"></div>2. Tell PDFObject which PDF to embed, and where to embed it
<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>3. You can optionally use CSS to specify visual styling, including dimensions, border, margins, etc.
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>Question:Is JavaScript required for embedding PDFs in your HTML page?
Answer:No.
In fact, here are some examples for embedding PDFs in your web page using pure HTML markup without JavaScript, if you'd rather go that route.
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.)
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.
