Include style to table

[Nagesh29]

Hello Prashanth,

I am using this library to convert my html table to pdf.
But I am unable apply any stylesheet to it. e.g. I want to generate table without border or striped table such as bootstrap. Also, my column header are getting outside of the cell width.
Can you please help me with this?
Thanks in advance.

[Prashanth-Nelli]

Hi @Nagesh29 jspdftable plugin don't support styles as of now.
can you please paste that code (html & js) here.

[Nagesh29]

Hello Prashanth,

Thank you very much for your quick reply.
No Prashanth, I am still struggling with it. The column headings are still
getting out of the box in PDF.
Also, I dont want the border for table instead I want stripped table with
some css, which is not possible I guess.
Can you suggest me any other alternative to include css with this plugin?

Thank you very much.

On Tue, Feb 24, 2015 at 5:11 PM, Prashanth-Nelli notifications@github.com
wrote:

Hi @Nagesh29 https://github.com/Nagesh29 jspdftable plugin don't
support styles as of now.
can you please paste that code (html & js) here.

—
Reply to this email directly or view it on GitHub
#9 (comment)
.

[Prashanth-Nelli]

Hi Nagesh29
once try jspdf html renderer.
visit this link for demo https://parall.ax/products/jspdf.

[Prashanth-Nelli]

i tweaked plugin code to meet your requirement use the following code to get stripped tables

