pdfjs-viewer-element 3.0.2 → 3.1.0

package/README.md

@@ -16,11 +16,12 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 
 - Standalone web component with no runtime dependencies
 - Drop-in, iframe-based PDF.js default viewer for any web app
-- Configure via attributes and URL parameters (page, zoom, search, pagemode, locale, named destination)
+- 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
+- Theme control (automatic/light/dark) plus custom CSS injection
 - Locale override support using PDF.js viewer locales
-- Works in modern browsers and most JS frameworks
+- Supports all modern browsers and most JS frameworks
 
 ## Docs
 
@@ -28,6 +29,8 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 
 [API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
 
+[CodePen demo](https://codepen.io/redrobot753/pen/bNwVVvp)
+
 [Various use cases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
 
 ## Install
@@ -54,34 +57,40 @@ import 'pdfjs-viewer-element'
 ## Usage
 
 ```html
-<pdfjs-viewer-element src="path-to/file.pdf"></pdfjs-viewer-element>
+<pdfjs-viewer-element
+  src="/sample.pdf"
+  style="height: 100dvh">
+</pdfjs-viewer-element>
 ```
 
-## Attributes
-
-`src` - PDF file URL, should refer to the [same origin](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request) 
-
-`iframe-title` - The title of the `iframe` element, required for better accessibility
-
-`page` - Page number.
-
-`search` - Search text.
-
-`phrase` - Search by phrase, `true` to enable.
-
-`zoom` - Zoom level.
+The element is block-level and needs an explicit height.
 
-`pagemode` - Page mode, `thumbs | bookmarks | attachments | layers | none`.
+## Attributes
 
-`locale` -  Specifies which language to use in the viewer UI, `en-US | ...`. [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n)
+| Attribute | Description | Default |
+| --- | --- | --- |
+| `src` | PDF file URL. | `''` |
+| `iframe-title` | Title for the internal `iframe` (recommended for accessibility). | `PDF viewer window` |
+| `page` | Page number. | `''` |
+| `search` | Search query text. | `''` |
+| `phrase` | Phrase search mode, set to `true` to enable phrase matching. | `''` |
+| `zoom` | Zoom level (for example `auto`, `page-width`, `200%`). | `''` |
+| `pagemode` | Sidebar mode: `thumbs`, `bookmarks`, `attachments`, `layers`, `none`. | `none` |
+| `locale` | Viewer UI locale (for example `en-US`, `de`, `uk`). [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n) | `''` |
+| `viewer-css-theme` | Viewer theme: `AUTOMATIC`, `LIGHT`, `DARK`. | `AUTOMATIC` |
+| `worker-src` | PDF.js worker URL override. | `https://cdn.jsdelivr.net/npm/pdfjs-dist@5.4.624/build/pdf.worker.min.mjs` |
 
-`viewer-css-theme` - Apply automatic, light, or dark theme, `AUTOMATIC | LIGHT | DARK`
+Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
-`viewer-extra-styles` - Add your CSS rules to the viewer application, pass a string with styles.
+## Runtime updates
 
-`viewer-extra-styles-urls` - Add external CSS files to the viewer application, pass an array with URLs.
+Most attributes can be updated dynamically:
 
-Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
+- `src` updates by calling PDF.js `open({ url })` without rebuilding the viewer.
+- `page`, `search`, `phrase`, `zoom`, `pagemode` update via hash parameters.
+- `viewer-css-theme` updates the viewer theme at runtime.
+- `worker-src` updates viewer options for subsequent document loads.
+- `locale` rebuilds the viewer so localization resources can be applied.
 
 ## Viewer CSS theme
 
@@ -94,18 +103,33 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
 </pdfjs-viewer-element>
 ```
 
-## Viewer custom styles 
+Runtime example:
+
+```javascript
+const viewer = document.querySelector('pdfjs-viewer-element')
+viewer.setAttribute('viewer-css-theme', 'DARK')
+viewer.setAttribute('viewer-css-theme', 'AUTOMATIC')
+```
+
+## Viewer custom styles
 
-You can add your own CSS rules to the viewer application using `viewer-extra-styles` or `viewer-extra-styles-urls` attribute:
+You can add your own CSS rules to the viewer application using `injectViewerStyles(styles: string)`:
 
 ```html
-<pdfjs-viewer-element 
-  src="/file.pdf" 
-  viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
-  viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
+<pdfjs-viewer-element id="viewer" src="/file.pdf">
 </pdfjs-viewer-element>
 ```
-Build your own theme with viewer's custom variables and `viewer-extra-styles-urls` attribute: 
+
+```javascript
+const viewer = document.querySelector('#viewer')
+viewer.injectViewerStyles(`
+  #toolbarViewerMiddle, #toolbarViewerRight { display: none; }
+`)
+```
+
+`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 {
@@ -128,7 +152,11 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
 }
 ```
 
-## PDF.js Viewer Application and Options
+## Methods
+
+`injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.
+
+## Programmatic access to PDF.js
 
 ```html
 <pdfjs-viewer-element></pdfjs-viewer-element>
@@ -144,6 +172,13 @@ document.addEventListener('DOMContentLoaded', async () => {
 })
 ```
 
+You can also react to source changes dynamically:
+
+```javascript
+const viewer = document.querySelector('pdfjs-viewer-element')
+viewer.setAttribute('src', '/another-file.pdf')
+```
+
 ## Events
 
 `initialized` - Fired after the PDF.js viewer is ready (after `PDFViewerApplication.initializedPromise` resolves). The event `detail` contains:
@@ -151,6 +186,17 @@ document.addEventListener('DOMContentLoaded', async () => {
 - `viewerApp` (`PDFViewerApplication`)
 - `viewerOptions` (`PDFViewerApplicationOptions`)
 
+The event is emitted each time the internal viewer is rebuilt (for example after changing `locale`).
+
+## Migration notes
+
+If you are upgrading from an older version:
+
+- `viewer-extra-styles` and `viewer-extra-styles-urls` attributes are removed.
+- Use `injectViewerStyles(styles)` instead of style attributes.
+- Use the `initialized` event for `viewerApp` / `viewerOptions` access.
+- Runtime `src` updates are supported with `setAttribute('src', ...)`.
+
 ## Accessibility
 
 Use `iframe-title` to add a title to the `iframe` element and improve accessibility.

package/dist/locale-DENudnjU.js

@@ -0,0 +1 @@
+const e='{"ach":"ach/viewer.ftl","af":"af/viewer.ftl","an":"an/viewer.ftl","ar":"ar/viewer.ftl","ast":"ast/viewer.ftl","az":"az/viewer.ftl","be":"be/viewer.ftl","bg":"bg/viewer.ftl","bn":"bn/viewer.ftl","bo":"bo/viewer.ftl","br":"br/viewer.ftl","brx":"brx/viewer.ftl","bs":"bs/viewer.ftl","ca":"ca/viewer.ftl","cak":"cak/viewer.ftl","ckb":"ckb/viewer.ftl","cs":"cs/viewer.ftl","cy":"cy/viewer.ftl","da":"da/viewer.ftl","de":"de/viewer.ftl","dsb":"dsb/viewer.ftl","el":"el/viewer.ftl","en-ca":"en-CA/viewer.ftl","en-gb":"en-GB/viewer.ftl","en-us":"en-US/viewer.ftl","eo":"eo/viewer.ftl","es-ar":"es-AR/viewer.ftl","es-cl":"es-CL/viewer.ftl","es-es":"es-ES/viewer.ftl","es-mx":"es-MX/viewer.ftl","et":"et/viewer.ftl","eu":"eu/viewer.ftl","fa":"fa/viewer.ftl","ff":"ff/viewer.ftl","fi":"fi/viewer.ftl","fr":"fr/viewer.ftl","fur":"fur/viewer.ftl","fy-nl":"fy-NL/viewer.ftl","ga-ie":"ga-IE/viewer.ftl","gd":"gd/viewer.ftl","gl":"gl/viewer.ftl","gn":"gn/viewer.ftl","gu-in":"gu-IN/viewer.ftl","he":"he/viewer.ftl","hi-in":"hi-IN/viewer.ftl","hr":"hr/viewer.ftl","hsb":"hsb/viewer.ftl","hu":"hu/viewer.ftl","hy-am":"hy-AM/viewer.ftl","hye":"hye/viewer.ftl","ia":"ia/viewer.ftl","id":"id/viewer.ftl","is":"is/viewer.ftl","it":"it/viewer.ftl","ja":"ja/viewer.ftl","ka":"ka/viewer.ftl","kab":"kab/viewer.ftl","kk":"kk/viewer.ftl","km":"km/viewer.ftl","kn":"kn/viewer.ftl","ko":"ko/viewer.ftl","lij":"lij/viewer.ftl","lo":"lo/viewer.ftl","lt":"lt/viewer.ftl","ltg":"ltg/viewer.ftl","lv":"lv/viewer.ftl","meh":"meh/viewer.ftl","mk":"mk/viewer.ftl","ml":"ml/viewer.ftl","mr":"mr/viewer.ftl","ms":"ms/viewer.ftl","my":"my/viewer.ftl","nb-no":"nb-NO/viewer.ftl","ne-np":"ne-NP/viewer.ftl","nl":"nl/viewer.ftl","nn-no":"nn-NO/viewer.ftl","oc":"oc/viewer.ftl","pa-in":"pa-IN/viewer.ftl","pl":"pl/viewer.ftl","pt-br":"pt-BR/viewer.ftl","pt-pt":"pt-PT/viewer.ftl","rm":"rm/viewer.ftl","ro":"ro/viewer.ftl","ru":"ru/viewer.ftl","sat":"sat/viewer.ftl","sc":"sc/viewer.ftl","scn":"scn/viewer.ftl","sco":"sco/viewer.ftl","si":"si/viewer.ftl","sk":"sk/viewer.ftl","skr":"skr/viewer.ftl","sl":"sl/viewer.ftl","son":"son/viewer.ftl","sq":"sq/viewer.ftl","sr":"sr/viewer.ftl","sv-se":"sv-SE/viewer.ftl","szl":"szl/viewer.ftl","ta":"ta/viewer.ftl","te":"te/viewer.ftl","tg":"tg/viewer.ftl","th":"th/viewer.ftl","tl":"tl/viewer.ftl","tr":"tr/viewer.ftl","trs":"trs/viewer.ftl","uk":"uk/viewer.ftl","ur":"ur/viewer.ftl","uz":"uz/viewer.ftl","vi":"vi/viewer.ftl","wo":"wo/viewer.ftl","xh":"xh/viewer.ftl","zh-cn":"zh-CN/viewer.ftl","zh-tw":"zh-TW/viewer.ftl"}';export{e as default};