Custom element that embeds [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) using the `iframe`.
npm install pdfjs-viewer-elementCustom 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.
- 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
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.
⚠️ 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 v3, v4 and v5 releases are fully supported.
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).
``bash`With npm
npm install pdfjs-viewer-elementWith yarn
yarn add pdfjs-viewer-elementWith pnpm
pnpm add pdfjs-viewer-element
`javascript`
import 'pdfjs-viewer-element'
`html`
`html`
src - PDF file URL, should refer to the same origin
viewer-path - Path to PDF.js prebuilt
iframe-title - The title of the iframe element, required for better accessibility
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.
Use viewer-css-theme attribute to set light or dark theme manually:
`html`
viewer-path="/pdfjs-5.3.93-dist"
viewer-css-theme="DARK">
You can add your own CSS rules to the viewer application using viewer-extra-styles or viewer-extra-styles-urls attribute:
`html`
viewer-path="/pdfjs-5.3.93-dist"
viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
Build your own theme with viewer's custom variables and attribute:
`css`
: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);
}
initialize - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
`html`
`javascript`
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 })
Use iframe-title to add a title to the iframe element and improve accessibility.
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:
`bash
server {
# ...
location / {
root /usr/share/nginx/html;
index index.html;
location ~* \.mjs$ {
types {
text/javascript mjs;
}
}
}
}
`
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"`