pdfjs-viewer-element

Custom element that embeds PDF.js default viewer using the iframe.

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.

Features

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

Docs

Getting started

API playground

Usage with frameworks

Various usecases

Support via Ko-fi

If you find pdfjs-viewer-element useful and want to support its development, consider making a donation via Ko-fi:

❤️ Your support helps with maintenance, bug fixes, and long-term improvements.

How it works

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

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. PDF.JS releases

✅ All v4 and v3 releases are fully supported.

🚧 For v5 releases - there are some breaking changes that affects styles injecting, and theme changing not work anymore.

After placing the prebuild 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).

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 and CDN:

<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 })

Known issues

The .mjs files support

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;
            }
        }
    }
}

Problem with range requests / streaming

Sometimes a PDF file fails to load when working with range requests / streaming. If you encounter this issue, you can try disabling the broken functionality of PDF.js:

disable-range="true"

License

MIT