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

14,468

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

Share:
14,468
Alimon Karim
Author by

Alimon Karim

I'm a 30 years old Software Engineer from Bangladesh. I love everything that has to do with design & development, Project management, Testing, Industrial design and I feel a true devotion for coding. I have 8+ years of experience as a software engineer in software industry. Youtube channel 1 : https://www.youtube.com/channel/UCgjLmfDEaCnH3gS0HuBk8Cg

Updated on June 08, 2022

Comments

  • Alimon Karim
    Alimon Karim almost 2 years

    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?