Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

To add a logo to the PDF page. #683

Open
SKRNPC opened this issue Feb 28, 2024 · 1 comment
Open

To add a logo to the PDF page. #683

SKRNPC opened this issue Feb 28, 2024 · 1 comment

Comments

@SKRNPC
Copy link

SKRNPC commented Feb 28, 2024

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;
}`

@azyzz228
Copy link

azyzz228 commented Apr 2, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants