Open Source JavaScript PDF Viewer Library

What is PDFObject?

PDFObject is a free and open source JavaScript library developed for embedding PDF documents in web pages. It works by generating an HTML embed element and then integrating it into the HTML structure. The embed element then renders the PDF document. PDFObject is not a renderer itself; rather it focuses on creating the embed element and placing it within the HTML. It can create embed elements for displaying PDFs in full size or within specified sections of the webpage.

Following are some of the main features of PDFObject:

• Browser Support Detection: PDFObject can detect if a browser supports embedding PDFs.
• Fallback Mechanism: PDFObject has a fallback mechanism so in cases where a browser does not support embedding PDFs, PDFObject automatically activates the fallback logic allowing developers to either provide a link to the PDF or any other alternate logic as needed.
• PDF.js Integration: PDFObject provides optional integration with PDF.js, enabling developers to embed PDFs regardless of the browser's default PDF viewer. This feature is useful when the browser doesn't support embedding PDF documents in the HTML.
• PDF Open Parameters: PDFObject supports Adobe's proprietary PDF Open Parameters allowing developers to specify parameters for PDF display. This includes options like view mode and other Adobe-specific settings. All of these parameters can be found here.

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Getting Started with PDFObject

We can download the PDFObject library using the npm module:

npm i pdfobject

Embed PDF in HTML with Browser Support Verification

We can embed a PDF document in HTML using the PDFObject library. Initially we will check whether the browser supports embedding the PDF document in HTML using the supportsPDFs method of the PDFObject library. If it returns true indicating that it supports PDF embedding in HTML then we will embed the PDF in the HTML using the embed("document_name.pdf","#elementid") method. This function will embed the PDF in a specific element in the HTML. For full-size PDF embed we will not mention any element id and will call the method as embed("document_name.pdf"). However, if it returns false indicating that it doesn’t support PDF embedding in HTML then we will move to other alternate logic as needed. Check below code snippet for the details:

Output

The following output displays the PDF document embedded in the HTML:

Create a Fallback Mechanism

We can establish a fallback mechanism while embedding a PDF in a webpage using PDFObject which is activated when the browser doesn't support embedding PDF in HTML. PDFObject utilizes a parameter called fallbackLink which contains an alternate logic while calling the embed function. So, if a browser doesn't support embedding PDFs, the code present in the fallbackLink is executed in the designated div element. Check below code snippet for the details:

Output

The output screenshot displays the content displayed by the fallback mechanism. The fallback mechanism was activated when the browser didn’t support embedding PDFs in HTML.

Embed PDF with Adobe's PDF Open Parameters

We can embed PDFs along with some opening parameters using the PDFObject library. We will use the PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) method to embed the PDF document in the HTML along with the opening parameters. These PDF Open Parameters include features such as opening the PDF and scrolling to a specific page number. Check below code snippet for the details:

Output

The following screenshot shows the PDF document embedded in the HTML with additional parameters that make the embed element scroll to page number 3 after rendering it:

Embed PDF by integrating PDF.js

As we know PDFObject depends on the browser's support to embed PDFs in HTML but it does provides an alternate method to render PDFs if the browser doesn't support it. The alternate method is to integrate PDF.js with PDFObject. In order to do it, we will have to set up PDF.js on our server and then we will pass ForcePDFJS: true and PDFJS_URL: path/to/viewer.html/in/pdf.js parameters to the embed function.

Note: In below example code snippet, we have created and initiated a server containing the PDF.js library so http://localhost:8888 points to the PDF.js library.

Output

The following screenshot shows the rendered PDF document by integrating PDFObject with PDF.js:

Conclusion

In conclusion, PDFObject is an easy-to-use JavaScript library for embedding PDF documents in HTML. While it doesn't function as a renderer and relies on the browser's support for embed elements which can cause issues such as a broken UI in browsers that don't support embed element but the library has features to solve such issues through its support detection for embed element and fallback mechanism. We can also render PDFs in browsers that don’t support embed elements by integrating PDF.js with the PDFObject. Despite its limitations, PDFObject stands out as a valuable tool, to embed and render PDF documents in web pages.

Similar Products