pdfjs-viewer-element 2.7.4 → 3.0.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/LICENSE +21 -0
- package/README.md +34 -69
- package/dist/locale-BcpxbQPE.js +4 -0
- package/dist/pdf.min-NUTxlqGN.js +4 -0
- package/dist/pdfjs-viewer-element.js +133 -100
- package/dist/viewer.min-DFiIXGch.js +4 -0
- package/package.json +5 -5
- package/types/pdfjs-viewer-element.d.ts +9 -15
- package/types/elementReady.d.ts +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Oleksandr Shevchuk
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -7,16 +7,20 @@ The package provides a custom element, based on PDF.js [viewer options](https://
|
|
|
7
7
|
Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and works with most [JS frameworks](https://custom-elements-everywhere.com/).
|
|
8
8
|
|
|
9
9
|
[](https://www.npmjs.com/package/pdfjs-viewer-element)
|
|
10
|
-
[](https://deepwiki.com/alekswebnet/pdfjs-viewer-element)
|
|
11
11
|
[](https://www.webcomponents.org/element/pdfjs-viewer-element)
|
|
12
12
|
|
|
13
13
|

|
|
14
14
|
|
|
15
15
|
## Features
|
|
16
16
|
|
|
17
|
-
-
|
|
18
|
-
- PDF.js viewer
|
|
19
|
-
-
|
|
17
|
+
- Standalone web component with no runtime dependencies
|
|
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)
|
|
20
|
+
- Programmatic access to `PDFViewerApplication` and `PDFViewerApplicationOptions` via the `initialized` event
|
|
21
|
+
- Theme control (automatic/light/dark) plus custom CSS injection or external stylesheets
|
|
22
|
+
- Locale override support using PDF.js viewer locales
|
|
23
|
+
- Works in modern browsers and most JS frameworks
|
|
20
24
|
|
|
21
25
|
## Docs
|
|
22
26
|
|
|
@@ -24,31 +28,7 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
|
|
|
24
28
|
|
|
25
29
|
[API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
|
|
26
30
|
|
|
27
|
-
[
|
|
28
|
-
|
|
29
|
-
[Various usecases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
|
|
30
|
-
|
|
31
|
-
## Support via Ko-fi
|
|
32
|
-
|
|
33
|
-
If you find `pdfjs-viewer-element` useful and want to support its development, consider making a donation via Ko-fi:
|
|
34
|
-
|
|
35
|
-
[](https://ko-fi.com/oleksandrshevchuk)
|
|
36
|
-
|
|
37
|
-
> ❤️ Your support helps with maintenance, bug fixes, and long-term improvements.
|
|
38
|
-
|
|
39
|
-
## How it works
|
|
40
|
-
|
|
41
|
-
**⚠️ This is an important part, please read this FIRST !!!**
|
|
42
|
-
|
|
43
|
-
**You should download and place the PDF.js prebuilt files in the project.**
|
|
44
|
-
|
|
45
|
-
`pdfjs-viewer-element` requires [PDF.js prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer.
|
|
46
|
-
|
|
47
|
-
The prebuilt comes with each PDF.js release. [PDF.JS releases](https://github.com/mozilla/pdf.js/releases)
|
|
48
|
-
|
|
49
|
-
✅ All v3, v4 and v5 releases are fully supported.
|
|
50
|
-
|
|
51
|
-
After placing the prebuild specify the path to the directory with the `viewer-path` property (`/pdfjs` by default) and PDF file URL with `src` property (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)).
|
|
31
|
+
[Various use cases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
|
|
52
32
|
|
|
53
33
|
## Install
|
|
54
34
|
|
|
@@ -57,8 +37,6 @@ After placing the prebuild specify the path to the directory with the `viewer-pa
|
|
|
57
37
|
```bash
|
|
58
38
|
# With npm
|
|
59
39
|
npm install pdfjs-viewer-element
|
|
60
|
-
# With yarn
|
|
61
|
-
yarn add pdfjs-viewer-element
|
|
62
40
|
# With pnpm
|
|
63
41
|
pnpm add pdfjs-viewer-element
|
|
64
42
|
```
|
|
@@ -70,27 +48,23 @@ import 'pdfjs-viewer-element'
|
|
|
70
48
|
### Using browser and CDN:
|
|
71
49
|
|
|
72
50
|
```html
|
|
73
|
-
<script type="module" src="https://cdn.
|
|
51
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element"></script>
|
|
74
52
|
```
|
|
75
53
|
|
|
76
54
|
## Usage
|
|
77
55
|
|
|
78
56
|
```html
|
|
79
|
-
<pdfjs-viewer-element src="/file.pdf"
|
|
57
|
+
<pdfjs-viewer-element src="path-to/file.pdf"></pdfjs-viewer-element>
|
|
80
58
|
```
|
|
81
59
|
|
|
82
60
|
## Attributes
|
|
83
61
|
|
|
84
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)
|
|
85
63
|
|
|
86
|
-
`viewer-path` - Path to PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/)
|
|
87
|
-
|
|
88
64
|
`iframe-title` - The title of the `iframe` element, required for better accessibility
|
|
89
65
|
|
|
90
66
|
`page` - Page number.
|
|
91
67
|
|
|
92
|
-
`nameddest` - Go to a named destination.
|
|
93
|
-
|
|
94
68
|
`search` - Search text.
|
|
95
69
|
|
|
96
70
|
`phrase` - Search by phrase, `true` to enable.
|
|
@@ -99,20 +73,6 @@ import 'pdfjs-viewer-element'
|
|
|
99
73
|
|
|
100
74
|
`pagemode` - Page mode, `thumbs | bookmarks | attachments | layers | none`.
|
|
101
75
|
|
|
102
|
-
`disable-worker` - Disables the worker, `true` to enable.
|
|
103
|
-
|
|
104
|
-
`text-layer` - Disables or reveals the text layer that is used for text selection, `off | visible | shadow | hover`.
|
|
105
|
-
|
|
106
|
-
`disable-font-face` - Disables standard `@font-face` font loading and uses the internal font renderer instead, `true` to enable.
|
|
107
|
-
|
|
108
|
-
`disable-range` - Disables HTTP range requests when fetching the document, `true` to enable.
|
|
109
|
-
|
|
110
|
-
`disable-stream` - Disables streaming when fetching the document, `true` to enable.
|
|
111
|
-
|
|
112
|
-
`disable-auto-fetch`- Disables auto fetching of the document; only gets necessary data to display the current view. Note: streaming also needs to be disabled for this to have any effect, `true` to enable.
|
|
113
|
-
|
|
114
|
-
`verbosity`- Specifies the verbosity level of console messages. `0` - only errors, `1` - warnings and errors, `5` - warnings, errors and information messages.
|
|
115
|
-
|
|
116
76
|
`locale` - Specifies which language to use in the viewer UI, `en-US | ...`. [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n)
|
|
117
77
|
|
|
118
78
|
`viewer-css-theme` - Apply automatic, light, or dark theme, `AUTOMATIC | LIGHT | DARK`
|
|
@@ -121,7 +81,7 @@ import 'pdfjs-viewer-element'
|
|
|
121
81
|
|
|
122
82
|
`viewer-extra-styles-urls` - Add external CSS files to the viewer application, pass an array with URLs.
|
|
123
83
|
|
|
124
|
-
Play with attributes on [
|
|
84
|
+
Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
|
|
125
85
|
|
|
126
86
|
## Viewer CSS theme
|
|
127
87
|
|
|
@@ -130,7 +90,6 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
|
|
|
130
90
|
```html
|
|
131
91
|
<pdfjs-viewer-element
|
|
132
92
|
src="/file.pdf"
|
|
133
|
-
viewer-path="/pdfjs-5.3.93-dist"
|
|
134
93
|
viewer-css-theme="DARK">
|
|
135
94
|
</pdfjs-viewer-element>
|
|
136
95
|
```
|
|
@@ -142,7 +101,6 @@ You can add your own CSS rules to the viewer application using `viewer-extra-sty
|
|
|
142
101
|
```html
|
|
143
102
|
<pdfjs-viewer-element
|
|
144
103
|
src="/file.pdf"
|
|
145
|
-
viewer-path="/pdfjs-5.3.93-dist"
|
|
146
104
|
viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
|
|
147
105
|
viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
|
|
148
106
|
</pdfjs-viewer-element>
|
|
@@ -170,23 +128,30 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
|
|
|
170
128
|
}
|
|
171
129
|
```
|
|
172
130
|
|
|
173
|
-
## PDF.js Viewer Application
|
|
174
|
-
|
|
175
|
-
`initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
|
|
131
|
+
## PDF.js Viewer Application and Options
|
|
176
132
|
|
|
177
133
|
```html
|
|
178
|
-
<pdfjs-viewer-element
|
|
134
|
+
<pdfjs-viewer-element></pdfjs-viewer-element>
|
|
179
135
|
```
|
|
180
136
|
|
|
181
137
|
```javascript
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
viewerApp.open({ data: pdfData })
|
|
138
|
+
// Open PDF file programmatically accessing the viewer application
|
|
139
|
+
document.addEventListener('DOMContentLoaded', async () => {
|
|
140
|
+
document.querySelector('pdfjs-viewer-element').addEventListener('initialized', (event) => {
|
|
141
|
+
const { viewerApp, viewerOptions } = event.detail
|
|
142
|
+
viewerApp.open({ data: pdfData })
|
|
143
|
+
})
|
|
144
|
+
})
|
|
187
145
|
```
|
|
188
146
|
|
|
189
|
-
##
|
|
147
|
+
## Events
|
|
148
|
+
|
|
149
|
+
`initialized` - Fired after the PDF.js viewer is ready (after `PDFViewerApplication.initializedPromise` resolves). The event `detail` contains:
|
|
150
|
+
|
|
151
|
+
- `viewerApp` (`PDFViewerApplication`)
|
|
152
|
+
- `viewerOptions` (`PDFViewerApplicationOptions`)
|
|
153
|
+
|
|
154
|
+
## Accessibility
|
|
190
155
|
|
|
191
156
|
Use `iframe-title` to add a title to the `iframe` element and improve accessibility.
|
|
192
157
|
|
|
@@ -196,7 +161,7 @@ Use `iframe-title` to add a title to the `iframe` element and improve accessibil
|
|
|
196
161
|
|
|
197
162
|
Since v4 PDF.js requires `.mjs` files support, make sure your server has it.
|
|
198
163
|
|
|
199
|
-
In case of `nginx` this may
|
|
164
|
+
In case of `nginx` this may cause errors, see https://github.com/mozilla/pdf.js/issues/17296
|
|
200
165
|
|
|
201
166
|
Add `.mjs` files support for `nginx` example:
|
|
202
167
|
|
|
@@ -217,13 +182,13 @@ server {
|
|
|
217
182
|
}
|
|
218
183
|
```
|
|
219
184
|
|
|
220
|
-
|
|
185
|
+
## Support via Ko-fi
|
|
221
186
|
|
|
222
|
-
|
|
223
|
-
If you encounter this issue, you can try disabling the broken functionality of PDF.js:
|
|
187
|
+
If you find `pdfjs-viewer-element` useful and want to support its development, consider making a donation via Ko-fi:
|
|
224
188
|
|
|
225
|
-
|
|
189
|
+
[](https://ko-fi.com/oleksandrshevchuk)
|
|
226
190
|
|
|
191
|
+
> ❤️ Your support helps with maintenance, bug fixes, and long-term improvements.
|
|
227
192
|
|
|
228
193
|
## License
|
|
229
194
|
[MIT](http://opensource.org/licenses/MIT)
|
|
@@ -0,0 +1,4 @@
|
|
|
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"}';
|
|
2
|
+
export {
|
|
3
|
+
e as default
|
|
4
|
+
};
|