I am experiencing an unusual problem while using html2pdf to convert an HTML page to a PDF file and download it. The conversion process is successful and the PDF file is downloaded without any issues. However, when I click on a button to generate the file, the UI changes momentarily (colors, size, and text font of the elements change as illustrated in the attached screenshots).
Here is my 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();
For reference, here is the normal UI state: Picture of normal UI state And here is the UI behavior when generating the PDF: Picture of UI weird behavior When generating the PDF
This issue is perplexing me. Does anyone have a solution?