Convert Figma logo to code with AI

pipwerks logoPDFObject

A lightweight JavaScript utility for dynamically embedding PDFs in HTML documents.

2,453
980
2,453
0
View on GitHubView on NPM

Top Related Projects

mozilla's avatar

pdf.js

50,177

PDF Reader in JavaScript

FranckFreiburger's avatar

vue-pdf

2,262

vue.js pdf viewer

wojtekmaj's avatar

react-pdf

9,936

Display PDFs in your React app as easily as if they were images.

parallax's avatar

jsPDF

30,130

Client-side JavaScript PDF generation for everyone.

bpampuch's avatar

pdfmake

11,895

Client/server side PDF printing in pure JavaScript

foliojs's avatar

pdfkit

10,139

A JavaScript PDF generation library for Node and the browser

Quick Overview

PDFObject is a lightweight JavaScript library for embedding PDF files into HTML documents. It provides a simple way to detect whether the browser supports inline PDF viewing and embeds PDFs accordingly, falling back to alternative options when necessary.

Pros

  • Easy to use with a simple API
  • Lightweight (only 3.3KB minified)
  • Supports fallback options for browsers without PDF plugin support
  • Actively maintained and compatible with modern browsers

Cons

  • Limited to PDF embedding functionality only
  • Relies on browser PDF plugins, which may not be available on all devices
  • No built-in PDF viewer for unsupported browsers
  • May require additional configuration for complex use cases

Code Examples

Embedding a PDF with default options:

PDFObject.embed("path/to/file.pdf", "#pdf-viewer");

Embedding a PDF with custom options:

PDFObject.embed("path/to/file.pdf", "#pdf-viewer", {
    height: "600px",
    pdfOpenParams: {
        view: "FitV",
        page: "2",
        zoom: "75"
    }
});

Checking if the browser supports inline PDF viewing:

if (PDFObject.supportsPDFs) {
    console.log("This browser supports inline PDF viewing.");
} else {
    console.log("This browser does not support inline PDF viewing.");
}

Getting Started

  1. Include the PDFObject library in your HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js"></script>
  1. Create a container element for the PDF:
<div id="pdf-viewer"></div>
  1. Use PDFObject to embed the PDF:
PDFObject.embed("path/to/your/file.pdf", "#pdf-viewer");

That's it! PDFObject will handle the rest, including fallback options for unsupported browsers.

Competitor Comparisons

mozilla logo

pdf.js

50,177

PDF Reader in JavaScript

Pros of pdf.js

  • More comprehensive PDF rendering capabilities, including support for complex layouts and interactive elements
  • Actively maintained by Mozilla with regular updates and improvements
  • Extensive documentation and community support

Cons of pdf.js

  • Larger file size and more complex implementation
  • May be overkill for simple PDF embedding needs
  • Steeper learning curve for developers

Code Comparison

PDFObject (simple embedding):

PDFObject.embed("path/to/file.pdf", "#pdf-viewer");

pdf.js (basic rendering):

pdfjsLib.getDocument('path/to/file.pdf').promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    // Additional rendering code...
  });
});

PDFObject is more straightforward for basic PDF embedding, while pdf.js offers more control and advanced features at the cost of complexity. PDFObject is ideal for simple use cases, whereas pdf.js is better suited for applications requiring extensive PDF manipulation or custom rendering.

FranckFreiburger logo

vue-pdf

2,262

vue.js pdf viewer

Pros of vue-pdf

  • Specifically designed for Vue.js integration, offering seamless compatibility with Vue applications
  • Provides more advanced features like page navigation, zooming, and rotation out of the box
  • Actively maintained with regular updates and bug fixes

Cons of vue-pdf

  • Larger file size and potentially higher resource usage due to additional features
  • Steeper learning curve for developers not familiar with Vue.js ecosystem
  • May be overkill for simple PDF embedding needs

Code Comparison

vue-pdf:

<template>
  <pdf src="path/to/document.pdf" @loaded="onLoaded"></pdf>
</template>

<script>
import pdf from 'vue-pdf'
export default { components: { pdf } }
</script>

