HTML to PDF (by javascript) how can I add css or table?

Question

In a project I have convert html file into pdf,than it's working fine.But this output not showing css design.Now I need a suggestion how can I add css design with this pdf file?

Here the js function code :

 $(function(){
         var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#StudentInfoListTable').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

I took help from this project https://github.com/MrRio/jsPDF

This is my table looking enter image description here

This is the pdf output

enter image description here

I have tried to add a table

$('#cmd').click(function () {

        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p', pt, 'a1', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
            console.debug(row);
            $.each(row, function (j, cell){
                doc.cell(10, 50,120, 50, cell, i);  // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
            })
        })


        doc.save('sample-file.pdf');
    });

Here is the function

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }


    // go through cells
    for (var i=0; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.push(rowData);
    }       

    return data;
}

It make me cry after see this output !!

enter image description here

Any way to avoid this overlapping ? What is the best solution to add css in pdf?

Alimon Karim · Accepted Answer · 2014-01-23 06:39:12Z

3

Ok after lots of try I have solved it.Especial thanks for mihaidp,Here the code I have solve table row problem

$('#cmd').click(function () {
        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p', 'pt', 'a4', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
                doc.setFontSize(10);

                $.each(row, function (j, cell){
                if(j=='name')
                {
                    doc.cell(10, 50,100, 30, cell, i);
                }
                else if(j=='email')
                {
                    doc.cell(10, 50,130, 30, cell, i);
                }
                else if(j=='track')
                {
                    doc.cell(10, 50,40, 30, cell, i);
                }
                else if(j=='s.s.croll')
                {
                    doc.cell(10, 50,51, 30, cell, i);
                }
                else if(j=='h.s.croll')
                {
                    doc.cell(10, 50,51, 30, cell, i);
                }
                else 
                {
                    doc.cell(10, 50,70, 30, cell, i);  
                }
            })
        })

After solve here the output enter image description here

answered Jan 23, 2014 at 6:39

Alimon Karim

4,48910 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gco Over a year ago

I am doing the same, but my talbe rows are offset by one. No idea why. Do you had the same issue? By that I mean that my first row is empty and the last row doesnt have any borders...

Community · Accepted Answer · 2017-05-23 12:24:58Z

0

Hmm! I think this post can give you all you need, with mPDF: how to add css file in mpdf

With jsPDF I only know about the hard way: http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html (See Method Summary).

Hope it helps!

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jan 22, 2014 at 16:24

mihaidp

3102 silver badges11 bronze badges

Collectives™ on Stack Overflow

HTML to PDF (by javascript) how can I add css or table?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related