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 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
  [![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm&logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)
10
- [![Package Quality](https://packagequality.com/shield/pdfjs-viewer-element.svg)](https://packagequality.com/#?package=pdfjs-viewer-element)
10
+ [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/alekswebnet/pdfjs-viewer-element)
11
11
  [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/pdfjs-viewer-element)
12
12
 
13
13
  ![PDF.js viewer](image.webp)
14
14
 
15
15
  ## Features
16
16
 
17
- - Simple PDF.js viewer integration to any web application
18
- - PDF.js viewer options and parameters support, access the viewer application instance
19
- - Customize viewer styles and themes
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
- [Usage with frameworks](https://alekswebnet.github.io/pdfjs-viewer-element/#demo)
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
- [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](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.skypack.dev/pdfjs-viewer-element"></script>
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" viewer-path="/pdfjs-5.3.93-dist"></pdfjs-viewer-element>
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 [Api docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
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 viewer-path="/pdfjs-5.3.93-dist"></pdfjs-viewer-element>
134
+ <pdfjs-viewer-element></pdfjs-viewer-element>
179
135
  ```
180
136
 
181
137
  ```javascript
182
- const viewer = document.querySelector('pdfjs-viewer-element')
183
- // Wait for the viewer initialization, receive PDFViewerApplication
184
- const viewerApp = await viewer.initialize()
185
- // Open PDF file data using Uint8Array instead of URL
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
- ## Accessablity
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 causes to errors, see https://github.com/mozilla/pdf.js/issues/17296
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
- ### Problem with range requests / streaming
185
+ ## Support via Ko-fi
221
186
 
222
- Sometimes a PDF file fails to load when working with range requests / streaming.
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
- `disable-range="true"`
189
+ [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](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
+ };