title: jsPDF html method with addPage to split pages in generated PDF
body: <p>I am using <strong>jsPDF's</strong> <code>html</code> method to generate a PDF for some html that comprises of multiple paragraphs <code>p</code> with each <code>p</code> containing words between 50-500. The PDF is generated properly with the styles I have defined. The only issue I am facing is when the contents of the <code>p</code> tags overflow to a new page in PDF cutting off parts of text as can be seen here:</p>
  
  <p><a href="https://i.stack.imgur.com/GzhQn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GzhQn.png" alt="enter image description here"></a></p>
  
  <p>To counter this, I need to introduce <code>addPage</code> into my code to insert a "page break" where I wish. Here is a sample of <code>addPage</code> that works with <strong>jsPDF's</strong> <code>text</code> function:</p>
  
  <pre><code>var doc = new jsPDF('p', 'pt', 'letter');
  doc.text(20, 20, 'first text');
  doc.addPage();
  doc.text(20, 20, 'second text');
  doc.addPage();
  doc.text(20, 20, 'third text');
  doc.save();
  </code></pre>
  
  <p>I want to do the same for <code>html</code> and here is the code I used:</p>
  
  <pre><code>var doc = new jsPDF('p', 'pt', 'letter');
  doc.html($("#p1")[0], {
      callback: function (doc) {
          doc.addPage('letter', 'p');
  
          doc.html($("#p2")[0], {
              callback: function (doc) {
                  doc.save();
              }
          });
      }
  });
  </code></pre>
  
  <p>The above generates a PDF with the contents with 2 pages as desired. But the contents that are suppose to be on the second page are on the first, on top of the contents of first page. In other words, <code>#p2</code> contents are pasted on top of <code>#p1</code> contents.</p>
  
  <p>Here is the code snippet but please note, SO is throwing <em>cross-origin error</em> when you try to run the code so you will need to run the below outside SO:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function wrap() {
    var doc = new jsPDF('p', 'pt', 'letter');
    doc.html($("#p1")[0], {
      callback: function(doc) {
        doc.addPage('letter', 'p');
        doc.html($("#p2")[0], {
          callback: function(doc) {
            doc.save();
          }
        });
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.js"&gt;&lt;/script&gt;
  
  &lt;button id="btn" onclick="wrap()"&gt;Test&lt;/button&gt;
  &lt;div id="lipsum"&gt;
    &lt;p id="p1"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo
      at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales,
      ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia
      efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus.
    &lt;/p&gt;
    &lt;p id="p2"&gt;
      Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante.
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc.
    &lt;/p&gt;
    &lt;p id="p3"&gt;
      In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et
      dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque.
    &lt;/p&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please also note that the version used for <strong>html2canvas</strong> js is important here. See <a href="https://stackoverflow.com/questions/57376671/jspdf-html-function-returning-blank-pdf-page">this</a> for more info.</p>