eKoopmans / html2pdf.js

Client-side HTML-to-PDF rendering using pure JS.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

To add a logo to the PDF page.

SKRNPC opened this issue · comments

Can I add a logo (image file) to each page of the PDF generated from dynamically changing HTML content? I was only able to add it to the first page generated with my code.

`generatePDF = () => {
// Logo görüntüsünü içeren bir img etiketi oluşturun
const logoImg = document.createElement("img");
logoImg.src = logo; // Logo görüntüsünün yolu
logoImg.style.position = "relative";
logoImg.style.left = "20px"; // Sol kenardan 20px içeriye yerleştirin
logoImg.style.top = "20px"; // Üst kenardan 20px içeriye yerleştirin
logoImg.style.maxHeight = "50mm"; // Maksimum yükseklik
logoImg.style.maxWidth = "50mm"; // Maksimum genişlik

// Container div oluşturun ve her sayfa için logo ve HTML içeriğini içine ekleyin
const container = document.createElement("div");
container.style.position = "relative";

// Logo her sayfada eklenir
container.appendChild(logoImg);

// HTML2PDF kütüphanesini kullanarak PDF oluşturun
const opt = {
filename: "logo_and_html.pdf",
image: { type: "jpeg", quality: 1 },
html2canvas: { scale: 2 },
jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
};

// İlk sayfa oluşturulur
let currentPageContent = this.createNewPageContentDiv(container);

// HTML içeriğini alın
const htmlContent = document.documentElement.innerHTML;

// HTML içeriğini içeren bir div oluşturun
currentPageContent.innerHTML = htmlContent;

// HTML2PDF kütüphanesini kullanarak PDF oluşturun
html2pdf()
.from(container)
.set(opt)
.set({
pagebreak: { mode: "avoid-all", before: "#page2el" },
})
.save();
};

createNewPageContentDiv(container) {
// Yeni bir sayfa için içerik div'i oluşturun
const newPageContent = document.createElement("div");
newPageContent.style.marginLeft = "50px"; // HTML içeriğini soldan 20px içeriye yerleştirir
newPageContent.style.marginTop = "30px"; // HTML içeriğini üstten 20px içeriye yerleştirir
newPageContent.style.marginRight = "50px";
// Container'a içerik div'ini ekleyin
container.appendChild(newPageContent);

return newPageContent;
}`

what you can do is, to have the image on your HTML in position where you want the logo to be, <img class="hidden print:block" src="URL" /> using TailwindCSS' print modifier, then try generating pdf?