pdfjs-viewer-element 3.0.2 → 3.1.1
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.
- package/README.md +100 -70
- package/dist/locale-DENudnjU.js +1 -0
- package/dist/pdf-DRXGYF_W.js +1 -0
- package/dist/pdfjs-viewer-element.js +1 -160
- package/dist/viewer-00vA-OlL.js +1 -0
- package/dist/viewer-DVUWiHIQ.js +1 -0
- package/dist/viewer-gf2SDly8.js +1 -0
- package/package.json +9 -8
- package/types/pdfjs-viewer-element.d.ts +33 -16
- package/dist/locale-BcpxbQPE.js +0 -4
- package/dist/pdf.min-NUTxlqGN.js +0 -4
- 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
|
-
-
|
|
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
|
|
22
|
+
- Theme control (automatic/light/dark) plus custom CSS injection
|
|
22
23
|
- Locale override support using PDF.js viewer locales
|
|
23
|
-
-
|
|
24
|
+
- Supports all modern browsers and most JS frameworks
|
|
24
25
|
|
|
25
26
|
## Docs
|
|
26
27
|
|
|
@@ -28,7 +29,13 @@ 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
|
|
|
31
|
-
[
|
|
32
|
+
[CodePen demo](https://codepen.io/redrobot753/pen/bNwVVvp)
|
|
33
|
+
|
|
34
|
+
[CodePen demo with React](https://codepen.io/redrobot753/pen/xbEwNrO)
|
|
35
|
+
|
|
36
|
+
[CodePen demo with Vue](https://codepen.io/redrobot753/pen/JoRYqwN)
|
|
37
|
+
|
|
38
|
+
[Usage examples](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
|
|
32
39
|
|
|
33
40
|
## Install
|
|
34
41
|
|
|
@@ -54,34 +61,45 @@ import 'pdfjs-viewer-element'
|
|
|
54
61
|
## Usage
|
|
55
62
|
|
|
56
63
|
```html
|
|
57
|
-
<pdfjs-viewer-element
|
|
64
|
+
<pdfjs-viewer-element
|
|
65
|
+
src="https://alekswebnet.github.io/sample-pdf-with-images.pdf"
|
|
66
|
+
style="height: 100dvh">
|
|
67
|
+
</pdfjs-viewer-element>
|
|
58
68
|
```
|
|
59
69
|
|
|
60
|
-
|
|
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.
|
|
70
|
+
The element is block-level and needs an explicit height.
|
|
67
71
|
|
|
68
|
-
|
|
72
|
+
### Framework usage
|
|
69
73
|
|
|
70
|
-
|
|
74
|
+
- [React integration example](https://codepen.io/redrobot753/pen/xbEwNrO)
|
|
75
|
+
- [Vue integration example](https://codepen.io/redrobot753/pen/JoRYqwN)
|
|
71
76
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
`pagemode` - Page mode, `thumbs | bookmarks | attachments | layers | none`.
|
|
77
|
+
## Attributes
|
|
75
78
|
|
|
76
|
-
|
|
79
|
+
| Attribute | Description | Default |
|
|
80
|
+
| --- | --- | --- |
|
|
81
|
+
| `src` | PDF file URL. | `''` |
|
|
82
|
+
| `iframe-title` | Title for the internal `iframe` (recommended for accessibility). | `PDF viewer window` |
|
|
83
|
+
| `page` | Page number. | `''` |
|
|
84
|
+
| `search` | Search query text. | `''` |
|
|
85
|
+
| `phrase` | Phrase search mode, set to `true` to enable phrase matching. | `''` |
|
|
86
|
+
| `zoom` | Zoom level (for example `auto`, `page-width`, `200%`). | `''` |
|
|
87
|
+
| `pagemode` | Sidebar mode: `thumbs`, `bookmarks`, `attachments`, `layers`, `none`. | `none` |
|
|
88
|
+
| `locale` | Viewer UI locale (for example `en-US`, `de`, `uk`). [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n) | `''` |
|
|
89
|
+
| `viewer-css-theme` | Viewer theme: `AUTOMATIC`, `LIGHT`, `DARK`. | `AUTOMATIC` |
|
|
90
|
+
| `worker-src` | PDF.js worker URL override. | `https://cdn.jsdelivr.net/npm/pdfjs-dist@5.4.624/build/pdf.worker.min.mjs` |
|
|
77
91
|
|
|
78
|
-
|
|
92
|
+
Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
|
|
79
93
|
|
|
80
|
-
|
|
94
|
+
## Runtime updates
|
|
81
95
|
|
|
82
|
-
|
|
96
|
+
Most attributes can be updated dynamically:
|
|
83
97
|
|
|
84
|
-
|
|
98
|
+
- `src` updates by calling PDF.js `open({ url })` without rebuilding the viewer.
|
|
99
|
+
- `page`, `search`, `phrase`, `zoom`, `pagemode` update via hash parameters.
|
|
100
|
+
- `viewer-css-theme` updates the viewer theme at runtime.
|
|
101
|
+
- `worker-src` updates viewer options for subsequent document loads.
|
|
102
|
+
- `locale` rebuilds the viewer so localization resources can be applied.
|
|
85
103
|
|
|
86
104
|
## Viewer CSS theme
|
|
87
105
|
|
|
@@ -94,18 +112,34 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
|
|
|
94
112
|
</pdfjs-viewer-element>
|
|
95
113
|
```
|
|
96
114
|
|
|
97
|
-
|
|
115
|
+
Runtime example:
|
|
116
|
+
|
|
117
|
+
```javascript
|
|
118
|
+
const viewerElement = document.querySelector('pdfjs-viewer-element')
|
|
119
|
+
viewerElement.setAttribute('viewer-css-theme', 'DARK')
|
|
120
|
+
viewerElement.setAttribute('viewer-css-theme', 'LIGHT')
|
|
121
|
+
viewerElement.setAttribute('viewer-css-theme', 'AUTOMATIC')
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Viewer custom styles
|
|
98
125
|
|
|
99
|
-
You can add your own CSS rules to the viewer application using `
|
|
126
|
+
You can add your own CSS rules to the viewer application using `injectViewerStyles(styles: string)`:
|
|
100
127
|
|
|
101
128
|
```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']">
|
|
129
|
+
<pdfjs-viewer-element id="viewer" src="/file.pdf">
|
|
106
130
|
</pdfjs-viewer-element>
|
|
107
131
|
```
|
|
108
|
-
|
|
132
|
+
|
|
133
|
+
```javascript
|
|
134
|
+
const viewerElement = document.querySelector('#viewer')
|
|
135
|
+
viewerElement.injectViewerStyles(`
|
|
136
|
+
#toolbarViewerMiddle, #toolbarViewerRight { display: none; }
|
|
137
|
+
`)
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
`injectViewerStyles(...)` applies styles immediately when the viewer document is ready, and keeps them for future rebuilds.
|
|
141
|
+
|
|
142
|
+
Build your own theme with viewer custom variables and inject it via `injectViewerStyles(...)`:
|
|
109
143
|
|
|
110
144
|
```css
|
|
111
145
|
:root {
|
|
@@ -128,67 +162,63 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
|
|
|
128
162
|
}
|
|
129
163
|
```
|
|
130
164
|
|
|
131
|
-
##
|
|
165
|
+
## Methods and Public properties
|
|
132
166
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
167
|
+
Methods:
|
|
168
|
+
|
|
169
|
+
`injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.
|
|
170
|
+
|
|
171
|
+
Example (`injectViewerStyles`):
|
|
136
172
|
|
|
137
173
|
```javascript
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
})
|
|
174
|
+
const viewerElement = document.querySelector('pdfjs-viewer-element')
|
|
175
|
+
|
|
176
|
+
await viewerElement.injectViewerStyles(`
|
|
177
|
+
#toolbarViewerRight { display: none; }
|
|
178
|
+
#findbar { border-top: 2px solid #0200a8; }
|
|
179
|
+
`)
|
|
145
180
|
```
|
|
146
181
|
|
|
147
|
-
|
|
182
|
+
Public properties:
|
|
148
183
|
|
|
149
|
-
`
|
|
184
|
+
`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).
|
|
150
185
|
|
|
151
|
-
|
|
152
|
-
- `viewerOptions` (`PDFViewerApplicationOptions`)
|
|
186
|
+
Example (`initPromise`):
|
|
153
187
|
|
|
154
|
-
|
|
188
|
+
```javascript
|
|
189
|
+
const viewerElement = document.querySelector('pdfjs-viewer-element')
|
|
190
|
+
const { viewerApp } = await viewerElement.initPromise
|
|
155
191
|
|
|
156
|
-
|
|
192
|
+
viewerApp.open({ url: '/sample.pdf' })
|
|
193
|
+
```
|
|
157
194
|
|
|
158
|
-
|
|
195
|
+
`iframe: PdfjsViewerElementIframe` - Public reference to the internal `iframe` element. Useful when you need direct access to `contentWindow`/`contentDocument`.
|
|
159
196
|
|
|
160
|
-
|
|
197
|
+
Example (`iframe`):
|
|
161
198
|
|
|
162
|
-
|
|
199
|
+
```javascript
|
|
200
|
+
const viewerElement = document.querySelector('pdfjs-viewer-element')
|
|
163
201
|
|
|
164
|
-
|
|
202
|
+
// Access iframe window directly when needed.
|
|
203
|
+
const iframeWindow = viewerElement.iframe.contentWindow
|
|
165
204
|
|
|
166
|
-
|
|
205
|
+
// Read current location hash applied to the viewer.
|
|
206
|
+
console.log(iframeWindow.location.hash)
|
|
167
207
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
# ...
|
|
171
|
-
|
|
172
|
-
location / {
|
|
173
|
-
root /usr/share/nginx/html;
|
|
174
|
-
index index.html;
|
|
175
|
-
|
|
176
|
-
location ~* \.mjs$ {
|
|
177
|
-
types {
|
|
178
|
-
text/javascript mjs;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
}
|
|
208
|
+
// Inspect iframe document title.
|
|
209
|
+
console.log(viewerElement.iframe.contentDocument.title)
|
|
183
210
|
```
|
|
184
211
|
|
|
185
|
-
|
|
212
|
+
You can also react to source changes dynamically:
|
|
186
213
|
|
|
187
|
-
|
|
214
|
+
```javascript
|
|
215
|
+
const viewerElement = document.querySelector('pdfjs-viewer-element')
|
|
216
|
+
viewer.setAttribute('src', '/another-file.pdf')
|
|
217
|
+
```
|
|
188
218
|
|
|
189
|
-
|
|
219
|
+
## Accessibility
|
|
190
220
|
|
|
191
|
-
|
|
221
|
+
Use `iframe-title` to add a title to the `iframe` element and improve accessibility.
|
|
192
222
|
|
|
193
223
|
## License
|
|
194
224
|
[MIT](http://opensource.org/licenses/MIT)
|
|
@@ -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};
|