How to fit a wide table using jspdf, jspdf-autotable
24,959
I'm not completely sure I understood your question, but if you want some columns to simply wrap the content and some to linebreak you can to like this.
function demoPDF() {
var pdfsize = 'a0';
var pdf = new jsPDF('l', 'pt', pdfsize);
pdf.autoTable({
html: '#table',
startY: 60,
styles: {
fontSize: 50,
cellWidth: 'wrap'
},
columnStyles: {
1: {columnWidth: 'auto'}
}
});
pdf.save(pdfsize + ".pdf");
};
demoPDF();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<table id="table" style="display: none;">
<thead>
<tr>
<th title="Field #1">ID</th>
<th title="Field #2">First name</th>
<th title="Field #3">Last name</th>
<th title="Field #4">Email</th>
<th title="Field #5">Country</th>
<th title="Field #6">IP-address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">1</td>
<td>Donna</td>
<td>Moore</td>
<td>[email protected]</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td align="right">2</td>
<td>Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice</td>
<td>Henry</td>
<td>[email protected]</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td align="right">3</td>
<td>Ruth</td>
<td>Wells</td>
<td>[email protected]</td>
<td>Trinidad</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td align="right">4</td>
<td>Jason</td>
<td>Ray</td>
<td>[email protected]</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td align="right">5</td>
<td>Jane</td>
<td>Stephens</td>
<td>[email protected]</td>
<td>United States</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>[email protected]</td>
<td>Canada</td>
<td>18.186.38.37</td>
</tr>
</tbody>
</table>
Author by
A E
Updated on August 14, 2020Comments
-
A E almost 4 years
I'm using jspdf with the plugin jspdf-autotable to create a pdf for a very wide table, is there a way to auto fit the table/column data to any page size?
I tried the code below with overflow: 'linebreak' but it breaks the words halfway not at the empty space
function demoPDF() { var pdfsize = 'a0'; var pdf = new jsPDF('l', 'pt', pdfsize); var res = pdf.autoTableHtmlToJson(document.getElementById("rpt_tbl")); pdf.autoTable(res.columns, res.data, { startY: 60, tableWidth: 'auto', columnWidth: 'auto', styles: { overflow: 'linebreak' } }); pdf.save(pdfsize + ".pdf"); };
-
Saad A about 8 yearsThis answer helped me with my table overflow problem for jsPDF.
-
Beckham_Vinoth almost 8 years@Simon Bengtsson ,Hi buddy ,Me too facing same kind of problem but little different . If possible can you please tell me the solution for that Link ---> stackoverflow.com/questions/38887529/…
-
Navitas28 almost 4 years@Simon Bengtsson Is there a way to fit 20-30 columns in the pdf