PDFObject:

PDFObject.embed("path/to/document.pdf", "#viewer");

vue-pdf offers a more declarative approach with Vue-specific features, while PDFObject provides a simpler, framework-agnostic solution for basic PDF embedding. The choice between the two depends on the project's requirements, with vue-pdf being more suitable for complex Vue.js applications and PDFObject for simpler, general-purpose PDF embedding needs.

wojtekmaj logo

react-pdf

9,936

Display PDFs in your React app as easily as if they were images.

Pros of react-pdf

  • Specifically designed for React applications, offering seamless integration
  • Provides more advanced features like page navigation and text selection
  • Supports rendering PDFs from various sources (URLs, files, base64)

Cons of react-pdf

  • Larger bundle size due to more comprehensive features
  • Steeper learning curve for developers new to React
  • May be overkill for simple PDF embedding needs

Code Comparison

react-pdf:

import { Document, Page } from 'react-pdf';

function MyApp() {
  return (
    <Document file="sample.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

PDFObject:

PDFObject.embed("sample.pdf", "#pdf-viewer");

Summary

react-pdf is a powerful solution for React applications requiring advanced PDF handling, while PDFObject offers a simpler, lightweight option for basic PDF embedding across various web projects. The choice between them depends on the specific needs of your application, with react-pdf being more suitable for complex React-based projects and PDFObject for quick, straightforward PDF integration.

parallax logo

jsPDF

30,130

Client-side JavaScript PDF generation for everyone.

Pros of jsPDF

  • Allows creation and manipulation of PDF documents directly in JavaScript
  • Supports a wide range of PDF features, including text, images, and forms
  • Can generate PDFs entirely client-side without server interaction

Cons of jsPDF

  • Larger file size and more complex to use than PDFObject
  • May have performance issues with large or complex documents
  • Requires more setup and configuration for basic PDF rendering

Code Comparison

PDFObject (embedding a PDF):

PDFObject.embed("path/to/file.pdf", "#pdf-viewer");

jsPDF (creating a simple PDF):

var doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");

Summary

PDFObject is a lightweight solution for embedding PDFs in web pages, while jsPDF is a more comprehensive library for creating and manipulating PDF documents. PDFObject is simpler to use for basic PDF viewing, whereas jsPDF offers more flexibility and features for working with PDFs programmatically. The choice between them depends on whether you need to display existing PDFs or create new ones dynamically.

bpampuch logo

pdfmake

11,895

Client/server side PDF printing in pure JavaScript

Pros of pdfmake

  • Client-side PDF generation, allowing for dynamic content creation without server-side processing
  • Extensive customization options for layout, styling, and content structure
  • Support for complex document structures, including tables, lists, and images

Cons of pdfmake

  • Steeper learning curve due to its more complex API and document definition structure
  • Larger file size and potentially slower performance for very large or complex documents
  • Limited support for interactive PDF features compared to PDFObject

Code Comparison

PDFObject (embedding a PDF):

PDFObject.embed("path/to/file.pdf", "#pdf-viewer");

pdfmake (creating a PDF):

var docDefinition = {
  content: [
    'Hello world',
    { text: 'Styled text', bold: true, fontSize: 20 }
  ]
};
pdfMake.createPdf(docDefinition).download();

Summary

PDFObject is focused on embedding existing PDFs in web pages, while pdfmake is designed for creating PDFs from scratch using JavaScript. PDFObject is simpler to use for basic PDF embedding, while pdfmake offers more flexibility for generating custom PDF documents on the client-side.

foliojs logo

pdfkit

10,139

A JavaScript PDF generation library for Node and the browser

Pros of PDFKit

  • More comprehensive PDF manipulation capabilities, including creation and editing
  • Supports both server-side (Node.js) and client-side usage
  • Offers advanced features like vector graphics, annotations, and form filling

Cons of PDFKit

  • Larger library size and potentially more complex to implement
  • May be overkill for simple PDF embedding tasks
  • Requires more setup and configuration for basic use cases

Code Comparison

PDFObject (embedding a PDF):

PDFObject.embed("path/to/file.pdf", "#pdf-viewer");

PDFKit (creating a simple PDF):

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Hello, World!');
doc.end();

Key Differences

PDFObject is primarily focused on embedding PDFs in web pages, making it lightweight and easy to use for this specific purpose. PDFKit, on the other hand, is a more powerful and versatile library for creating, editing, and manipulating PDF documents.

PDFObject is ideal for projects that only need to display existing PDFs, while PDFKit is better suited for applications that require dynamic PDF generation or modification.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

PDFObject

npm CDNJS downloads minzipped size install size

A lightweight JavaScript utility for dynamically embedding PDFs in HTML documents.

Examples and documentation can be found at https://pdfobject.com.

A PDFObject component for Vue.js 3 can be found at https://github.com/pipwerks/pdfobject-vue/

Copyright (c) 2008-2025 Philip Hutchison

MIT-style license: http://pipwerks.mit-license.org/

Changelog

2.3.1 (February 2025)

  • Added fallbackFileNameForBase64 option. If the browser doesn't support PDF embeds, and the PDF is a base64 file, this option will enable the developer to specify the filename for the downloaded PDF. Previously, the filename was hardcoded to 'file.pdf'. Thanks to Joshua Newall (@imjosh) for the contribution.

2.3 (February 2024)

  • Removed <embed> in favor of <iframe>. PDFObject had previously defaulted to an <embed> element, but over time it has become apparent the superior solution is <iframe>. It's universally supported, and does not suffer from <embed>'s odd quirks and spotty support. This should make PDFObject more consistent and robust across platforms.
  • As a result of removing <embed> and redefining the detection logic, some PDFObject options have become obsolete. They are safe to keep in your code (will not throw errors), but are no longer used by PDFObject. The deprecated options are: assumptionMode, forceIframe, and supportRedirect.
  • Incorporated support for navigator.pdfViewerEnabled, per #290. As of Spring 2023, navigator.pdfViewerEnabled is supported in all major browsers. This naturally led to redefining PDFObject's PDF support detection logic.
    • If the browser is on a mobile device, PDFObject will automatically assume PDFs are not supported (as of February 2024, no mobile browsers properly support inline PDFs).
    • If not a mobile device, PDFObject will check navigator.pdfViewerEnabled.
    • If the feature is found, but disabled (e.g. the user has intentionally disabled PDF support in the browser), PDFObject will respect this and behave as if inline PDFs are not supported.
    • If navigator.pdfViewerEnabled is found and set to true, PDFObject will embed the PDF.
    • If navigator.pdfViewerEnabled is not found, fallback logic will kick in and check what kind of browser is being used.
    • If the browser is known to support inline PDFs natively (Chrome/Edge/Opera/etc, macOS Safari, Firefox), PDFObject will assume inline PDFs are supported and embed the file.
    • If Internet Explorer, PDFObject will query against ActiveX for known PDF plugins (Acrobat, FoxIt) and act accordingly.
  • Added support for converting base64 PDFs (string) to a downloadable file, per #243 and #270. This only impacts fallback content on browsers that don't support inline PDFs.
  • Improved handling of PDF Open Parameters. Ensures proper sequencing of parameters in URL string, per Adobe spec. Ensures page is always set if comment, viewrect or highlight are specified.

2.2.12, June 2023

Refactored one line of code to restore IE11 compatibility, per #287.

2.2.11, May 2023

Typo in version number within PDFObject code. Yup, I'm a bit rusty.

2.2.10, May 2023

Version bump for cleaning up docs and aligning on NPM. I'm a bit rusty.

2.2.9, May 2023

  • Fixed regression for pdfOpenParams handling, resolves issue #272. Hat tip to Theo Beers.
  • Added ability to specify custom attribute on embed and iframe elements, per #274

2.2.8, April 2022

  • Refactored to reduce redundant code. Simplified iframe and PDFJS handling. Subsequently resolves #263 (double scroll bars) and PR #267 (PDFJS_URL param fix). Hat tip to Theo Beers, Sascha Greuel, meier-andersen, and everyone who helped identify and confirm the underlying issues.
  • Fixed fallbackLink handling to ensure false is respected. Hat tip to Theo Beers.

2.2.7, September 2021

  • Add title attribute to PDFJS iframe elements per #258

2.2.6, July 2021

  • Add title attribute to embed and iframe elements per #248
  • Force Safari desktop to embed via iframe due to freezing bug in macOS 11 (Big Sur) per #243
  • Fixed version number per #247
  • Added note about documentation to readme file per #251

2.2.5, March 2021

  • Expanded assumptions to counteract Chrome's deprecation of MIME type checks. Any 'modern' browser will be given a green light regardless of whether assumptionMode is enabled. However assumptionMode will still be available for browsers that are not declared modern.
  • Added allow="fullscreen" attribute to iframe embeds, in case anyone needs their PDFs to be rendered fullscreen.
  • Fixed Firefox user agent sniffing for edge case (thanks to David Novodchuck for the PR)

2.2.4, October 2020

Reinstated typeof check for window to play nice with React and NextJS.

2.2.3, September 2020

Version bump for NPM. Sigh.

2.2.2, September 2020

Fixed typo affecting suppressConsole functionality. Hat tip to John Hunter for the discovery and fix.

2.2.1, September 2020

Fixed typo affecting styling of iframe when forcing PDFJS.

2.2.0, September 2020

  • New behavior: Dropping support for IE9 and IE10, which have practically 0 marketshare now.
  • New behavior: Now explicitly displaying fallback content for all mobile devices, even "Request Desktop" version of pages in iOS. The reasoning is simple: As of the time of this update, no mobile device (Android, iOS) natively supports embedded PDFs. This change will lead to a consistent experience across all mobile devices. PDFs can be rendered via PDF.js on mobile if embedding on mobile is a critical need. PDF.js is not included with PDFObject.
  • New option: Omit inline styles by setting option omitInlineStyles to true. This helps developers who use strict environments where inline styles are not allowed. Note you will be responsible for applying proper styling via your own CSS.
  • New option: Suppress console logging by setting option suppressConsole to true. PDFObject currently places error messages in the console if the PDF can't be embedded for some reason. This option allows you to mute those alerts.
  • New option: Force PDFObject to embed the PDF in an iframe (instead of an <embed>) by setting forceIframe to true.
  • Refactored to use more modern code conventions, such as let in lieu of var, el.classList.add() in place of el.className = 'foo', and myvar === undefined in place of typeof myvar === "undefined". Implemented a let declaration before each variable instead of the Crockford practice of one var per function.
  • New option: On macOS systems, Safari does not properly embed PDFs that have been requested via 302 URL redirection when embedding using the <embed> element. Setting supportRedirect to true forces PDFObject to use an <iframe> instead of an <embed> for desktop Safari. Hat tip to John Hunter for the discovery and fix.
  • Refactored to make code safer for server-side node.js-based environments.
  • Refactored to eliminate string-based element creation via innerHTML. Replaced with standard DOM methods. This helps alleviate unforeseen issues with file names. Only exception is insertion of fallback content, which is passed as a string via innerHTML.
  • Removed iframe scrollfix for iOS, as it is no longer needed as of iOS13. iOS 12 and lower have ~5-7% marketshare and shrinking fast.
  • Refactored codebase to make it more concise and legible.

2.1.1, October 2018

Improved handling of iOS to properly indicate iOS does not support embedded PDFs.

2.1, October 2018

Changed assumptionMode default from false to true. This will ensure PDFObject 2.x will work for Firefox users without requiring them to change their codebase to enable assumptionMode. All they need to do is load the latest version of PDFObject, the PDFObject utility will take care of the rest.

2.1 (dev branch)

January 2017: Modified to support Mozilla's removal of navigator.mimeTypes inspection. Added assumptionMode for manual override of PDFObject's default navigator.mimeTypes sniffing.

2.0, April 2016

Initial release of PDFObject 2.0. Contains breaking changes, and is not compatible with PDFObject 1.x.

NPM DownloadsLast 30 Days