( function(jsPDFAPI) {

    var rObj = {}, hObj = {}, data = [], dim = [], columnCount, rowCount, width, heigth, fdata = [], sdata = [], SplitIndex = [], cSplitIndex = [], indexHelper = 0, heights = [], fontSize, jg, i, tabledata = [], x, y, xOffset, yOffset, iTexts, start, end, ih, length, lengths, row, obj, value, nlines, nextStart, propObj = {}, pageStart = 0;

    // Inserts Table Head row

    jsPDFAPI.insertHeader = function(data) {
        rObj = {}, hObj = {};
        rObj = data[0];
        for (var key in rObj) {
            hObj[key] = key;
        }
        data.unshift(hObj);
    };

    // intialize the dimension array, column count and row count

    jsPDFAPI.initPDF = function(data, marginConfig, firstpage) {
        if (firstpage) {
            dim = [marginConfig.xstart, marginConfig.tablestart, this.internal.pageSize.width - marginConfig.xstart - 20 - marginConfig.marginright, 250, marginConfig.ystart, marginConfig.marginright, marginConfig.xOffset || 5, marginConfig.yOffset || 5];
        } else {
            dim = [marginConfig.xstart, marginConfig.ystart, this.internal.pageSize.width - marginConfig.xstart - 20 - marginConfig.marginright, 250, marginConfig.ystart, marginConfig.marginright, marginConfig.xOffset || 5, marginConfig.yOffset || 5];
        }
        columnCount = this.calColumnCount(data);
        rowCount = data.length;
        width = dim[2] / columnCount;
        height = dim[2] / rowCount;
        dim[3] = this.calrdim(data, dim);
    };

    //draws table on the document

    jsPDFAPI.drawTable = function(table_DATA, marginConfig) {
        fdata = [], sdata = [];
        SplitIndex = [], cSplitIndex = [], indexHelper = 0;
        heights = [];
        //this.setFont("times", "normal");
        fontSize = this.internal.getFontSize();
        if (!marginConfig) {
            marginConfig = {
                xstart : 20,
                ystart : 20,
                tablestart : 20,
                marginright : 20,
                xOffset : 10,
                yOffset : 10
            }
        } else {
            propObj = {
                xstart : 20,
                ystart : 20,
                tablestart : 20,
                marginright : 20,
                xOffset : 5,
                yOffset : 10
            }
            for (var key in propObj) {
                if (!marginConfig[key]) {
                    marginConfig[key] = propObj[key];
                }
            }
        }
        pageStart = marginConfig.tablestart;
        xOffset = marginConfig.xOffset;
        yOffset = marginConfig.yOffset;
        this.initPDF(table_DATA, marginConfig, true);
        if ((dim[3] + marginConfig.tablestart) > (this.internal.pageSize.height)) {
            jg = 0;
            cSplitIndex = SplitIndex;
            cSplitIndex.push(table_DATA.length);
            for (var ig = 0; ig < cSplitIndex.length; ig++) {
                tabledata = [];
                tabledata = table_DATA.slice(jg, cSplitIndex[ig]);
                this.insertHeader(tabledata);
                this.pdf(tabledata, dim, true, false);
                pageStart = marginConfig.ystart;
                this.initPDF(tabledata, marginConfig, false);
                jg = cSplitIndex[ig];
                if ((ig + 1) != cSplitIndex.length) {
                    this.addPage();
                }
            }
        } else {
            this.insertHeader(table_DATA)
            this.pdf(table_DATA, dim, true, false);
        }
        return nextStart;
    };

    //calls methods in a sequence manner required to draw table

    jsPDFAPI.pdf = function(table, rdim, hControl, bControl) {
        columnCount = this.calColumnCount(table);
        rowCount = table.length;
        rdim[3] = this.calrdim(table, rdim);
        width = rdim[2] / columnCount;
        height = rdim[2] / rowCount;
        this.drawRows(rowCount, rdim, hControl);
        // this.drawColumns(columnCount, rdim);
        nextStart = this.insertData(rowCount, columnCount, rdim, table, bControl);
        return nextStart;
    };

    //inserts text into the table

    jsPDFAPI.insertData = function(iR, jC, rdim, data, brControl) {
        // xOffset = 10;
        // yOffset = 10;
        y = rdim[1] + yOffset;
        for ( i = 0; i < iR; i++) {
            obj = data[i];
            x = rdim[0] + xOffset;
            console.log(xOffset);
            for (var key in obj) {
                if (key.charAt(0) !== '$') {
                    if (obj[key] !== null) {
                        cell = obj[key].toString();
                    } else {
                        cell = '-';
                    }
                    cell = cell + '';
                    if (((cell.length * fontSize) + xOffset) > (width)) {
                        iTexts = cell.length * fontSize;
                        start = 0;
                        end = 0;
                        ih = 0;
                        if ((brControl) && (i === 0)) {
                            this.setFont(this.getFont().fontName, "bold");
                        }
                        for ( j = 0; j < iTexts; j++) {
                            end += Math.floor(2 * width / fontSize) - (Math.ceil(xOffset / fontSize) || 3);
                            this.text(x, y + ih, cell.substring(start, end));
                            start = end;
                            ih += fontSize;
                        }
                    } else {
                        if ((brControl) && (i === 0)) {
                            this.setFont("times", "bold");
                        }
                        this.text(x, y, cell);
                    }
                    x += rdim[2] / jC;
                }
            }
            this.setFont("times", "normal");
            y += heights[i];
        }
        return y;
    };

    //calculates no.of based on the data array

    jsPDFAPI.calColumnCount = function(data) {
        var obj = data[0];
        var i = 0;
        for (var key in obj) {
            if (key.charAt(0) !== '$') {++i;
            }
        }
        return i;
    };

    //draws columns based on the caluclated dimensions

    jsPDFAPI.drawColumns = function(i, rdim) {
        x = rdim[0];
        y = rdim[1];
        w = rdim[2] / i;
        h = rdim[3];
        for (var j = 0; j < i; j++) {
            this.rect(x, y, w, h);
            x += w;
        }
    };

    //calculates dimensions based on the data array and returns y position for further editing of document

    jsPDFAPI.calrdim = function(data, rdim) {
        row = 0;
        x = rdim[0];
        y = rdim[1];
        lengths = [];
        for (var i = 0; i < data.length; i++) {
            obj = data[i];
            length = 0;
            for (var key in obj) {
                if (obj[key] !== null) {
                    if (length < obj[key].length) {
                        lengths[row] = obj[key].length;
                        length = lengths[row];
                    }
                }
            }++row;
        }
        heights = [];
        for (var i = 0; i < lengths.length; i++) {
            if ((lengths[i] * (fontSize)) > (width - rdim[5])) {
                nlines = Math.ceil((lengths[i] * (fontSize)) / width);
                heights[i] = (nlines) * (fontSize / 2) + rdim[6] + 10;
            } else {
                heights[i] = (fontSize + (fontSize / 2)) + rdim[6] + 10;
            }
        }
        value = 0;
        indexHelper = 0;
        SplitIndex = [];
        for (var i = 0; i < heights.length; i++) {
            value += heights[i];
            indexHelper += heights[i];
            if (indexHelper > (this.internal.pageSize.height - pageStart)) {
                SplitIndex.push(i);
                indexHelper = 0;
                pageStart = rdim[4] + 30;
            }
        }
        return value;
    };

    //draw rows based on the length of data array

    jsPDFAPI.drawRows = function(i, rdim, hrControl) {
        x = rdim[0];
        y = rdim[1];
        w = rdim[2];
        h = rdim[3] / i;
        for (var j = 0; j < i; j++) {
            if (j === 0 && hrControl) {
                this.setFillColor(182, 192, 192);
                //colour combination for table header
                // this.rect(x, y, w, heights[j], 'F');
                console.log(x, y, w, heights[j]);
                this.line(x, y + heights[j], x + w, y + heights[j]);
                this.line(x, y, x + w, y);
            } else {
                this.setDrawColor(0, 0, 0);
                //colour combination for table borders you
                // this.rect(x, y, w, heights[j]);
                console.log(x, heights[j], w, heights[j]);
                this.line(x, y + heights[j], x + w, y + heights[j]);
            }
            y += heights[j];
        }
    };

    //converts table to json

    jsPDFAPI.tableToJson = function(id) {
        var table = document.getElementById(id), keys = [], rows = table.rows, noOfRows = rows.length, noOfCells = table.rows[0].cells.length, i = 0, j = 0, data = [], obj = {};

        for ( i = 0; i < noOfCells; i++) {
            keys.push(rows[0].cells[i].textContent);
        }

        for ( j = 0; j < noOfRows; j++) {
            obj = {};
            for ( i = 0; i < noOfCells; i++) {
                try {
                    obj[keys[i]] = rows[j].cells[i].textContent.replace(/^\s+|\s+$/gm, '');
                } catch(ex) {
                    obj[keys[i]] = '';
                }
            }
            data.push(obj);
        }
        return data.splice(1);
    };

}(jsPDF.API));

