pdfjs-viewer-element

pdfjs-viewer-element

A custom element, based on PDF.js default viewer and . Supported in all major browsers and works with most JS frameworks. See examples of usage in Vue, React and Svelte or pure HTML.

⚠️ pdfjs-viewer-element requires PDF.js prebuilt, that includes the generic build of PDF.js and the viewer. 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).

You have full access to PDF.js viewer application using initialize method.

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

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

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

For more clarity, see the Api docs page.

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(pdfData)
// Use event bus to handle viewer application events
viewerApp.eventBus.on('pagesloaded', () => {
  console.log('Viewer pages loaded')
})

License

MIT