Skip to content

Commit

Permalink
fix: handle lazy images in download and print pdf
Browse files Browse the repository at this point in the history
  • Loading branch information
cristinecula committed Dec 11, 2023
1 parent 831dd82 commit 0fd7f48
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 30 deletions.
57 changes: 32 additions & 25 deletions lib/pdf.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,34 @@
export const
fit = (rect, bounds) => {
import { invoke } from '@neovici/cosmoz-utils/function';

export const fit = (rect, bounds) => {
const rectRatio = rect.width / rect.height,
boundsRatio = bounds.width / bounds.height;

return rectRatio > boundsRatio
? {
width: bounds.width,
height: rect.height * (bounds.width / rect.width)
}
width: bounds.width,
height: rect.height * (bounds.width / rect.width),
}
: {
width: rect.width * (bounds.height / rect.height),
height: bounds.height
};
width: rect.width * (bounds.height / rect.height),
height: bounds.height,

Check warning on line 14 in lib/pdf.js

View check run for this annotation

Codecov / codecov/patch

lib/pdf.js#L13-L14

Added lines #L13 - L14 were not covered by tests
};
},

create = async (urls, credentials) => {
const options = { credentials: credentials ? 'include' : 'omit' },
[{ jsPDF }, ...responses$] = await Promise.all([import('jspdf'), ...urls.map(
async url => {
[{ jsPDF }, ...responses$] = await Promise.all([
import('jspdf'),
...urls.map(async (_url) => {
const url = await Promise.resolve(invoke(_url));
const response = await fetch(url, options);
return response.ok
? {
url,
data: new Uint8Array(await response.arrayBuffer())
}
url,
data: new Uint8Array(await response.arrayBuffer()),
}
: undefined;
}
)]),
}),
]),
responses = responses$.filter(Boolean);

if (responses.length < 1) {
Expand All @@ -36,32 +38,37 @@ export const
const pdf = new jsPDF(); // eslint-disable-line new-cap

responses.filter(Boolean).forEach(({ url, data }, i) => {
const
padding = 2, //in mm
{ internal: { pageSize }} = pdf,
const padding = 2, //in mm
{
internal: { pageSize },
} = pdf,
{ width, height } = fit(pdf.getImageProperties(data), {
width: pageSize.getWidth() - padding * 2,
height: pageSize.getHeight() - padding * 2
height: pageSize.getHeight() - padding * 2,
});
if (i > 0) {
pdf.addPage();
}
pdf.addImage(data, url.split('.').pop().toUpperCase(), padding, padding, width, height);

pdf.addImage(
data,
url.split('.').pop().toUpperCase(),
padding,
padding,
width,
height,
);
});
return pdf.output('blob');
},

downloadBlob = (blob, filename) => {
const url = URL.createObjectURL(blob),
a = document.body.appendChild(document.createElement('a'));
a.href = url;
a.download = `${ filename }.pdf`;
a.download = `${filename}.pdf`;
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
},

download = async (urls, filename, credentials) => {
const blob = await create(urls, credentials);
if (blob) {
Expand Down
11 changes: 8 additions & 3 deletions lib/print.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { invoke } from '@neovici/cosmoz-utils/function';
import { html, render } from 'lit-html';
import { until } from 'lit-html/directives/until.js';

const waitFor = (condition) =>
new Promise((resolve) => {
Expand All @@ -20,14 +22,17 @@ export const print = ({ images }) => {
page-break-after: always;
max-height: 100%;
width: 100%;
}</style
>${images.map((src) => html`<img src="${src}" />`)}`,
}
</style>
${images.map(
(src) => html`<img src="${until(Promise.resolve(invoke(src)))}" />`,
)}`,

Check warning on line 29 in lib/print.js

View check run for this annotation

Codecov / codecov/patch

lib/print.js#L25-L29

Added lines #L25 - L29 were not covered by tests
pout.document.body,
);

waitFor(() =>
Array.from(pout.document.querySelectorAll('img')).every(
(img) => img.complete,
(img) => img.src && img.complete,

Check warning on line 35 in lib/print.js

View check run for this annotation

Codecov / codecov/patch

lib/print.js#L35

Added line #L35 was not covered by tests
),
)
.then(() => pout.print())
Expand Down
7 changes: 5 additions & 2 deletions stories/data.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
export const images = [
'stories/images/stockholm.jpg',
'this-is-a-loading-error.jpg',
'stories/images/a_size.png',
'stories/images/strasbourg.jpg',
() => 'stories/images/a_size.png',
() =>
new Promise((resolve) =>
setTimeout(() => resolve('stories/images/strasbourg.jpg'), 500),
),
];

0 comments on commit 0fd7f48

Please sign in to comment.