Is it possible to add a logo to each page using html2pdfjs in a React application?

29 Views Asked by At

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.

0

There are 0 best solutions below