I am trying to export some tables to pdf in my application. The export functionality works. However, if table data has some long text in it, it overflows into the other rows when it is exported. I have word-break:break-word for that data, but it is being ignored when exporting to PDF. I also have letterRendering set to true. Here is my function:
var data = document.getElementById('table');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4');
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('table.pdf');
letterRendering: true;
});
Here is an image of part of the exported table that is showing the problem:
It looks fine on the webpage itself:
How should I modify my function to prevent this overflow from happening?