title: How to split page after adding the image using HTML2Canvas and jspdf
body: <p>Using html2canvas and JsPDF for converting HTML to pdf and using below code for generating the code
  this code will give convert the complete html of div to single image and wil show in the pdf as single page.</p>
  <pre><code>import * as jsPDF from 'jspdf';
  import html2canvas from 'html2canvas';
  
      htmltoPDF()
      {
          // parentdiv is the html element which has to be converted to PDF
          html2canvas(document.querySelector(&quot;#parentdiv&quot;)).then(canvas =&gt; {
      
            var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
      
            var imgData  = canvas.toDataURL(&quot;image/jpeg&quot;, 1.0);
            pdf.addImage(imgData,0,0,canvas.width, canvas.height);
            pdf.save('converteddoc.pdf');
      
        });
  
  }
  </code></pre>
  <p>For split the code i used below code which split the pages into the multiple pages but not spliting the space correctly because my pdf has small images attached pdf.</p>
  <pre><code>`var imgWidth = 210;
  var pageHeight = 295;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;
  
  enter code here
  
  var doc = new jsPDF('p', 'mm');
  var position = 0;
  
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
  
  while (heightLeft &gt;= 0) {
  position = heightLeft - imgHeight;
  doc.addPage();
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
  }
  doc.save( 'file.pdf');﻿`
  </code></pre>
  <p>Is their any approach to split the page according to the static height which split the image from particular position?</p>