pdfjs-viewer

The PDF.js default viewer as one self-hosted HTML element, <pdfjs-viewer-element>. It runs in an isolated iframe and has no runtime dependencies.

Documentation and live playground

Why use it

• Instead of the browser's built-in viewer: you get the same viewer in every browser, and your code controls it. Set the page, zoom, search, theme and language with attributes, or use PDF.js's own API.
• Instead of wiring up pdfjs-dist yourself: PDF.js, its viewer interface, its worker and the data some PDFs need (CMaps, fonts, image decoders, the scripting sandbox) ship in the package, and nothing loads from a CDN by default. Vite and webpack 5 bundle the viewer with no configuration, but they don't copy the data folders: if your documents need them, serve the package's dist folder and point assets-base at it.
• What it costs: the element is 4 KB gzipped. The viewer files, about 720 KB gzipped, load only when a viewer is on the page, and the extra PDF.js data only for documents that need it.
• When to use something else: if you want your own page-rendering interface rather than the PDF.js viewer, use pdfjs-dist directly.

Install

npm install @missing-elements/pdfjs-viewer

import '@missing-elements/pdfjs-viewer'

Or load it from a CDN without a build step:

<script type="module" src="https://cdn.jsdelivr.net/npm/@missing-elements/pdfjs-viewer@4/dist/pdfjs-viewer-element.js"></script>

Usage

<pdfjs-viewer-element
  src="/file.pdf"
  page="2"
  zoom="page-width"
  style="height: 100dvh">
</pdfjs-viewer-element>

The element needs an explicit height. Most attributes apply as soon as they change.

Documentation

• Quick start
• Attributes and playground
• Methods and properties: initPromise, setViewerOptions, injectViewerStyles, iframe
• Theming and localization
• Hosting: bundlers, assets-base, CDN, worker, CSP
• React, Vue and Svelte
• Migrating from pdfjs-viewer-element, the deprecated former package name
• Demo pages and the accessibility guide

Status

Actively maintained. The package bundles PDF.js 6.4.299 and follows PDF.js releases.

Contributing

See CONTRIBUTING.md. Report security issues as described in SECURITY.md.

License

MIT