pdfjs-viewer-element 2.7.1 → 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 +34 -27
- package/dist/pdfjs-viewer-element.js +35 -32
- package/package.json +9 -9
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.
|
|
46
|
+
|
|
47
|
+
The prebuilt comes with each PDF.js release. [PDF.JS releases](https://github.com/mozilla/pdf.js/releases)
|
|
48
|
+
|
|
49
|
+
✅ All v4 and v3 releases are fully supported.
|
|
43
50
|
|
|
44
|
-
|
|
51
|
+
🚧 For v5 releases - there are some breaking changes that affects styles injecting, and theme changing not work anymore.
|
|
45
52
|
|
|
46
|
-
[
|
|
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>
|
|
@@ -1,55 +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
|
-
let
|
|
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 = [];
|
|
14
14
|
const f = (c, m) => (a = async function(d, u, w) {
|
|
15
15
|
return await d.apply(u, w);
|
|
16
16
|
}(s, c, m), a.finally(() => {
|
|
17
|
-
if (a = null,
|
|
17
|
+
if (a = null, i.trailing && l && !n) {
|
|
18
18
|
const d = f(c, l);
|
|
19
19
|
return l = null, d;
|
|
20
20
|
}
|
|
21
21
|
}), a);
|
|
22
22
|
return function(...c) {
|
|
23
|
-
return a ? (
|
|
24
|
-
const d = !n &&
|
|
23
|
+
return a ? (i.trailing && (l = c), a) : new Promise((m) => {
|
|
24
|
+
const d = !n && i.leading;
|
|
25
25
|
clearTimeout(n), n = setTimeout(() => {
|
|
26
26
|
n = null;
|
|
27
|
-
const u =
|
|
27
|
+
const u = i.leading ? e : f(this, c);
|
|
28
28
|
for (const w of h) w(u);
|
|
29
29
|
h = [];
|
|
30
|
-
}, r), d ? (
|
|
30
|
+
}, r), d ? (e = f(this, c), m(e)) : h.push(m);
|
|
31
31
|
});
|
|
32
32
|
};
|
|
33
33
|
}(async (s) => {
|
|
34
34
|
await y("iframe", this.shadowRoot), s();
|
|
35
35
|
}, 0, { leading: !0 }), this.setViewerExtraStyles = (s, r = "extra") => {
|
|
36
|
-
var
|
|
37
|
-
if (!s) return void ((n = (
|
|
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
38
|
if (((l = (a = this.iframe.contentDocument) == null ? void 0 : a.head.querySelector(`style[${r}]`)) == null ? void 0 : l.innerHTML) === s) return;
|
|
39
|
-
const
|
|
40
|
-
|
|
39
|
+
const i = document.createElement("style");
|
|
40
|
+
i.innerHTML = s, i.setAttribute(r, ""), (h = this.iframe.contentDocument) == null || h.head.appendChild(i);
|
|
41
41
|
}, this.injectExtraStylesLinks = (s) => {
|
|
42
42
|
s && s.replace(/'|]|\[/g, "").split(",").map((r) => r.trim()).forEach((r) => {
|
|
43
43
|
var n, a;
|
|
44
44
|
if ((n = this.iframe.contentDocument) == null ? void 0 : n.head.querySelector(`link[href="${r}"]`)) return;
|
|
45
|
-
const
|
|
46
|
-
|
|
45
|
+
const e = document.createElement("link");
|
|
46
|
+
e.rel = "stylesheet", e.href = r, (a = this.iframe.contentDocument) == null || a.head.appendChild(e);
|
|
47
47
|
});
|
|
48
48
|
}, this.initialize = () => new Promise(async (s) => {
|
|
49
49
|
var r;
|
|
50
50
|
await y("iframe", this.shadowRoot), (r = this.iframe) == null || r.addEventListener("load", async () => {
|
|
51
|
-
var
|
|
52
|
-
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);
|
|
53
53
|
}, { once: !0 });
|
|
54
54
|
});
|
|
55
55
|
const t = this.attachShadow({ mode: "open" }), o = document.createElement("template");
|
|
@@ -63,8 +63,8 @@ class x extends HTMLElement {
|
|
|
63
63
|
}
|
|
64
64
|
connectedCallback() {
|
|
65
65
|
this.iframe = this.shadowRoot.querySelector("iframe"), document.addEventListener("webviewerloaded", async () => {
|
|
66
|
-
var t, o, s, r,
|
|
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), (
|
|
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);
|
|
68
68
|
});
|
|
69
69
|
}
|
|
70
70
|
attributeChangedCallback(t) {
|
|
@@ -73,10 +73,10 @@ class x extends HTMLElement {
|
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
75
|
getIframeSrc() {
|
|
76
|
-
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;
|
|
77
77
|
return `
|
|
78
78
|
${o}${D}?file=
|
|
79
|
-
${encodeURIComponent(t)}#page=${s}&zoom=${
|
|
79
|
+
${encodeURIComponent(t)}#page=${s}&zoom=${e}&pagemode=${n}&search=${r}&phrase=${i}&textLayer=
|
|
80
80
|
${l}&disableWorker=
|
|
81
81
|
${a}&disableFontFace=
|
|
82
82
|
${h}&disableRange=
|
|
@@ -86,7 +86,7 @@ ${m}&verbosity=
|
|
|
86
86
|
${d}
|
|
87
87
|
${u ? "&locale=" + u : ""}&viewerCssTheme=
|
|
88
88
|
${w}&viewerExtraStyles=
|
|
89
|
-
${
|
|
89
|
+
${S}
|
|
90
90
|
${g ? "&nameddest=" + g : ""}`;
|
|
91
91
|
}
|
|
92
92
|
mountViewer(t) {
|
|
@@ -100,16 +100,19 @@ ${g ? "&nameddest=" + g : ""}`;
|
|
|
100
100
|
return Object.keys(b).includes(t) ? b[t] : b[v];
|
|
101
101
|
}
|
|
102
102
|
setCssTheme(t) {
|
|
103
|
-
var o, s, r;
|
|
103
|
+
var o, s, r, i;
|
|
104
104
|
if (t === b.DARK) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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) {
|
|
109
111
|
`)[1].split(`
|
|
110
112
|
}`)[0]);
|
|
111
|
-
|
|
112
|
-
|
|
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();
|
|
113
116
|
}
|
|
114
117
|
}
|
|
115
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": "^22.
|
|
38
|
-
"@vitest/browser": "^3.
|
|
39
|
-
"jsdom": "^26.
|
|
40
|
-
"typescript": "^5.
|
|
41
|
-
"vite": "^6.
|
|
42
|
-
"vitest": "^3.
|
|
43
|
-
"webdriverio": "^9.
|
|
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"
|