pdfjs-viewer-element

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.

How it works

⚠️ This is an important part !!!

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. Supported all v4 and v3 releases.

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.5.136-dist"></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

nameddest - Go to a named destination

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 the viewer application

viewer-extra-styles-urls - Add external CSS files to the viewer application

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.5.136-dist"
  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 or viewer-extra-styles-urls attribute:

<pdfjs-viewer-element 
  src="/file.pdf" 
  viewer-path="/pdfjs-4.5.136-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.5.136-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 https://github.com/mozilla/pdf.js/issues/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