I'm generating PDFs using the html2pdfjs library in a React application, but I'm having trouble adding a logo to each page. Here's my current code structure:
generatePDF = () => {
const logoImg = document.createElement("img");
logoImg.src = logo;
logoImg.style.position = "relative";
logoImg.style.left = "20px";
logoImg.style.top = "20px";
logoImg.style.maxHeight = "50mm";
logoImg.style.maxWidth = "50mm";
const container = document.createElement("div");
container.style.position = "relative";
container.appendChild(logoImg);
const opt = {
filename: "logo_and_html.pdf",
image: { type: "jpeg", quality: 1 },
html2canvas: { scale: 2 },
jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
};
let currentPageContent = this.createNewPageContentDiv(container, logo);
const htmlContent = document.documentElement.innerHTML;
currentPageContent.innerHTML = htmlContent;
html2pdf()
.from(container)
.set(opt)
.set({
pagebreak: { mode: "avoid-all", before: "#page2el" },
})
.save();
}generatePDF = () => {
const logoImg = document.createElement("img");
logoImg.src = logo;
logoImg.style.position = "relative";
logoImg.style.left = "20px";
logoImg.style.top = "20px";
logoImg.style.maxHeight = "50mm";
logoImg.style.maxWidth = "50mm";
const container = document.createElement("div");
container.style.position = "relative";
container.appendChild(logoImg);
const opt = {
filename: "logo_and_html.pdf",
image: { type: "jpeg", quality: 1 },
html2canvas: { scale: 2 },
jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
};
let currentPageContent = this.createNewPageContentDiv(container, logo);
const htmlContent = document.documentElement.innerHTML;
currentPageContent.innerHTML = htmlContent;
html2pdf()
.from(container)
.set(opt)
.set({
pagebreak: { mode: "avoid-all", before: "#page2el" },
})
.save();
};
createNewPageContentDiv(container, logo) {
const newPageContent = document.createElement("div");
newPageContent.style.marginLeft = "50px";
newPageContent.style.marginTop = "60px";
newPageContent.style.marginRight = "50px";
newPageContent.style.position = "relative";
const logoImg = document.createElement("img");
logoImg.src = logo;
logoImg.style.position = "relative";
logoImg.style.left = "20px";
logoImg.style.top = "20px";
logoImg.style.maxHeight = "50mm";
logoImg.style.maxWidth = "50mm";
newPageContent.appendChild(logoImg);
container.appendChild(newPageContent);
return newPageContent;
}
With the above code, I'm attempting to add the logo to each page, but only the first page displays the logo. What approach should I take to display the same logo on every page? Any help would be appreciated. Thanks in advance.