分割HTMLに長いHTMLをインポート

Question

私のシナリオは：

ボタンをクリックすると、HTML上のデータをPDFファイルにインポートします。

私の最初のステップは、html2canvas.jsを使用した画像には、このページを転送してjsPDF.js

のときのデータとPDFへこの画像をインポートすることですので、このPDFは、いくつかの複雑な必要なスタイルを持っている必要がありますので、が大きすぎると、すべてのデータを保持するためにPDFを分割しなければならないので、ここでコードを使用しました：https://github.com/MrRio/jsPDF/pull/397

私の問題は：firefoxの2ページ目または3ページ目のPDFページ彼らは完全に空白です。 1ページ目には問題ありません。 （これはFirefox向けです）

私は他のブラウザをテストしてみましたが、これはすべて問題ありません。 pls誰かがこれを修正する方法についていくつかの光を投げることができますか？ここで

は私plnkrです： あなたがcanvas-to-blobとFileSaver.js

を使用して、この行変更してくださいhttp://plnkr.co/edit/ElvAsriK2nssq2U9pgKX?p=preview

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 < htmlPageHeight && safetyNet < 15){ 
      var newCanvas = canvasShiftImage(canvas, totalPdfHeight); 
      pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE'); 
      totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor); 

      if(totalPdfHeight < htmlPageHeight){ 
       pdf.addPage(); 
      } 
      safetyNet++; 
     } 
     pdf.save('test.pdf'); 
    }; 
} 

Answer 1

：これまで

pdf.save('test.pdf'); 

：

var data = pdf.output(); 
var buffer = new ArrayBuffer(data.length); 
var array = new Uint8Array(buffer); 
for (var i = 0; i < data.length; i++) { 
    array[i] = data.charCodeAt(i); 
} 

var blob = new Blob(
    [array], 
    {type: 'application/pdf', encoding: 'raw'} 
); 
saveAs(blob, "test.pdf"); 

を

あなたはそれをチェックアウトすることができますhere。

Mac、Firefox上で動作しました。

この解決策が見つかりましたhere。