HTML to PDF with CSS included

Question

I'm searching for a way to convert my page to a PDF document by using jsPDF, but for now I cannot convert any CSS styling. It's just text and no graphics.

This is the code I'm using at the moment

    var specialElementHandlers = {
        '#ignorePDF': function (element,renderer) {
            return true;
        }
    };

    var doc = new jsPDF();

    doc.fromHTML($('#page-with-images').get(0), 20, 20, {'width': 500, 'elementHandlers': specialElementHandlers,});
    doc.save("Test.pdf");

But the result is not what I want, because there is no styling included. How do I fix this problem?

Answer 1

Try this.

 var pdf = new jsPDF('p', 'pt', 'a4'); pdf.addHTML($("#content"), function() { var output = pdf.output("datauristring"); alert(output); //pdf.output("datauri"); //This will output the PDF in a new window });

 div { width: 100%; background-color: lightblue; padding: 15px; border: 2px solid black; } p { background-color: limegreen; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> <body> <div id="content"> <div> <div> <div> <div> <p id="to-pdf">HTML content...</p> </div> </div> </div> </div> </div> </body>

HTML to PDF with CSS included

Question

1 answers

solution1
0 2016-07-04 13:18:13

HTML to PDF with CSS included

Question

1 answers

solution1 0 2016-07-04 13:18:13

solution1
0 2016-07-04 13:18:13