Skip to content

How to add margin between two continuous page of pdf (using html to Canvas method to generate the PDF) #2961

Closed
@NayanMiyatra

Description

@NayanMiyatra

I'm using Angular with jsPDF plugin..

This is my .ts code to generate the PDF

  pdf() {
    const pdf = new jspdf(); // A4 size page of PDF
    const pName = JSON.parse(window.localStorage.getItem('programName'));
    const projectName = JSON.parse(window.localStorage.getItem('projectName'));
    const pNo = JSON.parse(window.localStorage.getItem('programNumber'));
    const projectNo = JSON.parse(window.localStorage.getItem('projectNumber'));
    const currentdate = new Date();
    const datetime = (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear()
    const runDate = 'Run Date: ' + moment(datetime).format('MM/DD/YYYY');
    const data = document.getElementById('docreview');
    const margin = 3;

    html2canvas(data).then(canvas => {
      pdf.setTextColor(0, 0, 0);
      pdf.setFontSize(8);
      // if (pNo || pName || projectNo || projectName) {
      //   pdf.text(10, 6, 'Program :' + pNo + ' / ' + pName);
      //   pdf.text(10, 10, 'Project :' + projectNo + ' / ' + projectName);
      // }
      pdf.text(10, 6, 'CR-CO Log Info');
      pdf.setFontSize(7);
      pdf.text(175, 6, runDate);
      // Few necessary setting options
      const imgWidth = 208 - 2 * margin;
      const pageHeight = 295;
      const imgHeight = (canvas.height * imgWidth / canvas.width) - 20;
      let heightLeft = imgHeight;
      const contentDataURL = canvas.toDataURL('image/png');
      let position = 18;
      pdf.addImage(contentDataURL, 'PNG', margin, position, imgWidth, imgHeight - 10);
      heightLeft -= pageHeight;
      pdf.setFontSize(8);
      // pdf.text(85, 295, 'IFM360 Program Management Module');
      const totalpages = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= totalpages; i++) {
        pdf.setPage(i);
        pdf.text(175, 10, 'Page :' + i + ' of ' + totalpages);
      }
      while (heightLeft >= 0) {
        position = (heightLeft - imgHeight) + 10;
        pdf.addPage();
        pdf.addImage(contentDataURL, 'PNG', margin, position, imgWidth, imgHeight + 30);
        heightLeft -= pageHeight;
        pdf.setTextColor(0, 0, 0);
        pdf.setFontSize(8);
        pdf.text(80, 295, 'IFM360 Program Management Module');
      }
      pdf.save('Cr_CoLog.pdf');
    });
  }

This is my Table

Screenshot (1229)
Screenshot (1228)

And this is My Generated PDF through htmlToCanvas Method

Screenshot (1230)
Screenshot (1231)
Screenshot (1232)

How would I get margin at Bottom of Page in continuous page..?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions