odbhut.shei.chhele
odbhut.shei.chhele

Reputation: 6224

Html Table Export plugin not working properly

I have an html table. I want to download it as a pdf file. I am trying to use html table export plugin. But the plugin is not working properly. There are nine columns in the table. All of them are not in the pdf file. Only four of them are in the pdf file. Has this happened to anyone before. I am stuck for days now. Thanks in advance.

my html

<table id="table-id">
        <thead>         
            <tr>
                <th>Country</th>
                <th>Population</th>
                <th>Date</th>
                <th>Age</th>
                <th>Name</th>
                <th>Shift</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chinna</td>
                <td>1,363,480,000</td>
                <td>March 24, 2014</td>
                <td>19.1</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>India</td>
                <td>1,241,900,000</td>
                <td>March 24, 2014</td>
                <td>17.4</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>317,746,000</td>
                <td>March 24, 2014</td>
                <td>4.44</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>Indonesia</td>
                <td>249,866,000</td>
                <td>July 1, 2013</td>
                <td>3.49</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>Brazil</td>
                <td>201,032,714</td>
                <td>July 1, 2013</td>
                <td>2.81</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
        </tbody>
    </table>
<button id="pdf-button">PDF</button>

my javascript

$('#pdf-button').on('click', function(e){
        $('#table-id').tableExport({
            type:'pdf',
            escape:'false'
        }); 
    });

Upvotes: 0

Views: 3765

Answers (1)

twain
twain

Reputation: 1325

The problem seems to be those two parts in the pdf code part below:

var colPosition = startColPosition + (index * 50);

The * 50 is the column width and if there are more than 4 columns they are just not visible, cause they are not on the page anymore. Its a bit dirty, but you can change that value, so all of your columns fit on the page and then change the fontSize till it looks ok. Otherwise you can add a option to the plugin where you can set this value.

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


        }

Upvotes: 1

Related Questions