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.
• 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'

Vite, webpack 5 and Next.js bundle the viewer with no configuration. They don't copy the PDF.js data folders, though, because PDF.js loads those files by name. Without them, scanned pages compressed with JBIG2, CCITT or JPEG 2000 render blank or black, CJK text in fonts the PDF doesn't embed goes missing, and JavaScript in PDFs doesn't run. To support every PDF, copy the package's dist folder into your public files, for example in a postinstall script, and point assets-base at it:

<pdfjs-viewer-element src="/file.pdf" assets-base="/pdfjs-viewer/"></pdfjs-viewer-element>

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