pdfjs-viewer-element 2.7.0 → 2.7.2
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 +45 -29
- package/dist/pdfjs-viewer-element.js +38 -41
- package/package.json +9 -9
- package/types/pdfjs-viewer-element.d.ts +1 -1
package/README.md
CHANGED
|
@@ -1,53 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
<h1 align="center">pdfjs-viewer-element</h1>
|
|
1
|
+
# pdfjs-viewer-element
|
|
2
|
+
|
|
3
|
+
Custom element that embeds [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) using the `iframe`.
|
|
5
4
|
|
|
6
|
-
The simplest integration of [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) using the `iframe` element and web component.
|
|
7
5
|
The package provides a custom element, based on PDF.js [viewer options](https://github.com/mozilla/pdf.js/wiki/Viewer-options) and [URL parameters](https://github.com/mozilla/pdf.js/wiki/Debugging-PDF.js#url-parameters) API.
|
|
6
|
+
|
|
8
7
|
Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and works with most [JS frameworks](https://custom-elements-everywhere.com/).
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
[](https://www.npmjs.com/package/pdfjs-viewer-element)
|
|
10
|
+
[](https://packagequality.com/#?package=pdfjs-viewer-element)
|
|
11
|
+
[](https://www.webcomponents.org/element/pdfjs-viewer-element)
|
|
12
|
+
|
|
13
|
+
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
## Features
|
|
14
16
|
|
|
15
17
|
- Simple PDF.js viewer integration to any web application
|
|
16
|
-
- PDF.js viewer options and parameters support, access
|
|
17
|
-
-
|
|
18
|
+
- PDF.js viewer options and parameters support, access the viewer application instance
|
|
19
|
+
- Customize viewer styles and themes
|
|
18
20
|
|
|
19
|
-
##
|
|
21
|
+
## Docs
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
[Getting started](https://alekswebnet.github.io/pdfjs-viewer-element/)
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
[API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
[Usage with frameworks](https://alekswebnet.github.io/pdfjs-viewer-element/#demo)
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
All v4 and v3 [releases](https://github.com/mozilla/pdf.js/releases) are supported.
|
|
29
|
+
[Various usecases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
## Support via Ko-fi
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
If you find `pdfjs-viewer-element` useful and want to support its development, consider making a donation via Ko-fi:
|
|
33
34
|
|
|
34
|
-
[](https://packagequality.com/#?package=pdfjs-viewer-element)
|
|
36
|
-
[](https://www.webcomponents.org/element/pdfjs-viewer-element)
|
|
35
|
+
[](https://ko-fi.com/oleksandrshevchuk)
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
> ❤️ Your support helps with maintenance, bug fixes, and long-term improvements.
|
|
39
38
|
|
|
40
|
-
|
|
39
|
+
## How it works
|
|
41
40
|
|
|
42
|
-
|
|
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.
|
|
43
46
|
|
|
44
|
-
[
|
|
47
|
+
The prebuilt comes with each PDF.js release. [PDF.JS releases](https://github.com/mozilla/pdf.js/releases)
|
|
45
48
|
|
|
46
|
-
|
|
49
|
+
✅ All v4 and v3 releases are fully supported.
|
|
50
|
+
|
|
51
|
+
🚧 For v5 releases - there are some breaking changes that affects styles injecting, and theme changing not work anymore.
|
|
52
|
+
|
|
53
|
+
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)).
|
|
47
54
|
|
|
48
55
|
## Install
|
|
49
56
|
|
|
50
|
-
Using module bundlers:
|
|
57
|
+
### Using module bundlers:
|
|
51
58
|
|
|
52
59
|
```bash
|
|
53
60
|
# With npm
|
|
@@ -62,7 +69,7 @@ pnpm add pdfjs-viewer-element
|
|
|
62
69
|
import 'pdfjs-viewer-element'
|
|
63
70
|
```
|
|
64
71
|
|
|
65
|
-
Using browser:
|
|
72
|
+
### Using browser and CDN:
|
|
66
73
|
|
|
67
74
|
```html
|
|
68
75
|
<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
|
|
@@ -179,7 +186,9 @@ const viewerApp = await viewer.initialize()
|
|
|
179
186
|
viewerApp.open({ data: pdfData })
|
|
180
187
|
```
|
|
181
188
|
|
|
182
|
-
##
|
|
189
|
+
## Known issues
|
|
190
|
+
|
|
191
|
+
### The `.mjs` files support
|
|
183
192
|
|
|
184
193
|
Since v4 PDF.js requires `.mjs` files support, make sure your server has it.
|
|
185
194
|
|
|
@@ -204,6 +213,13 @@ server {
|
|
|
204
213
|
}
|
|
205
214
|
```
|
|
206
215
|
|
|
216
|
+
### Problem with range requests / streaming
|
|
217
|
+
|
|
218
|
+
Sometimes a PDF file fails to load when working with range requests / streaming.
|
|
219
|
+
If you encounter this issue, you can try disabling the broken functionality of PDF.js:
|
|
220
|
+
|
|
221
|
+
`disable-range="true"`
|
|
222
|
+
|
|
207
223
|
|
|
208
224
|
## License
|
|
209
225
|
[MIT](http://opensource.org/licenses/MIT)
|
|
@@ -1,60 +1,55 @@
|
|
|
1
1
|
const y = (p, t) => new Promise((o) => {
|
|
2
2
|
let s = t.querySelector(p);
|
|
3
|
-
s ? o(s) : new MutationObserver((r,
|
|
4
|
-
Array.from(t.querySelectorAll(p)).forEach((
|
|
5
|
-
o(
|
|
3
|
+
s ? o(s) : new MutationObserver((r, i) => {
|
|
4
|
+
Array.from(t.querySelectorAll(p)).forEach((e) => {
|
|
5
|
+
o(e), i.disconnect();
|
|
6
6
|
});
|
|
7
7
|
}).observe(t, { childList: !0, subtree: !0 });
|
|
8
|
-
}),
|
|
8
|
+
}), E = { trailing: !0 }, T = "/pdfjs", D = "/web/viewer.html", A = "", C = "", P = "", k = "", R = "", V = "none", F = "", O = "", L = "", I = "", j = "", q = "", M = "", W = "", v = "AUTOMATIC", $ = "", z = "", H = "", b = { AUTOMATIC: 0, LIGHT: 1, DARK: 2 }, N = ["src", "viewer-path", "disable-worker", "text-layer", "disable-font-face", "disable-range", "disable-stream", "disable-auto-fetch", "verbosity", "locale", "viewer-css-theme", "viewer-extra-styles", "viewer-extra-styles-urls"];
|
|
9
9
|
class x extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(), this.onIframeReady = function(s, r = 25,
|
|
12
|
-
if (
|
|
13
|
-
|
|
14
|
-
let i, n, a, l, h = [];
|
|
11
|
+
super(), this.onIframeReady = function(s, r = 25, i = {}) {
|
|
12
|
+
if (i = { ...E, ...i }, !Number.isFinite(r)) throw new TypeError("Expected `wait` to be a finite number");
|
|
13
|
+
let e, n, a, l, h = [];
|
|
15
14
|
const f = (c, m) => (a = async function(d, u, w) {
|
|
16
15
|
return await d.apply(u, w);
|
|
17
16
|
}(s, c, m), a.finally(() => {
|
|
18
|
-
if (a = null,
|
|
17
|
+
if (a = null, i.trailing && l && !n) {
|
|
19
18
|
const d = f(c, l);
|
|
20
19
|
return l = null, d;
|
|
21
20
|
}
|
|
22
21
|
}), a);
|
|
23
22
|
return function(...c) {
|
|
24
|
-
return a ? (
|
|
25
|
-
const d = !n &&
|
|
23
|
+
return a ? (i.trailing && (l = c), a) : new Promise((m) => {
|
|
24
|
+
const d = !n && i.leading;
|
|
26
25
|
clearTimeout(n), n = setTimeout(() => {
|
|
27
26
|
n = null;
|
|
28
|
-
const u =
|
|
29
|
-
for (const w of h)
|
|
30
|
-
w(u);
|
|
27
|
+
const u = i.leading ? e : f(this, c);
|
|
28
|
+
for (const w of h) w(u);
|
|
31
29
|
h = [];
|
|
32
|
-
}, r), d ? (
|
|
30
|
+
}, r), d ? (e = f(this, c), m(e)) : h.push(m);
|
|
33
31
|
});
|
|
34
32
|
};
|
|
35
33
|
}(async (s) => {
|
|
36
34
|
await y("iframe", this.shadowRoot), s();
|
|
37
35
|
}, 0, { leading: !0 }), this.setViewerExtraStyles = (s, r = "extra") => {
|
|
38
|
-
var
|
|
39
|
-
if (!s)
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const e = document.createElement("style");
|
|
44
|
-
e.innerHTML = s, e.setAttribute(r, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(e);
|
|
36
|
+
var e, n, a, l, h;
|
|
37
|
+
if (!s) return void ((n = (e = this.iframe.contentDocument) == null ? void 0 : e.head.querySelector(`style[${r}]`)) == null ? void 0 : n.remove());
|
|
38
|
+
if (((l = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${r}]`)) == null ? void 0 : l.innerHTML) === s) return;
|
|
39
|
+
const i = document.createElement("style");
|
|
40
|
+
i.innerHTML = s, i.setAttribute(r, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(i);
|
|
45
41
|
}, this.injectExtraStylesLinks = (s) => {
|
|
46
42
|
s && s.replace(/'|]|\[/g, "").split(",").map((r) => r.trim()).forEach((r) => {
|
|
47
43
|
var n, a;
|
|
48
|
-
if ((n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector(`link[href="${r}"]`))
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
i.rel = "stylesheet", i.href = r, (a = this.iframe.contentDocument) == null || a.head.appendChild(i);
|
|
44
|
+
if ((n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector(`link[href="${r}"]`)) return;
|
|
45
|
+
const e = document.createElement("link");
|
|
46
|
+
e.rel = "stylesheet", e.href = r, (a = this.iframe.contentDocument) == null || a.head.appendChild(e);
|
|
52
47
|
});
|
|
53
48
|
}, this.initialize = () => new Promise(async (s) => {
|
|
54
49
|
var r;
|
|
55
50
|
await y("iframe", this.shadowRoot), (r = this.iframe) == null || r.addEventListener("load", async () => {
|
|
56
|
-
var
|
|
57
|
-
await ((
|
|
51
|
+
var i, e, n;
|
|
52
|
+
await ((e = (i = this.iframe.contentWindow) == null ? void 0 : i.PDFViewerApplication) == null ? void 0 : e.initializedPromise), s((n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplication);
|
|
58
53
|
}, { once: !0 });
|
|
59
54
|
});
|
|
60
55
|
const t = this.attachShadow({ mode: "open" }), o = document.createElement("template");
|
|
@@ -68,8 +63,8 @@ class x extends HTMLElement {
|
|
|
68
63
|
}
|
|
69
64
|
connectedCallback() {
|
|
70
65
|
this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
|
|
71
|
-
var t, o, s, r,
|
|
72
|
-
this.setCssTheme(this.getCssThemeOption()), this.injectExtraStylesLinks(this.getAttribute("viewer-extra-styles-urls") ?? z), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles") ?? $), this.getAttribute("src") !== A && ((o = (t = this.iframe.contentWindow) == null ? void 0 : t.PDFViewerApplicationOptions) == null || o.set("defaultUrl", "")), (r = (s = this.iframe.contentWindow) == null ? void 0 : s.PDFViewerApplicationOptions) == null || r.set("disablePreferences", !0), (
|
|
66
|
+
var t, o, s, r, i, e, n, a;
|
|
67
|
+
this.setCssTheme(this.getCssThemeOption()), this.injectExtraStylesLinks(this.getAttribute("viewer-extra-styles-urls") ?? z), this.setViewerExtraStyles(this.getAttribute("viewer-extra-styles") ?? $), this.getAttribute("src") !== A && ((o = (t = this.iframe.contentWindow) == null ? void 0 : t.PDFViewerApplicationOptions) == null || o.set("defaultUrl", "")), (r = (s = this.iframe.contentWindow) == null ? void 0 : s.PDFViewerApplicationOptions) == null || r.set("disablePreferences", !0), (e = (i = this.iframe.contentWindow) == null ? void 0 : i.PDFViewerApplicationOptions) == null || e.set("pdfBugEnabled", !0), (a = (n = this.iframe.contentWindow) == null ? void 0 : n.PDFViewerApplicationOptions) == null || a.set("eventBusDispatchToDOM", !0);
|
|
73
68
|
});
|
|
74
69
|
}
|
|
75
70
|
attributeChangedCallback(t) {
|
|
@@ -78,10 +73,10 @@ class x extends HTMLElement {
|
|
|
78
73
|
});
|
|
79
74
|
}
|
|
80
75
|
getIframeSrc() {
|
|
81
|
-
const t = this.getFullPath(this.getAttribute("src") || A), o = this.getFullPath(this.getAttribute("viewer-path") ||
|
|
76
|
+
const t = this.getFullPath(this.getAttribute("src") || A), o = this.getFullPath(this.getAttribute("viewer-path") || T), s = this.getAttribute("page") || C, r = this.getAttribute("search") || P, i = this.getAttribute("phrase") || k, e = this.getAttribute("zoom") || R, n = this.getAttribute("pagemode") || V, a = this.getAttribute("disable-worker") || O, l = this.getAttribute("text-layer") || L, h = this.getAttribute("disable-font-face") || I, f = this.getAttribute("disable-range") || j, c = this.getAttribute("disable-stream") || q, m = this.getAttribute("disable-auto-fetch") || M, d = this.getAttribute("verbosity") || W, u = this.getAttribute("locale") || F, w = this.getAttribute("viewer-css-theme") || v, S = !!(this.getAttribute("viewer-extra-styles") || $), g = this.getAttribute("nameddest") || H;
|
|
82
77
|
return `
|
|
83
78
|
${o}${D}?file=
|
|
84
|
-
${encodeURIComponent(t)}#page=${s}&zoom=${
|
|
79
|
+
${encodeURIComponent(t)}#page=${s}&zoom=${e}&pagemode=${n}&search=${r}&phrase=${i}&textLayer=
|
|
85
80
|
${l}&disableWorker=
|
|
86
81
|
${a}&disableFontFace=
|
|
87
82
|
${h}&disableRange=
|
|
@@ -91,7 +86,7 @@ ${m}&verbosity=
|
|
|
91
86
|
${d}
|
|
92
87
|
${u ? "&locale=" + u : ""}&viewerCssTheme=
|
|
93
88
|
${w}&viewerExtraStyles=
|
|
94
|
-
${
|
|
89
|
+
${S}
|
|
95
90
|
${g ? "&nameddest=" + g : ""}`;
|
|
96
91
|
}
|
|
97
92
|
mountViewer(t) {
|
|
@@ -105,17 +100,19 @@ ${g ? "&nameddest=" + g : ""}`;
|
|
|
105
100
|
return Object.keys(b).includes(t) ? b[t] : b[v];
|
|
106
101
|
}
|
|
107
102
|
setCssTheme(t) {
|
|
108
|
-
var o, s, r;
|
|
103
|
+
var o, s, r, i;
|
|
109
104
|
if (t === b.DARK) {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
if (!((o = this.iframe.contentDocument) != null && o.styleSheets.length)) return;
|
|
106
|
+
for (const e of Array.from(this.iframe.contentDocument.styleSheets)) if ((s = e.href) != null && s.includes("/web/viewer.css")) {
|
|
107
|
+
const n = (e == null ? void 0 : e.cssRules) || [], a = Object.keys(n).filter((l) => {
|
|
108
|
+
var h;
|
|
109
|
+
return ((h = n[Number(l)]) == null ? void 0 : h.conditionText) === "(prefers-color-scheme: dark)";
|
|
110
|
+
}).map((l) => n[Number(l)].cssText.split(`@media (prefers-color-scheme: dark) {
|
|
114
111
|
`)[1].split(`
|
|
115
112
|
}`)[0]);
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
113
|
+
this.setViewerExtraStyles(a.join(""), "theme");
|
|
114
|
+
}
|
|
115
|
+
} else (i = (r = this.iframe.contentDocument) == null ? void 0 : r.head.querySelector("style[theme]")) == null || i.remove();
|
|
119
116
|
}
|
|
120
117
|
}
|
|
121
118
|
window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = x, window.customElements.define("pdfjs-viewer-element", x));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pdfjs-viewer-element",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Oleksandr Shevchuk",
|
|
@@ -32,15 +32,15 @@
|
|
|
32
32
|
"types"
|
|
33
33
|
],
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@awlsn/pdfjs-full": "^4.
|
|
35
|
+
"@awlsn/pdfjs-full": "^4.3.1",
|
|
36
36
|
"@rollup/plugin-terser": "^0.4.4",
|
|
37
|
-
"@types/node": "^
|
|
38
|
-
"@vitest/browser": "^
|
|
39
|
-
"jsdom": "^
|
|
40
|
-
"typescript": "^
|
|
41
|
-
"vite": "^
|
|
42
|
-
"vitest": "^
|
|
43
|
-
"webdriverio": "^
|
|
37
|
+
"@types/node": "^22.16.5",
|
|
38
|
+
"@vitest/browser": "^3.2.4",
|
|
39
|
+
"jsdom": "^26.1.0",
|
|
40
|
+
"typescript": "^5.8.3",
|
|
41
|
+
"vite": "^6.3.5",
|
|
42
|
+
"vitest": "^3.2.4",
|
|
43
|
+
"webdriverio": "^9.18.1"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"perfect-debounce": "^1.0.0"
|
|
@@ -18,7 +18,7 @@ export declare class PdfjsViewerElement extends HTMLElement {
|
|
|
18
18
|
private setCssTheme;
|
|
19
19
|
private setViewerExtraStyles;
|
|
20
20
|
private injectExtraStylesLinks;
|
|
21
|
-
initialize: () => Promise<PdfjsViewerElementIframeWindow[
|
|
21
|
+
initialize: () => Promise<PdfjsViewerElementIframeWindow["PDFViewerApplication"]>;
|
|
22
22
|
}
|
|
23
23
|
declare global {
|
|
24
24
|
interface Window {
|