CODEWITHSUNDEEP
htmlcssreactjspdf-generationjspdf
Nifaz
Nifaz

Reputation: 13

Icons misaligned in React PDF generation using html2canvas -alignment differs between preview and generated PDF

I'm using html2canvas to generate a PDF from a React resume template. While the icons are perfectly aligned in the HTML preview, they become misaligned when converted to PDF. Here's my setup:

I'm using:

The HTML preview looks perfect, but when generating the PDF, icons like Mail, Phone, Building2, etc. appear misaligned relative to their text.

Here's the relevant code:

// PDF Generation
const generatePDF = async () => {
  const content = contentRef.current;
  const canvas = await html2canvas(content, {
    scale: 2,
    useCORS: true,
    logging: false
  });

  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'px',
    format: [canvas.width, canvas.height]
  });

  pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
  pdf.save('resume.pdf');
};

// Icon usage in template
<div className="flex items-center text-slate-700">
  <div className="flex-shrink-0 w-4">
    <Mail className="w-4 h-4 text-blue-600" />
  </div>
  <span className="text-sm ml-3">{email}</span>
</div>

Upvotes: 0

Views: 50

Answers (0)

Related Questions