Update demo & readme

alekswebnet · alekswebnet · commit f412b7ec116f · 2026-03-01T21:57:50.000+02:00
diff --git a/README.md b/README.md
@@ -14,21 +14,14 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 
 ## Features
 
-✅ Standalone web component with no runtime dependencies
-
-✅ Drop-in, iframe-based PDF.js default viewer for any web app
-
-✅ Works with same-origin and cross-origin PDF documents
-
-✅ Configure via attributes and URL parameters (page, zoom, search, pagemode, locale)
-
-✅ Programmatic access to `PDFViewerApplication` and `PDFViewerApplicationOptions` via the `initialized` event
-
-✅ Theme control (automatic/light/dark) plus custom CSS injection or external stylesheets
-
-✅ Locale override support using PDF.js viewer locales
-
-✅ Supports all modern browsers and most JS frameworks
+- Standalone web component with no runtime dependencies
+- Drop-in, iframe-based PDF.js default viewer for any web app
+- Works with same-origin and cross-origin PDF documents
+- Configure via attributes and URL parameters (page, zoom, search, pagemode, locale)
+- Programmatic access to `PDFViewerApplication` and `PDFViewerApplicationOptions` via the `initialized` event
+- Theme control (automatic/light/dark) plus custom CSS injection or external stylesheets
+- Locale override support using PDF.js viewer locales
+- Supports all modern browsers and most JS frameworks
 
 ## Docs
 
diff --git a/demo/extra-styles-urls.html b/demo/extra-styles-urls.html
@@ -19,5 +19,14 @@
       style="height: 100dvh"
     >
     </pdfjs-viewer-element>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', async () => {
+      // Create a very simple toolbar by hiding the middle and right toolbar parts.
+      document.querySelector('pdfjs-viewer-element').injectViewerStyles(`
+        #toolbarViewerMiddle, #toolbarViewerRight { display: none; }
+      `)
+    })
+  </script>
   </body>
 </html>
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
@@ -13,14 +13,18 @@ const pdfData = Uint8Array.from(atob(
  'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'), (m) => m.codePointAt(0));
 
-// document.addEventListener('DOMContentLoaded', async () => {
-//   const { viewerApp } = await document.querySelector('#base-viewer').initialize()
-//   viewerApp.open({ data: pdfData })
-// })
+document.addEventListener('DOMContentLoaded', async () => {
+  document.querySelector('#base-viewer').addEventListener('initialized', (event) => {
+    const { viewerApp } = event.detail
+    viewerApp.open({ data: pdfData })
+  })
+})
 
 const toggleDownloadButton = async (viewerElement) => {
-  const { viewerApp } = await viewerElement.initialize()
-  viewerApp.appConfig.toolbar.download.classList.toggle('hidden')
+  viewerElement.addEventListener('initialized', (event) => {
+    const { viewerApp } = event.detail
+    viewerApp.appConfig.toolbar.download.classList.toggle('hidden')
+  })
 }
 
 window.toggleDownloadButton = toggleDownloadButton
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",
diff --git a/src/pdfjs-viewer-element.ts b/src/pdfjs-viewer-element.ts
@@ -68,6 +68,26 @@ export class PdfjsViewerElement extends HTMLElement {
     }
   }
 
+  private appendRuntimeStyle(styles: string) {
+    const doc = this.iframe?.contentDocument
+    if (!doc?.head || !styles) return
+
+    const exists = Array.from(doc.querySelectorAll('style'))
+      .some((styleNode) => styleNode.textContent === styles)
+    if (exists) return
+
+    const styleElement = doc.createElement('style')
+    styleElement.setAttribute('data-pdfjs-viewer-runtime-style', 'true')
+    styleElement.textContent = styles
+    doc.head.appendChild(styleElement)
+  }
+
+  private applyQueuedRuntimeStyles() {
+    this.viewerStyles.forEach((styles) => {
+      this.appendRuntimeStyle(styles)
+    })
+  }
+
   private injectScript(value: string, type = 'module') {
     const doc = this.iframe.contentDocument
     if (!doc) return
@@ -181,6 +201,7 @@ export class PdfjsViewerElement extends HTMLElement {
     const viewerOptions = this.applyViewerOptions()
     await viewerApp?.initializedPromise
 
+    this.applyQueuedRuntimeStyles()
     this.applyIframeHash()
 
     this.dispatchEvent(new CustomEvent('initialized', { 
@@ -253,7 +274,9 @@ export class PdfjsViewerElement extends HTMLElement {
   }
 
   public async injectViewerStyles(styles: string) {
-    if (styles) this.viewerStyles.add(styles)
+    if (!styles) return
+    this.viewerStyles.add(styles)
+    this.appendRuntimeStyle(styles)
   }
 }
 
diff --git a/types/pdfjs-viewer-element.d.ts b/types/pdfjs-viewer-element.d.ts
@@ -14,6 +14,7 @@ export declare class PdfjsViewerElement extends HTMLElement {
     private getCssThemeOption;
     private applyIframeHash;
     private applyViewerTheme;
+    private appendRuntimeStyle;
     private injectScript;
     private injectLocaleData;
     private cleanupLocaleResource;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "pdfjs-viewer-element",`
`3`		`- "version": "3.0.2",`
	`3`	`+ "version": "3.1.0",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"author": {`
`6`	`6`	`"name": "Oleksandr Shevchuk",`