Programmiererforum

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

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>
[list]
[*] html2canvas für PDF -Generation < /li>
JSPDF zum Speichern der PDF
[*] Lucide React Icons
[*] Rashwind -CSS zum Styling
[/list] < 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]// 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}

[/code]