jspdf-utils 0.1.4 → 0.1.5
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/dist/html-to-pdf.d.ts +1 -5
- package/dist/html-to-pdf.js +132 -155
- package/package.json +1 -1
package/dist/html-to-pdf.d.ts
CHANGED
|
@@ -38,11 +38,7 @@ export interface PrepareResult {
|
|
|
38
38
|
/** Compute derived layout values from options. */
|
|
39
39
|
declare function computeLayout(container: HTMLElement, opts: PageOptions): Layout;
|
|
40
40
|
/**
|
|
41
|
-
* Clone an element
|
|
42
|
-
* (Tailwind, Bootstrap, etc.) cannot interfere with PDF rendering.
|
|
43
|
-
*
|
|
44
|
-
* Only @font-face rules are copied into the iframe so custom fonts still work.
|
|
45
|
-
* The returned element's `.remove()` method cleans up the iframe automatically.
|
|
41
|
+
* Clone an element and position it off-screen at print width for measurement.
|
|
46
42
|
*/
|
|
47
43
|
declare function createPrintClone(source: HTMLElement, pageWidth?: number): HTMLElement;
|
|
48
44
|
/**
|
package/dist/html-to-pdf.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
1
|
+
import N from "html2canvas";
|
|
2
|
+
const T = {
|
|
3
3
|
a0: [841, 1189],
|
|
4
4
|
a1: [594, 841],
|
|
5
5
|
a2: [420, 594],
|
|
@@ -10,7 +10,7 @@ const N = {
|
|
|
10
10
|
letter: [215.9, 279.4],
|
|
11
11
|
legal: [215.9, 355.6],
|
|
12
12
|
tabloid: [279.4, 431.8]
|
|
13
|
-
},
|
|
13
|
+
}, B = {
|
|
14
14
|
a0: 40,
|
|
15
15
|
a1: 35,
|
|
16
16
|
a2: 30,
|
|
@@ -22,228 +22,205 @@ const N = {
|
|
|
22
22
|
legal: 25.4,
|
|
23
23
|
tabloid: 25
|
|
24
24
|
};
|
|
25
|
-
function x(
|
|
26
|
-
const
|
|
25
|
+
function x(i = {}) {
|
|
26
|
+
const o = i.format ?? "a4", [n, t] = T[o], r = i.pageWidth ?? n, e = i.pageHeight ?? t, a = B[o], c = {
|
|
27
27
|
top: a,
|
|
28
28
|
right: a,
|
|
29
29
|
bottom: a,
|
|
30
30
|
left: a
|
|
31
31
|
};
|
|
32
32
|
return {
|
|
33
|
-
unit:
|
|
34
|
-
format:
|
|
35
|
-
pageWidth:
|
|
36
|
-
pageHeight:
|
|
37
|
-
margin: { ...c, ...
|
|
33
|
+
unit: i.unit ?? "mm",
|
|
34
|
+
format: o,
|
|
35
|
+
pageWidth: r,
|
|
36
|
+
pageHeight: e,
|
|
37
|
+
margin: { ...c, ...i.margin }
|
|
38
38
|
};
|
|
39
39
|
}
|
|
40
|
-
function
|
|
41
|
-
const
|
|
42
|
-
return { renderedWidth:
|
|
40
|
+
function A(i, o) {
|
|
41
|
+
const n = i.offsetWidth, t = o.pageWidth - o.margin.left - o.margin.right, r = t / n, a = (o.pageHeight - o.margin.top - o.margin.bottom) / r;
|
|
42
|
+
return { renderedWidth: n, scale: r, contentWidthMm: t, pageContentPx: a };
|
|
43
43
|
}
|
|
44
|
-
function v(
|
|
45
|
-
const
|
|
46
|
-
Object.assign(
|
|
44
|
+
function v(i, o = 210) {
|
|
45
|
+
const n = i.cloneNode(!0);
|
|
46
|
+
return Object.assign(n.style, {
|
|
47
47
|
position: "fixed",
|
|
48
48
|
top: "0",
|
|
49
|
-
left: "
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
border: "none",
|
|
49
|
+
left: "0",
|
|
50
|
+
boxSizing: "border-box",
|
|
51
|
+
width: o + "mm",
|
|
53
52
|
opacity: "0.000001",
|
|
54
53
|
pointerEvents: "none"
|
|
55
|
-
}), document.body.appendChild(
|
|
56
|
-
const e = i.contentDocument;
|
|
57
|
-
if (!e) throw new Error("Could not access iframe document");
|
|
58
|
-
const o = e.createElement("base");
|
|
59
|
-
o.href = document.baseURI, e.head.appendChild(o);
|
|
60
|
-
const t = [];
|
|
61
|
-
for (const c of document.styleSheets)
|
|
62
|
-
try {
|
|
63
|
-
for (const l of c.cssRules)
|
|
64
|
-
l instanceof CSSFontFaceRule && t.push(l.cssText);
|
|
65
|
-
} catch {
|
|
66
|
-
}
|
|
67
|
-
if (t.length > 0) {
|
|
68
|
-
const c = e.createElement("style");
|
|
69
|
-
c.textContent = t.join(`
|
|
70
|
-
`), e.head.appendChild(c);
|
|
71
|
-
}
|
|
72
|
-
const a = r.cloneNode(!0);
|
|
73
|
-
return Object.assign(a.style, {
|
|
74
|
-
boxSizing: "border-box",
|
|
75
|
-
width: n + "mm"
|
|
76
|
-
}), e.body.style.margin = "0", e.body.appendChild(a), a.remove = () => i.remove(), a;
|
|
54
|
+
}), document.body.appendChild(n), n;
|
|
77
55
|
}
|
|
78
|
-
function
|
|
79
|
-
for (const
|
|
80
|
-
const
|
|
81
|
-
if (
|
|
82
|
-
for (const
|
|
83
|
-
|
|
84
|
-
|
|
56
|
+
function W(i) {
|
|
57
|
+
for (const o of i.querySelectorAll("table")) {
|
|
58
|
+
const n = o.getAttribute("cellpadding");
|
|
59
|
+
if (n) {
|
|
60
|
+
for (const t of o.querySelectorAll("th, td"))
|
|
61
|
+
t.style.padding || (t.style.padding = n + "px");
|
|
62
|
+
o.removeAttribute("cellpadding");
|
|
85
63
|
}
|
|
86
64
|
}
|
|
87
65
|
}
|
|
88
|
-
function
|
|
89
|
-
for (const
|
|
90
|
-
|
|
66
|
+
function C(i, o) {
|
|
67
|
+
for (const n of Array.from(
|
|
68
|
+
i.querySelectorAll(":scope > table")
|
|
91
69
|
)) {
|
|
92
|
-
if (
|
|
93
|
-
const
|
|
94
|
-
if (
|
|
95
|
-
const
|
|
96
|
-
let
|
|
70
|
+
if (n.offsetHeight <= o) continue;
|
|
71
|
+
const t = Array.from(n.rows);
|
|
72
|
+
if (t.length === 0) continue;
|
|
73
|
+
const r = t[0].querySelector("th") !== null, e = r ? t[0] : null, a = r ? t.slice(1) : t, c = e ? e.offsetHeight : 0, f = o - c - 2, h = [];
|
|
74
|
+
let l = [], d = 0;
|
|
97
75
|
for (const s of a) {
|
|
98
76
|
const g = s.offsetHeight;
|
|
99
|
-
|
|
77
|
+
d + g > f && l.length > 0 && (h.push(l), l = [], d = 0), l.push(s), d += g;
|
|
100
78
|
}
|
|
101
|
-
|
|
102
|
-
for (const s of
|
|
103
|
-
const g =
|
|
104
|
-
|
|
79
|
+
l.length > 0 && h.push(l);
|
|
80
|
+
for (const s of h) {
|
|
81
|
+
const g = n.cloneNode(!1);
|
|
82
|
+
e && g.appendChild(e.cloneNode(!0));
|
|
105
83
|
for (const m of s) g.appendChild(m.cloneNode(!0));
|
|
106
|
-
|
|
84
|
+
n.parentNode.insertBefore(g, n);
|
|
107
85
|
}
|
|
108
|
-
|
|
86
|
+
n.remove();
|
|
109
87
|
}
|
|
110
88
|
}
|
|
111
|
-
function P(
|
|
112
|
-
const i
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
if (o.offsetHeight <= n || o.tagName === "TABLE")
|
|
89
|
+
function P(i, o) {
|
|
90
|
+
for (const n of Array.from(i.querySelectorAll(":scope > *"))) {
|
|
91
|
+
const t = n;
|
|
92
|
+
if (t.offsetHeight <= o || t.tagName === "TABLE")
|
|
116
93
|
continue;
|
|
117
|
-
const
|
|
118
|
-
|
|
94
|
+
const r = t.tagName, e = t.getAttribute("style") || "", a = getComputedStyle(t).width, c = (t.textContent || "").split(/\s+/).filter(Boolean), f = document.createElement(r);
|
|
95
|
+
f.setAttribute("style", e), Object.assign(f.style, {
|
|
119
96
|
position: "absolute",
|
|
120
97
|
visibility: "hidden",
|
|
121
|
-
width:
|
|
122
|
-
}),
|
|
123
|
-
const
|
|
124
|
-
let
|
|
125
|
-
for (;
|
|
126
|
-
let
|
|
127
|
-
for (;
|
|
128
|
-
const
|
|
129
|
-
|
|
98
|
+
width: a
|
|
99
|
+
}), i.appendChild(f);
|
|
100
|
+
const h = [];
|
|
101
|
+
let l = 0;
|
|
102
|
+
for (; l < c.length; ) {
|
|
103
|
+
let d = l + 1, s = c.length;
|
|
104
|
+
for (; d < s; ) {
|
|
105
|
+
const m = Math.ceil((d + s) / 2);
|
|
106
|
+
f.textContent = c.slice(l, m).join(" "), f.offsetHeight <= o ? d = m : s = m - 1;
|
|
130
107
|
}
|
|
131
|
-
const
|
|
132
|
-
|
|
108
|
+
const g = document.createElement(r);
|
|
109
|
+
g.setAttribute("style", e), g.textContent = c.slice(l, d).join(" "), h.push(g), l = d;
|
|
133
110
|
}
|
|
134
|
-
|
|
135
|
-
for (const
|
|
136
|
-
|
|
137
|
-
|
|
111
|
+
f.remove();
|
|
112
|
+
for (const d of h)
|
|
113
|
+
t.parentNode.insertBefore(d, t);
|
|
114
|
+
t.remove();
|
|
138
115
|
}
|
|
139
116
|
}
|
|
140
|
-
function
|
|
141
|
-
const
|
|
142
|
-
for (const
|
|
143
|
-
const
|
|
144
|
-
if (
|
|
145
|
-
const
|
|
146
|
-
|
|
117
|
+
function M(i, o) {
|
|
118
|
+
const n = Array.from(i.children);
|
|
119
|
+
for (const t of n) {
|
|
120
|
+
const r = t.offsetTop, e = r + t.offsetHeight, a = (Math.floor(r / o) + 1) * o;
|
|
121
|
+
if (e > a && t.offsetHeight <= o) {
|
|
122
|
+
const c = document.createElement("div");
|
|
123
|
+
c.style.height = a - r + 1 + "px", t.parentNode.insertBefore(c, t);
|
|
147
124
|
}
|
|
148
125
|
}
|
|
149
126
|
}
|
|
150
|
-
function
|
|
151
|
-
const
|
|
152
|
-
|
|
153
|
-
const
|
|
154
|
-
return
|
|
155
|
-
clone:
|
|
156
|
-
layout:
|
|
157
|
-
options:
|
|
158
|
-
cleanup: () =>
|
|
127
|
+
function j(i, o = {}) {
|
|
128
|
+
const n = x(o), t = v(i, n.pageWidth);
|
|
129
|
+
W(t);
|
|
130
|
+
const r = A(t, n);
|
|
131
|
+
return C(t, r.pageContentPx), P(t, r.pageContentPx), M(t, r.pageContentPx), {
|
|
132
|
+
clone: t,
|
|
133
|
+
layout: r,
|
|
134
|
+
options: n,
|
|
135
|
+
cleanup: () => t.remove()
|
|
159
136
|
};
|
|
160
137
|
}
|
|
161
|
-
async function
|
|
162
|
-
const { clone:
|
|
138
|
+
async function D(i, o, n = {}) {
|
|
139
|
+
const { clone: t, layout: r, options: e, cleanup: a } = j(o, n);
|
|
163
140
|
try {
|
|
164
141
|
await new Promise((c) => {
|
|
165
|
-
|
|
142
|
+
i.html(t, {
|
|
166
143
|
callback: () => c(),
|
|
167
|
-
width:
|
|
168
|
-
windowWidth:
|
|
144
|
+
width: r.contentWidthMm,
|
|
145
|
+
windowWidth: r.renderedWidth,
|
|
169
146
|
margin: [
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
147
|
+
e.margin.top,
|
|
148
|
+
e.margin.right,
|
|
149
|
+
e.margin.bottom,
|
|
150
|
+
e.margin.left
|
|
174
151
|
]
|
|
175
152
|
});
|
|
176
153
|
});
|
|
177
154
|
} finally {
|
|
178
155
|
a();
|
|
179
156
|
}
|
|
180
|
-
return
|
|
157
|
+
return i;
|
|
181
158
|
}
|
|
182
|
-
async function
|
|
183
|
-
const { imageFormat:
|
|
184
|
-
|
|
185
|
-
const c =
|
|
186
|
-
|
|
159
|
+
async function F(i, o = {}) {
|
|
160
|
+
const { imageFormat: n = "JPEG", imageQuality: t = 1, scale: r = 2 } = o, e = x(o), a = v(i, e.pageWidth);
|
|
161
|
+
a.style.opacity = "1", a.style.left = "-99999px", W(a);
|
|
162
|
+
const c = A(a, e);
|
|
163
|
+
C(a, c.pageContentPx), P(a, c.pageContentPx), M(a, c.pageContentPx);
|
|
187
164
|
try {
|
|
188
|
-
const
|
|
189
|
-
scale:
|
|
165
|
+
const f = await N(a, {
|
|
166
|
+
scale: r,
|
|
190
167
|
backgroundColor: "#ffffff"
|
|
191
|
-
}), { jsPDF:
|
|
192
|
-
orientation:
|
|
168
|
+
}), { jsPDF: h } = await import("jspdf"), l = e.pageWidth - e.margin.left - e.margin.right, d = e.pageHeight - e.margin.top - e.margin.bottom, s = f.width, g = d / l * s, m = Math.ceil(f.height / g), H = e.pageWidth > e.pageHeight ? "l" : "p", w = new h({
|
|
169
|
+
orientation: H,
|
|
193
170
|
unit: "mm",
|
|
194
|
-
format: [
|
|
171
|
+
format: [e.pageWidth, e.pageHeight]
|
|
195
172
|
});
|
|
196
|
-
for (let
|
|
197
|
-
const
|
|
173
|
+
for (let u = 0; u < m; u++) {
|
|
174
|
+
const p = Math.min(
|
|
198
175
|
g,
|
|
199
|
-
|
|
200
|
-
),
|
|
201
|
-
|
|
202
|
-
const
|
|
203
|
-
if (!
|
|
204
|
-
|
|
205
|
-
|
|
176
|
+
f.height - u * g
|
|
177
|
+
), y = document.createElement("canvas");
|
|
178
|
+
y.width = s, y.height = p;
|
|
179
|
+
const b = y.getContext("2d");
|
|
180
|
+
if (!b) throw new Error("Could not get canvas context");
|
|
181
|
+
b.fillStyle = "#ffffff", b.fillRect(0, 0, s, p), b.drawImage(
|
|
182
|
+
f,
|
|
206
183
|
0,
|
|
207
|
-
|
|
184
|
+
u * g,
|
|
208
185
|
s,
|
|
209
|
-
|
|
186
|
+
p,
|
|
210
187
|
0,
|
|
211
188
|
0,
|
|
212
189
|
s,
|
|
213
|
-
|
|
190
|
+
p
|
|
214
191
|
);
|
|
215
|
-
const
|
|
216
|
-
`image/${
|
|
217
|
-
|
|
192
|
+
const E = y.toDataURL(
|
|
193
|
+
`image/${n.toLowerCase()}`,
|
|
194
|
+
t
|
|
218
195
|
);
|
|
219
|
-
|
|
220
|
-
const
|
|
221
|
-
|
|
196
|
+
u > 0 && w.addPage([e.pageWidth, e.pageHeight], H);
|
|
197
|
+
const S = p / s * l;
|
|
198
|
+
w.addImage(
|
|
199
|
+
E,
|
|
200
|
+
n,
|
|
201
|
+
e.margin.left,
|
|
202
|
+
e.margin.top,
|
|
203
|
+
l,
|
|
222
204
|
S,
|
|
223
|
-
i,
|
|
224
|
-
t.margin.left,
|
|
225
|
-
t.margin.top,
|
|
226
|
-
f,
|
|
227
|
-
M,
|
|
228
205
|
void 0,
|
|
229
206
|
"FAST"
|
|
230
207
|
);
|
|
231
208
|
}
|
|
232
|
-
return
|
|
209
|
+
return w;
|
|
233
210
|
} finally {
|
|
234
211
|
a.remove();
|
|
235
212
|
}
|
|
236
213
|
}
|
|
237
214
|
export {
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
215
|
+
B as PAGE_MARGINS,
|
|
216
|
+
T as PAGE_SIZES,
|
|
217
|
+
A as computeLayout,
|
|
241
218
|
v as createPrintClone,
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
219
|
+
M as insertPageBreakSpacers,
|
|
220
|
+
W as normalizeTableAttributes,
|
|
221
|
+
j as prepare,
|
|
222
|
+
D as renderHTML,
|
|
223
|
+
F as renderImagePDF,
|
|
224
|
+
C as splitOversizedTables,
|
|
248
225
|
P as splitOversizedText
|
|
249
226
|
};
|
package/package.json
CHANGED