Fix default theme, add setViewerOptions method

alekswebnet · alekswebnet · commit 68b6112b9e5a · 2026-03-19T03:59:48.000+02:00
diff --git a/README.md b/README.md
@@ -14,9 +14,10 @@ Standalone, isolated, drop-in [PDF.js default viewer](https://mozilla.github.io/
 - Drop-in, iframe-based PDF.js default viewer for any web app
 - Works with same-origin and cross-origin PDF documents
 - Configure via attributes (page, zoom, search, pagemode, locale)
-- Programmatic access to `PDFViewerApplication` via the `initPromise` public property
-- Built-in Paper & Ink default theme, with theme control (automatic/light/dark) and custom CSS injection
 - Resource path attributes for PDF.js internals (`worker-src`, `c-map-url`, `icc-url`, `standard-font-data-url`, `wasm-url`, and more)
+- Configure `PDFViewerApplicationOptions` via the `setViewerOptions` method
+- Access to `PDFViewerApplication` via the `initPromise` property
+- Built-in Paper & Ink default theme, with theme control (automatic/light/dark) and custom CSS injection
 - Locale override support using PDF.js viewer locales
 - Supports all [major browsers](https://caniuse.com/custom-elementsv1) and most [JS frameworks](https://custom-elements-everywhere.com/).
 
@@ -199,37 +200,10 @@ viewerElement.injectViewerStyles(`
 
 `injectViewerStyles(...)` applies styles immediately when the viewer document is ready, and keeps them for future rebuilds.
 
-Build your own theme with viewer custom variables and inject it via `injectViewerStyles(...)`:
-
-```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);
-}
-```
-
-## Methods and Public properties
-
-Methods:
+## Methods and properties
 
 `injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.
 
-Example (`injectViewerStyles`):
-
 ```javascript
 const viewerElement = document.querySelector('pdfjs-viewer-element')
 
@@ -239,22 +213,28 @@ await viewerElement.injectViewerStyles(`
 `)
 ```
 
-Public properties:
-
 `initPromise: Promise<InitializationData>` - Resolves after internal viewer is completely loaded and initialized, returning `{ viewerApp }`, that gives a programmatic access to PDF.js viewer app (PDFViewerApplication).
 
-Example (`initPromise`):
-
 ```javascript
 const viewerElement = document.querySelector('pdfjs-viewer-element')
 const { viewerApp } = await viewerElement.initPromise
 
 viewerApp.open({ url: '/sample.pdf' })
 ```
 
-`iframe: PdfjsViewerElementIframe` - Public reference to the internal `iframe` element. Useful when you need direct access to `contentWindow`/`contentDocument`.
+`setViewerOptions(options: Record<string, string | number>): Promise<{ viewerOptions: IframeWindow['PDFViewerApplicationOptions'] }>`
+
+Updates PDF.js viewer options at runtime. Call this method with an object of key-value pairs to set options such as resource paths, rendering settings, or other PDFViewerApplicationOptions. Resolves after the viewer is initialized and returns the `viewerOptions` for testing purpose.
 
-Example (`iframe`):
+```javascript
+const viewerElement = document.querySelector('pdfjs-viewer-element')
+await viewerElement.setViewerOptions({
+  enableComment: true,
+  enableSignatureEditor: true
+})
+```
+
+`iframe: PdfjsViewerElementIframe` - Public reference to the internal `iframe` element. Useful when you need direct access to `contentWindow`/`contentDocument`.
 
 ```javascript
 const viewerElement = document.querySelector('pdfjs-viewer-element')
diff --git a/demo/comments-enabled.html b/demo/comments-enabled.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pdfjs-viewer-element | Iframe access demo</title>
+    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <pdfjs-viewer-element
+      src="/public/sample-pdf-with-images.pdf" 
+      style="height: 100dvh">
+    </pdfjs-viewer-element>
+  </body>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      const viewerElement = document.querySelector('pdfjs-viewer-element')
+      const { viewerOptions } = await viewerElement.setViewerOptions({ 
+        enableComment: true
+      })
+      console.log('Viewer options after setting:', viewerOptions.getAll())
+    })
+  </script>
+</html>
diff --git a/demo/signatures-editor.html b/demo/signatures-editor.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pdfjs-viewer-element | Iframe access demo</title>
+    <script type="module" src="../dist/pdfjs-viewer-element.js"></script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <pdfjs-viewer-element
+      src="/public/sample-pdf-with-images.pdf" 
+      style="height: 100dvh">
+    </pdfjs-viewer-element>
+  </body>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      const viewerElement = document.querySelector('pdfjs-viewer-element')
+      const { viewerOptions } = await viewerElement.setViewerOptions({ 
+        enableSignatureEditor: true
+      })
+      console.log('Viewer options after setting:', viewerOptions.getAll())
+    })
+  </script>
+</html>
diff --git a/demo/viewer-prebuilt-from-npm-package.html b/demo/viewer-prebuilt-from-npm-package.html
@@ -14,7 +14,7 @@
   </head>
 
   <body>
-    <h1>Deprecated, the latest version does not need the prebuilt!</h1>
+    <h1>Deprecated, the latest version does not require the prebuilt!</h1>
     <pdfjs-viewer-element
       src="/public/sample-pdf-with-images.pdf" 
       style="height: 50dvh">
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body style="margin: 0">
-    <pdfjs-viewer-element 
+    <!-- <pdfjs-viewer-element 
       src="/fake-file.pdf" 
       style="height: 600px">
     </pdfjs-viewer-element>
@@ -21,7 +21,7 @@
       page="2"
       style="height: 600px">
     </pdfjs-viewer-element>
-    <button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button>
+    <button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button> -->
 
     <pdfjs-viewer-element
       id="themedViewer"
@@ -50,10 +50,10 @@
     <button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-10MB.pdf')">Load 10MB PDF</button>
     <hr>
 
-    <pdfjs-viewer-element
+    <!-- <pdfjs-viewer-element
       id="base-viewer"
       locale="uk"
       style="height: clamp(400px, 80dvh, 600px)">
-    </pdfjs-viewer-element>
+    </pdfjs-viewer-element> -->
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -15,6 +15,7 @@ const pdfData = Uint8Array.from(atob(
 
 document.addEventListener('DOMContentLoaded', async () => {
   const viewerElement = document.querySelector('#base-viewer')
+  if (!viewerElement) return
   const { viewerApp } = await viewerElement.initPromise
   viewerApp.open({ data: pdfData })
 })
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",
@@ -15,7 +15,7 @@
     "pdfjs",
     "react-pdf",
     "vue-pdf",
-    "pdfium",
+    "pdfjs-dist",
     "pdf-lib",
     "adobe-acrobat",
     "pdf-sdk",
diff --git a/src/pdfjs-viewer-element.ts b/src/pdfjs-viewer-element.ts
@@ -40,6 +40,7 @@ export class PdfjsViewerElement extends HTMLElement {
   private localeResourceUrl?: string
   private localeResourceLink?: HTMLLinkElement
   private viewerStyles = new Set<string>()
+  private optionsToSet: Record<string, string | number> = {}
 
   static get observedAttributes() {
     return[
@@ -203,6 +204,10 @@ export class PdfjsViewerElement extends HTMLElement {
     viewerOptions?.set('eventBusDispatchToDOM', true)
     viewerOptions?.set('localeProperties', { lang: this.getAttribute('locale') || DEFAULTS.locale })
     viewerOptions?.set('viewerCssTheme', this.getCssThemeOption())
+    for (const [key, value] of Object.entries(this.optionsToSet)) {
+      viewerOptions?.set(key, value)
+    }
+    this.optionsToSet = {}
   }
 
   private getIframeLocationHash = () => {
@@ -333,6 +338,14 @@ export class PdfjsViewerElement extends HTMLElement {
     this.viewerStyles.add(styles)
     this.appendRuntimeStyle(styles)
   }
+
+  public async setViewerOptions(options: Record<string, string | number> = {}) {
+    this.optionsToSet = options
+    await this.initPromise
+    return {
+      viewerOptions: this.iframe.contentWindow?.PDFViewerApplicationOptions
+    }
+  }
 }
 
 export interface IframeWindow extends Window {
diff --git a/src/themes/paper-and-ink.css b/src/themes/paper-and-ink.css
diff --git a/types/pdfjs-viewer-element.d.ts b/types/pdfjs-viewer-element.d.ts
