Jspdf Can't Get Any Styling to Work

jsPDF can't get any styling to work

I think the problem is that you use media="print" instead of media="screen".
Try making two seperate files, one for print and one for the screen:

<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>

~~The screen one will contain the styling for the page as seen in a browser. The print one will contain the styling for when you print your page, or in this case saving it as a PDF.~~

EDIT

I checked the jsPDF website but I think they don't support CSS. You could do something like this to create a document with different text colors though:

doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');

Put this code right under var doc = new jsPDF('landscape'); in your script.

jsPDF problems, aligning and elements and with .text()

For the issue with your CSS not rendering, I think this should help: Exporting PDF with jspdf not rendering CSS .

The answerer recommends using Html2Canvas. Then you can add HTML2Canvas JS and then use pdf.addHTML() instead of pdf.fromHTML().

The reason your image is displaying over your text is because you are not telling jsPDF to print further down the page.

Try doing the below. Set your margins initially, write your text at the specified margins, then increment the margin so that when you print your html it will be below the 'World Test!' text.

        function demoFromHTML() {

    var pdf = new jsPDF('p', 'pt', 'A4');

    // source can be HTML-formatted string, or a reference

    // to an actual DOM element from which the text will be scraped.

    //source = $('.conteudo_simulacao_final')[0];

    pdf.setFontSize(40);

    var margins = {

                top: 75,

                bottom: 60,

                left: 30,

                width: 530

            };

    pdf.text(margins.left, margins.top, 'World test!');

    margins.top = margins.top + pdf.internal.getFontSize();

    source = '<h1><img src="jsPDF/header.jpg" alt="header" style="width:595.28px; top:0; left: 0;" ></h1>';

    source = '<html><body><h1><img src="jsPDF/header.jpg" alt="header" style="width:595.28px; top:0; left: 0;" ></h1>';

    source += '<div style="width:400px; >'

    source += '<div style="float: left;"><img src="jsPDF/cartao_img.png" style="width:300px;" alt="cartao"></div>'

    source += '<div style="float: left;"> TESTSASSAE</div>';

    source += '</div>':

    source += '<img src="jsPDF/footer.png" alt="footer" style="width:595.28; bot: 0;" ></h1>';

    // we support special element handlers. Register them with jQuery-style 

    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)

    // There is no support for any other type of selectors 

    // (class, of compound) at this time.

    specialElementHandlers = {

        // element with id of "bypass" - jQuery style selector

        '#bypassme': function (element, renderer) {

            // true = "handled elsewhere, bypass text extraction"

            return true

        }

    };

    

    // all coords and widths are in jsPDF instance's declared units

    // 'inches' in this case

    pdf.fromHTML(

    source, // HTML string or DOM elem ref.

    margins.left, // x coord

    margins.top, { // y coord

        'width': margins.width, // max width of content on PDF

        'elementHandlers': specialElementHandlers

    },

    function (dispose) {

        // dispose: object with X, Y of the last line add to the PDF 

        //          this allow the insertion of new lines after html

        pdf.save('Test.pdf');

    }, margins);

}

html2canvas and jsPDF, css styling rendered incorrectly in pdf

I resolved the above issue by replacing CSS transform property with margin-top. HTML2Canvas doesn't work with css transform.

jsPDF html method always fails

The problem is most likely the version of html2canvas you used. html2canvas 0.4.1 is not going to work. It should be html2canvas 1.0.0-alpha.11 or higher. However, current version, html2canvas 1.0.0-rc.3 doesn't work either, it also gives me a blank page. At least html2canvas 1.0.0-alpha.12 still works for me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="~/lib/html2canvas/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or html2canvas 1.0.0-alpha.12 is needed -->
<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'a4');

        pdf.html(document.getElementById('toPDF'), {
            callback: function () {
                window.open(pdf.output('bloburl'));
            }
        });
    }
</script>

Update: the latest version that works for me is html2canvas v1.0.0-rc.1

Jspdf Can't Get Any Styling to Work