जेएसपीडीएफ के साथ पीडीएफ निर्यात करना सीएसएस

Question

प्रस्तुत नहीं कर रहा है मैं वेबसाइट से अलग डेटा निर्यात करने के लिए jspdf.debug.js का उपयोग कर रहा हूं लेकिन कुछ समस्याएं हैं, मैं इसे निर्यात किए गए पीडीएफ में सीएसएस प्रस्तुत करने के लिए नहीं मिल सकता और यदि मेरे पास है पेज में एक छवि जो मैं निर्यात कर रहा हूं, पीडीएफ रिक्त हो जाता है ...

क्या कोई इसे ठीक करने का तरीका जानता है?

यहाँ एक jsfiddle यह सीएसएस प्रतिपादन नहीं कर रहा है दिखा है

और मेरी स्क्रिप्ट

$(document).ready(function() { 
$('#export').click(function(){ 
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""), 
     filename = 'financiar_' + d + '.pdf', 
     pdf = new jsPDF('p', 'pt', 'letter'), 
     specialElementHandlers = { 
      '#editor': function(element, renderer) { 
       return true; 
      } 
    }; 
    pdf.fromHTML(
      $('.export').get(0) // HTML element 
     , 25 // x coord 
     , 25 // y coord 
     , { 
       'width': 550 // was 7.5, max width of content on PDF 
      , elementHandlers: specialElementHandlers 
     } 
    ); 
    pdf.save(filename); 
}) 
}); 

Answer 1

मुझे पता है के रूप में jsPDF सीएसएस और एक ही मुद्दा मैं का सामना करना पड़ रहा था के साथ काम नहीं कर रहा है।

इस समस्या को हल करने के लिए, मैं Html2Canvas इस्तेमाल किया तो बस pdf.fromHTML() की बजाय HTML2Canvas जे एस जोड़ें और फिर pdf.addHTML (उपयोग करें)।

यहाँ मेरी कोड (कोई अन्य कोड):

var pdf = new jsPDF('p', 'pt', 'letter'); 
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function() { 
    pdf.save('Test.pdf'); 
}); 

लक के सर्वश्रेष्ठ!

संपादित करें: मामले में here देखें आप addHTML नहीं मिला()

Answer 2

काले रंग की पृष्ठभूमि निकालने के लिए केवल पृष्ठभूमि रंग जोड़ने: सफेद;

Answer 3

jspdf सीएसएस के साथ काम नहीं करता है लेकिन यह html2canvas के साथ काम कर सकता है। आप html2canvas के साथ jspdf का उपयोग कर सकते हैं। आप स्क्रिप्ट फ़ाइलें जैसे https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf

पृष्ठ पर क्लिक करने योग्य बटन बनाने के इतना है कि यह पीडीएफ यह पैदा करते हैं और करेंगे डाउनलोड करने की आवश्यकता

<script type="text/javascript" src="html2canvas.js"></script> 
    <script type="text/javascript" src="jspdf.min.js"></script> 
    <script type="text/javascript"> 
    function genPDF() 
    { 
    html2canvas(document.body,{ 
    onrendered:function(canvas){ 

    var img=canvas.toDataURL("image/png"); 
    var doc = new jsPDF(); 
    doc.addImage(img,'JPEG',20,20); 
    doc.save('test.pdf'); 
    } 

    }); 

    } 
    </script> 

:

अपने पृष्ठ पर स्क्रिप्ट में इन दो फ़ाइलों में शामिल हैं मूल HTML पृष्ठ के समान दिखाई देगा।

<a href="javascript:genPDF()">Download PDF</a> 

यह पूरी तरह से काम करेगा।