Eksportowanie pliku PDF z jspdf bez renderowania CSS

Question

Używam jspdf.debug.js do eksportowania różnych danych ze strony internetowej, ale jest kilka problemów, nie mogę uzyskać tego, aby renderować CSS w eksportowanym pliku PDF i jeśli mam obraz na stronie eksportowanej, plik PDF zwraca pustą wartość ...

Czy ktoś wie, jak to naprawić?

Oto jsfiddle pokazując to nie renderowania CSS

A mój skrypt

$(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

co wiem jsPDF nie pracuje z CSS i tym samym numerze miałem do czynienia.

Aby rozwiązać ten problem, użyłem Html2Canvas Więc po prostu Dodaj HTML2Canvas JS a następnie użyć pdf.addHTML() zamiast pdf.fromHTML().

Oto mój kod (żaden inny kod):

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

powodzenia!

Edit: Patrz here w przypadku, gdy nie znaleźliśmy addHTML()

Answer 2

Aby usunąć czarne tło tylko dodać background-color: white; w stylu

Answer 3

jspdf nie działa z css ale może działać razem z html2canvas. Możesz użyć jspdf razem z html2canvas.

obejmują te dwa pliki w skrypcie na swojej stronie:

<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> 

Musisz pobrać skryptów takich jak https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf

zrobić klikalny przycisk na stronie, tak, że będzie generować pliki PDF i go będą widoczne tak samo jak oryginalne strony html.

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

Będzie działać idealnie.