pdfjs-viewer-element

The simplest integration of PDF.js default viewer using the iframe element and web component. The package provides a custom element, based on PDF.js viewer options and URL parameters API. Supported in all major browsers, and works with most JS frameworks.

See demo pages for various usecases. See live examples of usage with frameworks.

Features

• Simple PDF.js viewer integration to any web application
• PDF.js viewer options and parameters support, access to the viewer application instance
• Ability to customize viewer styles and themes

How it works

⚠️ This is an important part, please read this firstly !!!

You should download and place the PDF.js prebuilt files in the project.

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. All v4 and v3 releases are supported.

Then specify the path to the directory with the viewer-path property (/pdfjs by default) and PDF file URL with src property (should refer to the same origin).

Status

Docs

Getting started

API playground

Live examples

Demo pages

Install

Using module bundlers:

# With npm
npm install pdfjs-viewer-element
# With yarn
yarn add pdfjs-viewer-element
# With pnpm
pnpm 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="/pdfjs-4.10.38-dist"></pdfjs-viewer-element>

Attributes

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

viewer-path - Path to PDF.js prebuilt

page - Page number.

nameddest - Go to a named destination.

search - Search text.

phrase - Search by phrase, true to enable.

zoom - Zoom level.

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

disable-worker - Disables the worker, true to enable.

text-layer - Disables or reveals the text layer that is used for text selection, off | visible | shadow | hover.

disable-font-face - Disables standard @font-face font loading and uses the internal font renderer instead, true to enable.

disable-range - Disables HTTP range requests when fetching the document, true to enable.

disable-stream - Disables streaming when fetching the document, true to enable.

disable-auto-fetch- Disables auto fetching of the document; only gets necessary data to display the current view. Note: streaming also needs to be disabled for this to have any effect, true to enable.

verbosity- Specifies the verbosity level of console messages. 0 - only errors, 1 - warnings and errors, 5 - warnings, errors and information messages.

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

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

viewer-extra-styles - Add your CSS rules to the viewer application, pass a string with styles.

viewer-extra-styles-urls - Add external CSS files to the viewer application, pass an array with URLs.

Play with attributes on 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="/pdfjs-4.10.38-dist"
  viewer-css-theme="DARK">
</pdfjs-viewer-element>

Viewer custom styles

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

<pdfjs-viewer-element 
  src="/file.pdf" 
  viewer-path="/pdfjs-4.10.38-dist"
  viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
  viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
</pdfjs-viewer-element>

Build your own theme with viewer's custom variables and viewer-extra-styles-urls attribute:

:root {
  --main-color: #5755FE;
  --toolbar-icon-bg-color: #0200a8;
  --field-color: #5755FE;
  --separator-color: #5755FE;
  --toolbar-border-color: #5755FE;
  --field-border-color: #5755FE;
  --toolbar-bg-color: rgba(139, 147, 255, .1);
  --body-bg-color: rgba(255, 247, 252, .7);
  --button-hover-color: rgba(139, 147, 255, .1);
  --toolbar-icon-hover-bg-color: #0200a8;
  --toggled-btn-color: #0200a8;
  --toggled-btn-bg-color: rgba(139, 147, 255, .1);
  --toggled-hover-active-btn-color: #5755FE;
  --doorhanger-hover-bg-color: rgba(139, 147, 255, .1);
  --doorhanger-hover-color: #0200a8;
  --dropdown-btn-bg-color: rgba(139, 147, 255, .1);
}

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="/pdfjs-4.10.38-dist"></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 })

Server configuration

Since v4 PDF.js requires .mjs files support, make sure your server has it.

In case of nginx this may causes to errors, see mozilla/pdf.js#17296

Add .mjs files support for nginx example:

server {
    # ...

    location / {
        root   /usr/share/nginx/html;
        index  index.html;

        location ~* \.mjs$ {
            types {
                text/javascript mjs;
            }
        }
    }
}

License

MIT