pdfjs-viewer-element 3.0.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +78 -32
  2. package/dist/locale-DENudnjU.js +1 -0
  3. package/dist/pdf.min-x5NwD-YK.js +1 -0
  4. package/dist/pdfjs-viewer-element.js +1 -160
  5. package/dist/viewer-Cg70hpj3.js +1 -0
  6. package/dist/viewer-min-DkHkP1Ha.js +1 -0
  7. package/dist/viewer.min-Dyq1R7lM.js +1 -0
  8. package/package.json +8 -7
  9. package/types/pdfjs-viewer-element.d.ts +33 -16
  10. package/dist/locale-BcpxbQPE.js +0 -4
  11. package/dist/pdf.min-NUTxlqGN.js +0 -4
  12. package/dist/viewer.min-DFiIXGch.js +0 -4
package/README.md CHANGED
@@ -16,11 +16,12 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
16
16
 
17
17
  - Standalone web component with no runtime dependencies
18
18
  - Drop-in, iframe-based PDF.js default viewer for any web app
19
- - Configure via attributes and URL parameters (page, zoom, search, pagemode, locale, named destination)
19
+ - Works with same-origin and cross-origin PDF documents
20
+ - Configure via attributes and URL parameters (page, zoom, search, pagemode, locale)
20
21
  - Programmatic access to `PDFViewerApplication` and `PDFViewerApplicationOptions` via the `initialized` event
21
- - Theme control (automatic/light/dark) plus custom CSS injection or external stylesheets
22
+ - Theme control (automatic/light/dark) plus custom CSS injection
22
23
  - Locale override support using PDF.js viewer locales
23
- - Works in modern browsers and most JS frameworks
24
+ - Supports all modern browsers and most JS frameworks
24
25
 
25
26
  ## Docs
26
27
 
@@ -28,6 +29,8 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
28
29
 
