jsPDF autoTable columnWidth wrap cuts table off

[jamessuske]

I am using jsPDF to generate a PDF from an HTML table and jsPDF is great, expect I am having one issue, when I try to wrap the columnWidth, my table gets cut off :(

var doc = new jsPDF('l', 'mm', "a0");
var tbl = $('#cost-matrix-table').clone();
tbl.find('tr:nth-child(1)').remove();
tbl.find('tr:nth-child(1)').remove();
tbl.find('tr:nth-child(2)').remove();
var res = doc.autoTableHtmlToJson(tbl.get(0));

doc.autoTable(res.columns, res.data, {
    startY: 40,
    margin: {
        top: 40
    },
    addPageContent: function (data) {
        doc.setFontSize(28);
        doc.setTextColor(0);
        doc.setFontStyle('bold');
        doc.text("Cost Matrix " + $("#dropdown").val(), 500, 30);
    },
    styles: {
        fontSize: 20,
        overflow: 'linebreak',
        columnWidth: 'wrap',
    },
    theme: 'grid'
});

doc.save("Report.pdf");

Is there a solution for this?

[simonbengtsson]

I can't replicate the issue. Can you create a runnable example with data included?

[jamessuske]

https://plnkr.co/edit/IBfQEtAzjBdpeiC1Vqv5?p=preview

[jdmcd]

@simonbengtsson Hi! Big fan of the library. I also am struggling with this, even when I copy your code directly from the "long" example. My text just continues off the screen and pushes the columns to the left of it off the page with it. Is there a solution?

[jdmcd]

This is the code that I am attempting to execute:

function generatePdf(cols, rows, name, headerText) {
        // Only pt supported (not mm or in)
        var doc = new jsPDF('p', 'pt');
        var totalPagesExp = "{total_pages_count_string}";
        var leftMargin = 40;

        doc.setFontSize(10);

        doc.autoTable(cols, rows, {
            theme: "grid",
            margin: {horizontal: 7},
            bodyStyles: {valign: 'top'},
            styles: {overflow: 'linebreak', columnWidth: 'wrap'},
            addPageContent: function(data) {
                doc.text(headerText, leftMargin, 30);
                var str = "Page " + data.pageCount;
                // Total page number plugin only available in jspdf v1.0+
                if (typeof doc.putTotalPages === 'function') {
                    str = str + " of " + totalPagesExp;
                }

                str = str + ". Generated on " + Date();
                doc.text(str, leftMargin, doc.internal.pageSize.height - 10);
            }
        });

        // Total page number plugin only available in jspdf v1.0+
        if (typeof doc.putTotalPages === 'function') {
            doc.putTotalPages(totalPagesExp);
        }

        doc.save(name);
    }

This is a picture of the outputted PDF:

[Tichju]

Hello,
Did you find a solution ?
I have the same problem.

I also tested with custom columnWidth but it doesn't work.
(Last post -> #20 )

[jdmcd]

Unfortunately not :(

[Tichju]

The solution of custom widths it works, but you have to put the width between ''

columnStyles: {
description: {
columnWidth: '97'
},
featureName: {
columnWidth: '40'
}
}

[jdmcd]

Can you share the full code?

[Tichju]

In theory..

    doc.autoTable(columns, JSON.parse(rows), {
        margin: {horizontal: 5},
        bodyStyles: {valign: 'middle'},
        styles: {overflow: 'linebreak', columnWidth:'wrap'},
        theme: 'plain',
        columnStyles: {
            text: {
                columnWidth: 'wrap'
            },
            columnName1: {
                columnWidth: '45',
                fontStyle: 'bold',
                textColor: 240                
            },
            longColumnName: {
                columnWidth: '107'
            },
            columnName2: {
                columnWidth: '45'
            },
            columnName3: {
                columnWidth: '45'
            },
            columnName4: {
                columnWidth: '45'
            }
        }
    });

But in real, longColumnName is very long, and the other columns are very thin (a few characters wide).
It does not correspond at all to the values ​​entered.
I'm still looking for why. ^^'

[jdmcd]

Ah interesting. Ok, please post again if you find the reason :) Thanks for your work on this!

[Tichju]

doc.autoTable(columns, JSON.parse(rows), {
        margin: {horizontal: 5},
        bodyStyles: {valign: 'middle'},
        styles: {overflow: 'linebreak', columnWidth:'wrap'},
        theme: 'plain',
        columnStyles: {
            text: {
                columnWidth: 'wrap'
            },
            columnName1: {
                columnWidth: 45,
                fontStyle: 'bold',
                textColor: 240                
            },
            description: {
                columnWidth: 107
            },
            columnName2: {
                columnWidth: 45
            },
            columnName3: {
                columnWidth: 45
            },
            columnName4: {
                columnWidth: 45
            }
        }
    });

The code looks for numbers, it was enough to remove the ''.
'107' → 107

[simonbengtsson]

Should add a warning if a string is provided!

[lavirana]

how I can set the single row height according to the image height in the table?