I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The downloaded PDF appears zoomed in or with excessively large font sizes.
To address this problem, I have set the width to 210mm and height to 297mm for the HTML element that will be converted into a PDF. Below is the code snippet I'm using to generate and download the PDF:
function handleDownload() {
const doc = new jsPDF('p', 'mm', [297, 210]);
const content = pdfRef.current;
doc.html(content, {
callback: function (doc) {
doc.save('newFile');
}
});
}
Here is the JSX element that I want to be downloadable as a PDF:
<main id="classic" ref={pdfRef} className='mx-auto bg-white shadow w-[210mm] h-[297mm]'>
<button onClick={handleDownload} className="bg-mainBlack text-white px-4 py-2 text-xs">download</button>
{/* Rest inner elements */}
</main>
This screenshot shows how the resume looks in the browser (ignore the lack of styling as it's not finalized):
https://i.stack.imgur.com/vfFc4.png
Additionally, here is a comparison of how jsPDF generates the PDF:
https://i.stack.imgur.com/2trLi.png
I am seeking a solution to ensure the PDF is generated at the correct size without distortion.