विभाजित पीडीएफ में लंबे एचटीएमएल आयात करें

Question

मेरा परिदृश्य है:

एक बटन क्लिक करने पर, एक पीडीएफ फ़ाइल में एचटीएमएल पर आयात डेटा।

के बाद से इस पीडीएफ चाहिए तो मेरी पहला कदम html2canvas.js का उपयोग कर एक छवि में इस पेज को हस्तांतरण करने और फिर जब डेटा jsPDF.js

और के साथ एक पीडीएफ को यह छवि आयात है, कुछ जटिल आवश्यक शैली है ऐसा करने के लिए पीडीएफ को सभी डेटा को पकड़ने के लिए विभाजित किया जाना चाहिए, इसलिए मैंने यहां कोडों का उपयोग किया: https://github.com/MrRio/jsPDF/pull/397

मेरी समस्या है: पेज 2 या 3 पर पीडीएफ पर विभाजित पृष्ठ फ़ायरफ़ॉक्स पर ... नहीं कर सकता दिखाया जाना चाहिए, वे पूरी तरह खाली हैं। लेकिन पेज 1 पर यह ठीक है। (यह फ़ायरफ़ॉक्स के लिए है)

मैंने अन्य ब्राउज़रों का परीक्षण किया, वे ठीक हैं। क्या कोई इसे ठीक करने के तरीके पर कुछ प्रकाश डाल सकता है? 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

आप canvas-to-blob और FileSaver.js

का उपयोग करें और इस लाइन को संशोधित करना चाहिए:

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

यहाँ मेरी plnkr है

आप इसे here देख सकते हैं।

यह मैक, फ़ायरफ़ॉक्स पर मेरे लिए काम किया।

मुझे यह समाधान here मिला।