azyzz228
commented
3 months ago 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?
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; }`