I need to generate PDF from my web site page.
I have used JSPDF and HTML2Canvas for the same.
When I have tried to generate the PDF with large amount of data and image it has split image in 2 diffrent page. Please check attached screenshot for better understanding.
PDF Output
Below is my code snippet,
const handleDownloadPDF = async () => {
const cleanedDescription = description.replaceAll(/</?b>/g, '');
const replacedDescription = cleanedDescription.replaceAll(':', ':');
const containerWithPadding = document.createElement("div");
containerWithPadding.style.padding = "20px";
const container = document.createElement("div");
container.style.color = "#000000";
container.innerHTML = replacedDescription;
const spanElements = container.querySelectorAll("span");
spanElements.forEach(span => {
span.style.color = "#000000";
});
const imageElements = Array.from(container.querySelectorAll("img"));
await Promise.all(imageElements.map(async img => {
const imageUrl = img.src;
const imageData = await fetch(imageUrl).then(res => res.blob());
const dataUrl = await blobToDataURL(imageData);
img.src = dataUrl;
}));
containerWithPadding.appendChild(container);
const urlParts = window.location.pathname.split('/');
const fileName = urlParts[urlParts.length - 1];
html2pdf().from(containerWithPadding).save(`${project}_${fileName}.pdf`);
};
const blobToDataURL = (blob) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
};
Can anyone help me with the same?
Thanks in Advance
I need to generate PDF without split image in different page.