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

NayanMiyatra · 2020-10-15T13:12:09Z

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