pdfjs-viewer-element

A custom element, based on PDF.js default viewer and supported in all major browsers, works with most used JS frameworks.

See examples of usage in Vue, React and Svelte or static HTML page.

⚠️ pdfjs-viewer-element requires PDF.js prebuilt, that includes the generic build of PDF.js and the viewer.

The prebuilt comes with each PDF.js release. Supported releases:

✅ v4.0.189

✅ v3.11.174

✅ v3.10.111

To use the package you should download and place the prebuilt files to some directory of your project.

Then specify the path to this directory with viewer-path property (/pdfjs by default).

Status

Docs

Getting started

API

Live examples

Install

Using module bundlers:

# With npm
npm install pdfjs-viewer-element
# With yarn
yarn add pdfjs-viewer-element

import 'pdfjs-viewer-element'

Using browser:

<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>

Usage

<pdfjs-viewer-element src="/file.pdf" viewer-path="/path-to-viewer"></pdfjs-viewer-element>

Attributes

src - PDF file URL, should refer to the same origin

viewer-path - Path to PDF.js prebuilt

locale - Specifies which language to use in the viewer UI en-US | .... Available locales

text-layer - Text layer, that is used for text selection off | visible | shadow | hover

page - Page number

search - Search text

phrase - Search by phrase

zoom - Zoom level

pagemode - Page mode thumbs | bookmarks | attachments | layers | none

viewer-css-theme - Apply automatic, light or dark theme AUTOMATIC | LIGHT | DARK

viewer-extra-styles - Add your CSS rules to viewer application

For more clarity, see the Api docs page.

Viewer CSS theme

Use viewer-css-theme attribute to set light or dark theme manually:

<pdfjs-viewer-element 
  src="/file.pdf" 
  viewer-path="/path-to-viewer"
  viewer-css-theme="DARK">
</pdfjs-viewer-element>

Viewer extra styles

You can add your own CSS rules to the viewer application using viewer-extra-styles attribute:

<!-- Hide open file button -->
<pdfjs-viewer-element 
  src="/file.pdf" 
  viewer-path="/path-to-viewer"
  viewer-extra-styles="#openFile { display: none }">
</pdfjs-viewer-element>

PDF.js Viewer Application

initialize - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer

<pdfjs-viewer-element viewer-path="/path-to-viewer"></pdfjs-viewer-element>

const viewer = document.querySelector('pdfjs-viewer-element')
// Wait for the viewer initialization, receive PDFViewerApplication
const viewerApp = await viewer.initialize()
// Open PDF file data using Uint8Array instead of URL
viewerApp.open({ data: pdfData })
// Use event bus to handle viewer application events
viewerApp.eventBus.on('pagesloaded', () => {
  console.log('Viewer pages loaded')
})

License

MIT