I’m trying to export my React table component as a pdf using jspdf and html2canvas but while the table looks fine the exported pdf has all text in fields start from center rather than being central aligned.

This is how it looks in my application

And this is how it looks when exported as pdf

This is the code I’m using with jsPDF:

const exportAsPDF = () => {
        const input = document.getElementById('divToExport');

        html2canvas(input, {
            scale: 2, // Increase scale for better resolution
            useCORS: true, // Enable CORS if using external resources
            logging: true, // Enable logging for debugging
        })
            .then((canvas) => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF('p', 'mm', 'a4',);
                const imgWidth = 210; // A4 width in mm
                const pageHeight = 295; // A4 height in mm
                const imgHeight = (canvas.height * imgWidth) / canvas.width;
                let heightLeft = imgHeight;
                let position = 0;

                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;

                while (heightLeft >= 0) {
                    position = heightLeft - imgHeight;
                    pdf.addPage();
                    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }

                pdf.save('download.pdf');
            })
            .catch((error) => {
                console.error('Error exporting to PDF:', error);
            });
    };

My component consists of div with many tables with text boxes inside.

I tried reading some documentation online but didn’t find a solution to my problem.
How can I fix this issue ? I need to see the whole serial number and left alignment is not an option as it looks bad outside of export.