How to Add a Logo to Each Page of HTML Content and Generate a PDF?

Question

I'm facing an issue generating a PDF by adding a logo to HTML content so that it appears on every page. Here's my code snippet:

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"; // Position it absolutely within the container
    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";
    container.appendChild(logoImg); // Logo her sayfada eklenir

    // 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 için içerik div'ini oluşturun
    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 50px içeriye yerleştirir
    newPageContent.style.marginTop = "30px"; // HTML içeriğini üstten 30px içeriye yerleştirir
    newPageContent.style.marginRight = "50px";
    // Container'a içerik div'ini ekleyin
    container.appendChild(newPageContent);

    return newPageContent;
  }

Despite using this method to add the logo to each page, I'm still unsuccessful. How can I display the logo on every page? Thanks.

Answer 1

To ensure that the logo is displayed on every page of the PDF generated using HTML2PDF, you need to use the afterPageContent option provided by HTML2PDF. This option allows you to add content after each page is generated.

 generatePDF = () => {
    // HTML2PDF options
    const opt = {
        filename: "logo_and_html.pdf",
        image: { type: "jpeg", quality: 1 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
        pagebreak: { mode: "avoid-all", before: "#page2el" },
        afterPageContent: (currentPage, pageCount) => {
            const logoImg = document.createElement("img");
            logoImg.src = logo; 
            logoImg.style.position = "absolute"; 
            logoImg.style.left = "20px"; 
            logoImg.style.top = "20px"; 
            logoImg.style.maxHeight = "50mm"; 
            logoImg.style.maxWidth = "50mm"; 
            const logoContainer = document.createElement("div");
            logoContainer.style.position = "relative";
            logoContainer.appendChild(logoImg);

            return logoContainer;
        }
    };

    html2pdf()
        .from(document.body)
        .set(opt)
        .save();
};