Clever Geek Handbook

JsPDF auto table wide column content not breaking

I am using jsPDF Auto Table to extract html content from a table and display in a jsPDF document for export, but no matter what, I cannot get the column width splitting / wrapping in the way I would like.

Ideally, I would like the table and columns to calculate their widths automatically, while the content of the long column is wrapped across multiple lines, similar to the "long: overflow linebreak" example here: https://simonbengtsson.github.io/jsPDF-AutoTable/#long

Although I'm using the same code from the example, it doesn't generate the same way.

exportGraph = function () {
    var doc = new jsPDF();
    var elem = document.getElementById("basic-table");
    var res = doc.autoTableHtmlToJson(elem);

    doc.autoTable(res.columns, res.data, {
        startY: 15,
        margin: { horizontal: 0 },
        bodyStyles: { valign: 'top' },
        styles: { overflow: 'linebreak', columnWidth: 'wrap' },
        columnStyles: { text: { columnWidth: 'auto' } }
    });

    doc.save('test.pdf');
};

Jsfiddle example

Any help would be greatly appreciated as this is very frustrating right now !!

+6


source to share


1 answer


The key text

in the example is a reference to the data key in the example data. Since you are using a function autoTableToHtml

, your data keys will be integer based and therefore yours columnStyles

should look like this:



columnStyles: {
  2: {
    columnWidth: 'auto'
  }
}
+8


source






More articles:


All Articles