title: Import long html into split PDF
body: <p>My scenario is:</p>
  
  <p>On clicking a button, import datas on a html into a PDF file.</p>
  
  <p>Since this PDF must have some complicated required style, so my first step is to transfer this page into a image using html2canvas.js and then import this image to a PDF with jsPDF.js </p>
  
  <p>And when the data is too large the PDF must be split to hold all the data,to do this,so I used the codes here: <a href="https://github.com/MrRio/jsPDF/pull/397" rel="nofollow noreferrer">https://github.com/MrRio/jsPDF/pull/397</a></p>
  
  <p>My problem is: on firefox the splited page on PDF on page 2 or 3...cannot be shown, they are totally blank. but on page 1 it is fine. (this is for firefox)</p>
  
  <p>I tested other browsers they are all fine. pls someone could throw some light on how to fix this? </p>
  
  <p>Here is my plnkr:
  <a href="http://plnkr.co/edit/ElvAsriK2nssq2U9pgKX?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/ElvAsriK2nssq2U9pgKX?p=preview</a></p>
  
  <pre><code>function initTemplate(){
        datas=getData();
        var templateData=_.template($('#tpl').html(), datas);
        $('#tplW').html(templateData);
        getPDF();
        //  $('#tplW').append(_.template($('#tpl').html(), datas));
        // $('body').html( _.template($('#tpl').html(), datas));
  
   }
  
  
     function getData(){
        var htmlData=$(".MsoNormalTable .inner").find("tr.tablerow");
           var datas=[];
           $.each(htmlData,function(i,v){
               var d=[];
               var tds=$(v).find("td");
               $.each(tds,function(index,val){
                   d.push($(val).text());
               });
                datas.push(d); 
           });
         return datas;
     }
  
  
  
  function getPDF() {
      // initTemplate();
           html2canvas($('#tplW')[0], {
          onrendered: function(canvas){
  
              canvasToImageSuccess(canvas);
          }
      });
  
  
  
      function canvasToImage (canvas){
          var img = new Image();
          var dataURL = canvas.toDataURL('image/png');
          img.src = dataURL;
          return img;
      };
  
  
      function canvasShiftImage (oldCanvas,shiftAmt){
          shiftAmt = parseInt(shiftAmt) || 0;
          if(!shiftAmt){ return oldCanvas; }
          var newCanvas = document.createElement('canvas');
          newCanvas.height = oldCanvas.height - shiftAmt;
          newCanvas.width = oldCanvas.width;
          var ctx = newCanvas.getContext('2d');
          var img = canvasToImage(oldCanvas);
          ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);
          return newCanvas;
      };
  
  
  
      function canvasToImageSuccess (canvas){
         var pdf = new jsPDF('l','px'),
              pdfInternals = pdf.internal,
              pdfPageSize = pdfInternals.pageSize,
              pdfScaleFactor = pdfInternals.scaleFactor,
              pdfPageWidth = pdfPageSize.width,
              pdfPageHeight = pdfPageSize.height,
              totalPdfHeight = 0,
              htmlPageHeight = canvas.height,
              htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
              safetyNet = 0;
          while(totalPdfHeight &lt; htmlPageHeight &amp;&amp; safetyNet &lt; 15){
              var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
              pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
              totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);
  
              if(totalPdfHeight &lt; htmlPageHeight){
                  pdf.addPage();
              }
              safetyNet++;
          }
          pdf.save('test.pdf');
      };
  }
  </code></pre>