Friday, 2 April 2021

Adding header to pdf [Snippet attached]

I am making a simple pdf generation react application,

Libraries used:

The following is the code that I have tried,

index.js:

<div className="App">
  <button onClick={exportToPdf}>Export</button>
  <div id="toRender">
    .
    .
    .
     Some lengthy content
    .
    .
    .
   </div>
</div>

So here on click over the export button, the pdf generation happens.

  const exportToPdf = () => {
    let elem = document.getElementById("toRender");
    elem.scrollIntoView();
    h2c(elem).then((canvas) => {
      const img = canvas.toDataURL("image/png", 1);
      //console.log(`"data:image/png;base64,${img}"`)

      const pdf = new jsPDF("p", "mm");

      const imgWidth = pdf.internal.pageSize.getWidth();
      const pageHeight = pdf.internal.pageSize.getHeight();
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;

      let position = 10;

      pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight, 100, 90);
      heightLeft -= pageHeight;

      // pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45);
      // pdf.line(3, 35, imgWidth - 3, 35)

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight);
        // pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45);
        heightLeft -= pageHeight;
      }

      //pdf.addImage(img, 'PNG', 0, 0)
      pdf.save("export.pdf");
    });
  };

The pdf generation works fine.

I need to implement header for all the dynamically generated pages. I have tried adding like pdf.text("<header> Some header content </header>"), but it doesn't work.

How to add header in all the pages while generating pdf?

Edit generate pdf with jspdf (forked)



from Adding header to pdf [Snippet attached]

No comments:

Post a Comment