pdfjs-viewer-element

Download and place the PDF.js prebuilt files to some directory of your project. Specify the path to this directory with viewer-path property (/pdfjs by default).

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'
              

Install 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.0.379-dist"></pdfjs-viewer-element>
              

---

Change viewer CSS theme:

<pdfjs-viewer-element 
  src="/file.pdf"
  viewer-path="/pdfjs-4.0.379-dist"
  viewer-css-theme="DARK">
</pdfjs-viewer-element>

              

---

Customize viewer styles:

<pdfjs-viewer-element 
  src="/file.pdf"
  viewer-path="/pdfjs-4.0.379-dist"
  viewer-extra-styles="#openFile { display: none }"
  viewer-extra-styles-urls="['/viewer-custom-theme.css']">
</pdfjs-viewer-element>

              

---

You can use viewer-extra-styles-urls attribute and viewer's custom variables to build your own theme:

viewer-custom-theme.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);
}

              

Use initialize method to access PDF.js Viewer Application:

                <pdfjs-viewer-element viewer-path="/pdfjs"></pdfjs-viewer-element>
              

document.addEventListener('DOMContentLoaded', async () => {
  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)
})
              

If you looking for the frameworks integrations, check the live examples.

Also you can play with the viewer configuration.

{{ viewerExtraStyles }}

You can use pdfjs-viewer-element with different frameworks or without them. There are a few examples:

---

HTML

---

---

Vue

---

---

React

---

---

Svelte

---