pdfjs-viewer-element
Probably the simplest integration of PDF.js viewer.
The package provide a custom element, based on PDF.js default viewer, supported in all major browsers, and works with most JS frameworks.
⚠️ 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.379
✅ v4.0.269
✅ v4.0.189
To use the package you should download and place the prebuilt files to some directory of your project.
Then specify the path to the directory with viewer-path
property (/pdfjs
by default).
See examples of usage in Vue, React, Svelte or simple HTML page.
Status
Docs
Getting started
API
Live examples
Install
Using module bundlers:
npm install pdfjs-viewer-element
yarn add pdfjs-viewer-element
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="/pdf-file.pdf" viewer-path="/pdfjs-4.0.379-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
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
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="/path-to-viewer"
viewer-css-theme="DARK">
</pdfjs-viewer-element>
You can add your own CSS rules to the viewer application using viewer-extra-styles
attribute:
<pdfjs-viewer-element
src="/file.pdf"
viewer-path="/path-to-viewer"
viewer-extra-styles="#download { 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')
const viewerApp = await viewer.initialize()
viewerApp.open({ data: pdfData })
viewerApp.eventBus.on('pagesloaded', () => {
console.log('Viewer pages loaded')
})
License
MIT