HTML table export to pdf with proper column width and Fonts

Question

I am exporting my data using this:

<a href="#" class="nonPdf" onclick ="$('#whole').tableExport({type:'pdf', escape:'false'});">Direct PDF</a>

While pdf code in tableExport.js is:

else if(defaults.type == 'pdf'){

            var doc = new jsPDF('p', 'pt', 'a4', false);
            doc.setFontSize(defaults.pdfFontSize);

        // Header
        var startColPosition = defaults.pdfLeftMargin;
        $(el).find('thead').find('tr').each(function() {
        console.log(12);
            $(this).filter(':visible').find('th').each(function(index, data) {
                if ($(this).css('display') != 'none') {
                    if (defaults.ignoreColumn.indexOf(index) == -1) {
                    console.log(1);
                        var colPosition = startColPosition + (index * 50);
                        doc.text(colPosition, 20, parseString($(this)));
                    }
                }
            });
        });

        // Row Vs Column
        var startRowPosition = 20;
        var page = 1;
        var rowPosition = 0;
        $(el).find('tbody').find('tr').each(function(index, data) {
            rowCalc = index + 1;

            //if (rowCalc % 26 == 0) {
                //doc.addPage(); disable new page
                //page++;
              //  startRowPosition = startRowPosition + 30;
            //}
            rowPosition = (startRowPosition + (rowCalc * 10)) - ((page - 1) * 280);

            $(this).filter(':visible').find('td').each(function(index, data) {
            console.log(index);
            console.log(data);
                if ($(this).css('display') != 'none') {
                    if (defaults.ignoreColumn.indexOf(index) == -1) {
                        //console.log($(this))
                        //console.log($(this))
                        var colPosition = startColPosition + (index * 190);
                        //var colPosition = startColPosition + (index * $(this)[0].clientWidth);
                        //console.log(colPosition);
                        doc.setLineWidth(2)
                        doc.text(colPosition, rowPosition, parseString($(this)));
                        //console.log(doc)
                    }
                }

            });

        });

        // Output as Data URI
        doc.output('datauri');

            }

But the problem is pdf generated with not proper format ? What to do with it ?

How can i proper format my html table in pdf.

Answer 1

I used below code in html5 to generate html table into pdf :-

<a href="#" onClick ="$('#tableID').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});">PDF</a>

---

Then i found words are collapse to each other upon pdf generation.

Then, Changing on library code for tableExport.js resolves same issue for me.

The tableExport.js code modified by me for pdf portion is shown below:-

else if(defaults.type == 'pdf'){

                    var doc = new jsPDF('p','pt', 'a4', true);
                    doc.setFontSize(defaults.pdfFontSize);

                    // Header
                    var startColPosition=defaults.pdfLeftMargin;
                    $(el).find('thead').find('tr').each(function() {
                        $(this).filter(':visible').find('th').each(function(index,data) {
                            if ($(this).css('display') != 'none'){                  
                                if(defaults.ignoreColumn.indexOf(index) == -1){
                                    var colPosition = startColPosition+ (index * 70);                                   
                                    doc.text(colPosition,20, parseString($(this)));
                                }
                            }
                        });                                 
                    });                 


                    // Row Vs Column
                    var startRowPosition = 20; var page =1;var rowPosition=0;
                    $(el).find('tbody').find('tr').each(function(index,data) {
                        rowCalc = index+1;

                    if (rowCalc % 26 == 0){
                        doc.addPage();
                        page++;
                        startRowPosition=startRowPosition+10;
                    }
                    rowPosition=(startRowPosition + (rowCalc * 10)) - ((page -1) * 280);

                        $(this).filter(':visible').find('td').each(function(index,data) {
                            if ($(this).css('display') != 'none'){  
                                if(defaults.ignoreColumn.indexOf(index) == -1){
                                    var colPosition = startColPosition+ (index * 70);                                   
                                    doc.text(colPosition,rowPosition, parseString($(this)));
                                }
                            }

                        });                                                         

                    });                 

                    // Output as Data URI
                    doc.output('datauri');

                }

Here, i change in two position:- Under // Header line---

var colPosition = startColPosition+ (index * 70);

Previously it was 50,based on words length content in table u change.

Once after that u need to change same value at another location: under // Row Vs Column lines -

 var colPosition = startColPosition+ (index * 70);

Here also change from 50 to 70,

By default code for tableEXport.js was below one:

else if(defaults.type == 'pdf'){

                var doc = new jsPDF('p','pt', 'a4', true);
                doc.setFontSize(defaults.pdfFontSize);

                // Header
                var startColPosition=defaults.pdfLeftMargin;
                $(el).find('thead').find('tr').each(function() {
                    $(this).filter(':visible').find('th').each(function(index,data) {
                        if ($(this).css('display') != 'none'){                  
                            if(defaults.ignoreColumn.indexOf(index) == -1){
                                var colPosition = startColPosition+ (index * 50);                                   
                                doc.text(colPosition,20, parseString($(this)));
                            }
                        }
                    });                                 
                });                 


                // Row Vs Column
                var startRowPosition = 20; var page =1;var rowPosition=0;
                $(el).find('tbody').find('tr').each(function(index,data) {
                    rowCalc = index+1;

                if (rowCalc % 26 == 0){
                    doc.addPage();
                    page++;
                    startRowPosition=startRowPosition+10;
                }
                rowPosition=(startRowPosition + (rowCalc * 10)) - ((page -1) * 280);

                    $(this).filter(':visible').find('td').each(function(index,data) {
                        if ($(this).css('display') != 'none'){  
                            if(defaults.ignoreColumn.indexOf(index) == -1){
                                var colPosition = startColPosition+ (index * 50);                                   
                                doc.text(colPosition,rowPosition, parseString($(this)));
                            }
                        }

                    });                                                         

                });                 

                // Output as Data URI
                doc.output('datauri');

            }

Note:- 1)this value u should change as any ,based on word length of each column word. 2)but both should be changed with same value.