Importa long html in PDF splittato

Question

Il mio scenario è:

Facendo clic su un pulsante, è possibile importare i dati su un html in un file PDF.

Dal momento che questo PDF deve avere qualche complicato stile richiesto, quindi il mio primo passo è quello di trasferire questa pagina in un'immagine utilizzando html2canvas.js e quindi importare questa immagine ad un PDF con jsPDF.js

E quando i dati è troppo grande il PDF deve essere diviso per contenere tutti i dati, per fare questo, quindi ho usato i codici qui: https://github.com/MrRio/jsPDF/pull/397

Il mio problema è: su Firefox la pagina splitta su PDF a pagina 2 o 3 ... non può essere mostrato, sono completamente vuoti. ma a pagina 1 va bene. (questo è per firefox)

Ho provato altri browser che stanno tutti bene. qualcuno potrebbe far luce su come risolvere questo problema?

Ecco il mio plnkr: 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

Si dovrebbe usare canvas-to-blob e FileSaver.js

e modificare questa linea:

pdf.save('test.pdf'); 

a questo:

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"); 

Puoi dare un'occhiata a here.

Ha funzionato per me su Mac, Firefox.

Ho trovato questa soluzione here.