Ikonen, die in der React -PDF -Erzeugung unter Verwendung von HTML2CANVAS -Ausrichtung falsch ausgerichtet sind, untersc ⇐ HTML

[Guest]

Ich verwende HTML2CANVAs, um eine PDF aus einer React -Lebenslauf -Vorlage zu erzeugen. Während die Symbole in der HTML -Vorschau perfekt ausgerichtet sind, werden sie bei der Konvertierung in PDF falsch ausgerichtet. Hier ist mein Setup: < /p>
Ich verwende: < /p>

• html2canvas für PDF -Generation < /li>
  JSPDF zum Speichern der PDF
• Lucide React Icons
• Rashwind -CSS zum Styling

< Br /> Die HTML -Vorschau sieht perfekt aus, aber beim Generieren der PDF werden Symbole wie Mail, Telefon, Gebäude2 usw. im Verhältnis zu ihrem Text falsch ausgerichtet. < /p>
Hier ist der entsprechende Code. : < /p>

Code: Select all

// 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




{email}