29
30
  [API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
30
31
 
32
+ [CodePen demo](https://codepen.io/redrobot753/pen/bNwVVvp)
33
+
31
34
  [Various use cases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
32
35
 
33
36
  ## Install
@@ -48,40 +51,46 @@ import 'pdfjs-viewer-element'
48
51
  ### Using browser and CDN:
49
52
 
50
53
  ```html
51
- <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element"></script>
54
+ <script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
52
55
  ```
53
56
 
54
57
  ## Usage
55
58
 
56
59
  ```html
57
- <pdfjs-viewer-element src="path-to/file.pdf"></pdfjs-viewer-element>
60
+ <pdfjs-viewer-element
61
+ src="/sample.pdf"
62
+ style="height: 100dvh">
63
+ </pdfjs-viewer-element>
58
64
  ```
59
65
 
60
- ## Attributes
61
-
62
- `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)
63
-
64
- `iframe-title` - The title of the `iframe` element, required for better accessibility
65
-
66
- `page` - Page number.
67
-
68
- `search` - Search text.
69
-
70
- `phrase` - Search by phrase, `true` to enable.
71
-
72
- `zoom` - Zoom level.
66
+ The element is block-level and needs an explicit height.
73
67
 
74
- `pagemode` - Page mode, `thumbs | bookmarks | attachments | layers | none`.
68
+ ## Attributes
75
69
 
76
- `locale` - Specifies which language to use in the viewer UI, `en-US | ...`. [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n)
70
+ | Attribute | Description | Default |
71
+ | --- | --- | --- |
72
+ | `src` | PDF file URL. | `''` |
73
+ | `iframe-title` | Title for the internal `iframe` (recommended for accessibility). | `PDF viewer window` |
74
+ | `page` | Page number. | `''` |
75
+ | `search` | Search query text. | `''` |
76
+ | `phrase` | Phrase search mode, set to `true` to enable phrase matching. | `''` |
77
+ | `zoom` | Zoom level (for example `auto`, `page-width`, `200%`). | `''` |
78
+ | `pagemode` | Sidebar mode: `thumbs`, `bookmarks`, `attachments`, `layers`, `none`. | `none` |
79
+ | `locale` | Viewer UI locale (for example `en-US`, `de`, `uk`). [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n) | `''` |
80
+ | `viewer-css-theme` | Viewer theme: `AUTOMATIC`, `LIGHT`, `DARK`. | `AUTOMATIC` |
81
+ | `worker-src` | PDF.js worker URL override. | `https://cdn.jsdelivr.net/npm/pdfjs-dist@5.4.624/build/pdf.worker.min.mjs` |
77
82
 
78
- `viewer-css-theme` - Apply automatic, light, or dark theme, `AUTOMATIC | LIGHT | DARK`
83
+ Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
79
84
 
80
- `viewer-extra-styles` - Add your CSS rules to the viewer application, pass a string with styles.
85
+ ## Runtime updates
81
86
 
82
- `viewer-extra-styles-urls` - Add external CSS files to the viewer application, pass an array with URLs.
87
+ Most attributes can be updated dynamically:
83
88
 
84
- Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
89
+ - `src` updates by calling PDF.js `open({ url })` without rebuilding the viewer.
90
+ - `page`, `search`, `phrase`, `zoom`, `pagemode` update via hash parameters.
91
+ - `viewer-css-theme` updates the viewer theme at runtime.
92
+ - `worker-src` updates viewer options for subsequent document loads.
93
+ - `locale` rebuilds the viewer so localization resources can be applied.
85
94
 
86
95
  ## Viewer CSS theme
87
96
 
@@ -94,18 +103,33 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
94
103
  </pdfjs-viewer-element>
95
104
  ```
96
105
 
97
- ## Viewer custom styles
106
+ Runtime example:
107
+
108
+ ```javascript
109
+ const viewer = document.querySelector('pdfjs-viewer-element')
110
+ viewer.setAttribute('viewer-css-theme', 'DARK')
111
+ viewer.setAttribute('viewer-css-theme', 'AUTOMATIC')
112
+ ```
113
+
114
+ ## Viewer custom styles
98
115
 
99
- You can add your own CSS rules to the viewer application using `viewer-extra-styles` or `viewer-extra-styles-urls` attribute:
116
+ You can add your own CSS rules to the viewer application using `injectViewerStyles(styles: string)`:
100
117
 
101
118
  ```html
102
- <pdfjs-viewer-element
103
- src="/file.pdf"
104
- viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
105
- viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
119
+ <pdfjs-viewer-element id="viewer" src="/file.pdf">
106
120
  </pdfjs-viewer-element>
107
121
  ```
108
- Build your own theme with viewer's custom variables and `viewer-extra-styles-urls` attribute:
122
+
123
+ ```javascript
124
+ const viewer = document.querySelector('#viewer')
125
+ viewer.injectViewerStyles(`
126
+ #toolbarViewerMiddle, #toolbarViewerRight { display: none; }
127
+ `)
128
+ ```
129
+
130
+ `injectViewerStyles(...)` applies styles immediately when the viewer document is ready, and keeps them for future rebuilds.
131
+
132
+ Build your own theme with viewer custom variables and inject it via `injectViewerStyles(...)`:
109
133
 
110
134
  ```css
111
135
  :root {
@@ -128,7 +152,11 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
128
152
  }
129
153
  ```
130
154
 
131
- ## PDF.js Viewer Application and Options
155
+ ## Methods
156
+
157
+ `injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.
158
+
159
+ ## Programmatic access to PDF.js
132
160
 
133
161
  ```html
134
162
  <pdfjs-viewer-element></pdfjs-viewer-element>
@@ -144,6 +172,13 @@ document.addEventListener('DOMContentLoaded', async () => {
144
172
  })
145
173
  ```
146
174
 
175
+ You can also react to source changes dynamically:
176
+
177
+ ```javascript
178
+ const viewer = document.querySelector('pdfjs-viewer-element')
179
+ viewer.setAttribute('src', '/another-file.pdf')
180
+ ```
181
+
147
182
  ## Events
148
183
 
149
184
  `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 () => {
151
186
  - `viewerApp` (`PDFViewerApplication`)
152
187
  - `viewerOptions` (`PDFViewerApplicationOptions`)
153
188
 
189
+ The event is emitted each time the internal viewer is rebuilt (for example after changing `locale`).
190
+
191
+ ## Migration notes
192
+
193
+ If you are upgrading from an older version:
194
+
195
+ - `viewer-extra-styles` and `viewer-extra-styles-urls` attributes are removed.
196
+ - Use `injectViewerStyles(styles)` instead of style attributes.
197
+ - Use the `initialized` event for `viewerApp` / `viewerOptions` access.
198
+ - Runtime `src` updates are supported with `setAttribute('src', ...)`.
199
+
154
200
  ## Accessibility
155
201
 
156
202
  Use `iframe-title` to add a title to the `iframe` element and improve accessibility.
package/dist/locale-DENudnjU.js ADDED
@@ -0,0 +1 @@
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};