[Nagesh29]

Hello Prashanth,

Thanks a lot for your efforts. It works great for me..
Can you please provide me the details if I want to provide little margin above and below the stripes? Provide only if it is easily possible for you.
Thanks again.

[Prashanth-Nelli]

you can achieve that by increasing yOffset values.

[jaydeepgiri]

Hello,

First of all thanks a lot for such a great work you did.

It is working like a charm in my project.
But the problem is I am using it with the tables where tables are in JQuery mobile. so that there are hidden ( i.e, display:none ) headings for every data cell which will be visible when the screen size is lesser than the width of the table.

Finally, i do not want those hidden elements or values to be captured in the pdf file. Please help me with this if this can be achieve.

Thank you

[Prashanth-Nelli]

Hi jaydeepgiri thanks for your kind words,

replace the jsPDFAPI.tableToJson method inside the jspdf.plugin.table.js file with the following one

jsPDFAPI.tableToJson = function(id) {

var i = 0;
var j = 0;
var obj = {};
var data = [];
var keys = [];
var table = document.getElementById(id);
var rows = table.rows;
var noOfRows = rows.length;
var noOfCells = table.rows[0].cells.length;

for ( i = 0; i < noOfCells; i++) {

    if(!rows[0].cells[i].hidden){
        keys.push(rows[0].cells[i].textContent);
    }

}

for ( j = 0; j < noOfRows; j++) {
    obj = {};
    for ( i = 0; i < noOfCells; i++) {

        if(!rows[j].cells[i].hidden){
            try {
                obj[keys[i]] = rows[j].cells[i].textContent.replace(/^\s+|\s+$/gm, '');
            } catch(ex) {
                obj[keys[i]] = '';
            }
        }

    }
    data.push(obj);
}
return data.splice(1);

};

hoping that this might help you.
Thanks.

[jaydeepgiri]

Thank you once again..
Its working fine now..

[koppireddy]

I am trying to use this plugin my table layout is different. Below is the sample code

<script src="jspdf.js"></script> <script src="FileSaver.js"></script> <script src="jspdf.plugin.table.js"></script> <script> function generatefromtable() { var data = [], fontSize = 8, height = 0, doc; doc = new jsPDF('p', 'pt', 'a4', true); doc.setFont("times", "normal"); doc.setFontSize(fontSize); doc.text(20, 20, "hi table"); data = []; data = doc.tableToJson('tbl'); height = doc.drawTable(data, { xstart : 10, ystart : 10, tablestart : 40, marginleft : 10, xOffset : 10, yOffset : 15 }); doc.text(50, height + 20, 'hi world'); doc.save("some-file.pdf"); } </script>

<body>
    <button onclick="generatefromtable()">
        Generate from table
    </button>
    <table id="tbl">
        <thead>
            <tr>
                <th>cell1Name</th><th>cell2Name</th><th>cell3Name</th><th>cell4Name</th><th>cell5Name</th>
            </tr>
        </thead>
        <tbody>
<tr role="row">
                <td >BIGGERT FOR CONGRESS JUDY</td>
                <td>Downers Grove Township Republican Organization</td>
                <td></td>
                <td>10/07/2007</td>
                <td>$500.00</td>
            </tr>
                <tr role="row">
                <td >BIGGERT FOR CONGRESS JUDY</td>
                <td>Downers Grove Township Republican Organization</td>
                <td></td>
                <td>10/07/2007</td>
                <td>$500.00</td>
            </tr>
        </tbody>
    </table>
</body>

I am unable to wrap the text. Please help me. I am unable to figure the wraping of text.

Kumar