adding header and footer for html2pdf

105 views Asked by At
  download() {
      var element = document.getElementById("element-to-print");

      html2pdf()
        .from(element)
        .set({
          margin: [25, 15, 15, 15],
          filename: '<?=$fname;?> as <?=trim(date("dmY"));?>.pdf',
          image: { type: "jpeg", quality: 0.98 },
          html2canvas: {
            scale: 2,
            logging: true,
            dpi: 192,
            letterRendering: true,
          },
          jsPDF: { unit: "mm", format: "a4", orientation: "p" },
          pagebreak: { before: ".page-break", avoid: "table" },

          header: {
            height: "20mm",
            contents: function (page, totalPages) {
              // Generate header content here
              return '<div style="text-align: center;">Header Content</div>';
            },
          },
          footer: {
            height: "15mm",
            contents: function (page, totalPages) {
              // Generate footer content here
              return (
                '<div style="text-align: center;">Footer Content - Page ' +
                page +
                " of " +
                totalPages +
                "</div>"
              );
            },
          },
        })
        .toPdf()
        .get("pdf")
        .then(function (pdf) {
          var totalPages = pdf.internal.getNumberOfPages();
          for (let i = 1; i <= totalPages; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setTextColor(150);
            pdf.text(0, 10, "[SULIT]");
            pdf.text(
              'Tarikh Cetakan: <?=trim(date("d/m/Y h:i A"));?> | Mukasurat: ' +
                i +
                "/" +
                totalPages +
                "",
              pdf.internal.pageSize.getWidth() - 85,
              pdf.internal.pageSize.getHeight() - 7
            );
          }
        })
        .save();
    },

I am trying to create pdf using html2pdf. In the given example the header and footer is text. instead of text. Is there any way to include HTML part as header and footer? To make my pdf more specific.

0

There are 0 answers