I'm trying to have a table break line using the jsPDF plugin auto-table. The table is being generated from HTML and some of the cells use a Unicode decimal code within. When this tag is used, it won't break the line. Is there a way to properly break the line, or is this a bug where I'll have to work around the characters?
Code snippet is below, but might block the PDF, jsFiddle link as well.
const {
jsPDF
} = window.jspdf;
function genPDF() {
const doc = new jsPDF({
orientation: "landscape",
unit: "in",
format: [8.5, 11]
});
doc.autoTable({
html: '#my-table',
tableWidth: 5,
styles: {
fontSize: 8,
halign: 'left',
overflow: 'linebreak'
},
columnStyles: {
0: {
cellWidth: 'auto'
},
1: {
cellWidth: 'auto'
},
2: {
cellWidth: 3
}
},
rowPageBreak: 'auto'
});
doc.save('jsfiddle.pdf')
}<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" integrity="sha512-qZvrmS2ekKPF2mSznTQsxqPgnpkI4DNTlrdUmTzrDgektczlKNRRhy5X5AAOnx5S09ydFYWWNSfcEqDTTHgtNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.7.0/jspdf.plugin.autotable.min.js" integrity="sha512-X9Dd3Srt5HE0bHN7+BVmP2Wn2Eltyrsvn+szOxrLlI8mW+fv3jaFjd+HxwYzRsbJL1PI63mvztyDbYU56OtlOA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button onclick="genPDF()">Generate PDF</button>
<table class="text-white font-smaller" id="my-table">
<thead>
<tr>
<th class="py-1" style="width:25%" scope="col">Term</th>
<th class="py-1" scope="col">Phrasing</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th class="text-center py-2" colspan="2">Section 1</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Text here with words that don't have abbr tag <sup>1,2</sup></td>
</tr>
<tr>
<th scope="row">B</th>
<td>Text here with words that don't have abbr tag <sup>1,2</sup></td>
</tr>
<tr>
<th scope="row">C</th>
<td>this is a cell with long text and no special characters, so it is breaking correctly within the table. More words to force a break in the table cell. Lorem ipsum.;</td>
</tr>
<tr>
<th scope="row">D</th>
<td>this is a cell with long text and a special character: ≤, so it is not breaking correctly within the table. More words to force a break in the table cell. Lorem ipsum fshnjilkfweshnjkl </td>
</tr>
</tbody>
</table>
</body>