Page Contents At Bottom Getting Cut on Multiple Pages.

[syjaliha]

Below is my Code where the html contents are downloaded into pdf

  const input = document.getElementById('print');
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'pt',
    format: 'a4',
    compress:true,
  });

  //check for Screen dimensions
  let srcwidth = document.getElementById('print').scrollWidth;

  pdf
    .html(input, {
      margin: [55, 0, 40, -2],
      autoPaging: 'text',
      html2canvas: {
        scale: 595.26 / srcwidth, //595.26 is the width of A4 page
        scrollY: 0,
      },
    })
    .then(() => {
      const pageCount = pdf.internal.getNumberOfPages();
      const pageWidth = pdf.internal.pageSize.getWidth();
      var pageHeight = pdf.internal.pageSize.getHeight();

      //loop to set header/ footer, style, alignment, text style to the page
      for (let i = 1; i <= pageCount; i++) {
        pdf.rect(
          5,
          5,
          pdf.internal.pageSize.width - 13,
          pdf.internal.pageSize.height - 13,
          'S',
        );
        pdf.setPage(i);
        pdf.viewerPreferences({"FitWindow":true,"ViewArea":"MediaBox","ViewClip":"MediaBox" });
        var header = 'CSMM 5A - Vessel Cyber Security Self Assessment';
        var headerLine =
          '_________________________________________________________________________________';
        const footer = `Page ${i} of ${pageCount}`;
        var submitedDate =
          'Date Last Edited: ' +
          this.formatDateTime(this.state.vesselAssesementData.editedOn);

        // if (i > 1) {
        pdf
          .setFont('sans-serif', '', 'bold')
          .setFontSize(14)
          .text(header, 20, 25, { baseline: 'top' });
        pdf.addImage(kline, 'PNG', 530, 12, 35, 35);
        pdf.text(headerLine, 10, 38, { baseline: 'top' });
        // }

        pdf
          .setFont('Arial, sans-serif', '', 'normal')
          .setFontSize(9)
          .text(
            submitedDate,
            pageWidth / 6.5 - pdf.getTextWidth(submitedDate) / 2,
            pageHeight - 18,
            { baseline: 'bottom' },
          );

        pdf
          .setFont('Arial, sans-serif', '', 'normal')
          .setFontSize(9)
          .text(
            footer,
            pageWidth / 1.08 - pdf.getTextWidth(footer) / 2,
            pageHeight - 18,

            { baseline: 'bottom|right' },
          );
      }
      pdf.save(
        `${
          'VesselCyberSecuritySelfAssessmentReport_' +
          this.state.vesselAssesementData.uniqueId
        }.pdf`,
      );

Below is image attached where the issue occurs.

Solution for this ASAP will be very helpful.

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[ChamkhiAnas]

@syjaliha have u found any solution for this problem plz ?

[aswathykrishna18]

Anybody have found any solution for this?

[mustafahalabi]

you need to add the option autoPaging:'text', which "Trys not to cut text in half across page breaks."

doc.html(document.body, { x: 0, y: 0, autoPaging: 'text', margin: [700, 0, 700, 0], callback: () => { doc.save(); }, });