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

Question

I'm using the jsPDF to print some code of HTML to pdf.

This is my function:

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);
    pdf.text(250, 220, 'World test!');

    source = '<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
        }
    };
    margins = {
        top: 0,
        bot: 0,
        left: 0,
        width: 522
    }

    // 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);
}

I can create a pdf, my problem is: I can't print the two divs side by side. I think jsPDF can't read the styles, any way to go around this?

My other issue with this is that when I do this : 'pdf.text(250, 220, 'World test!');' The text goes behind my image, any way to place it infront?

Thanks for your time guys.

score 1 · Accepted Answer · edited May 23 '17 at 12:07

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

I will try the canvas tomorrow. About the text i explained myself wrong i guess. I want the text to be on top of the image, like for example in css: img: z-index :0 text: z-index: 1 Any way to do this ? THks — Fábio, Aug 25 '16 at 16:28
Just an update, tried the canvas and it worked ;) It prints the page with all the css. Just got one little problem, the header of the item that i printed appeared with a black colour. Where in reallity it is white, any idea why? — Fábio, Aug 25 '16 at 17:00

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

1 Answers1