I'm using html2pdf to convert a html page to PDF file and download it. Everything is working fine in term of conversion and the PDF file is downloaded successfully, but when clicking on a button to generate the file a weird behavior is happening, the UI changes for a seconde ( colors, size and text font of the elements changes as shown in the attached captions )
html2pdf script :
var opt = {
pagebreak : { after : ['.Card'] },
margin: 1,
filename: 'qrCodes.pdf',
image: { type: 'png', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'pt', format: 'letter', orientation: 'portrait' }
};
html2pdf().from(myDocument).set(opt).save();
Normal UI state: Picture of normal UI state When generating the PDF: Picture of UI weird behavior When generating the PDF
This issue drives me crazy, any solutions ?
The problem is caused by the fact that JavaScript is single threaded so this type of processes must be implemented in separate thread via service workers for example. Actually this issue opened but not solved in html2pdf : The html2pdf processing freezes the UI
or as a workaround you can launch the conversion process in a separated component so it doesn't affects the current UI.
