Incluir botão de impressão no cabeçalho do site

brunosm13 commented 1 week ago

Através do exemplo gerado pelo ChatGPT, incluir a bibliotecas necessárias na pasta JS, incluir um botão no site onde ele irá utilizá-las para imprimir o currículo da pessoa.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerar PDF</title>
</head>
<body>
    <div id="content">
        <h1>Olá, Mundo!</h1>
        <p>Este é um exemplo de geração de PDF a partir de HTML.</p>
    </div>
    <button id="generate-pdf">Gerar PDF</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script>
        document.getElementById('generate-pdf').addEventListener('click', function () {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();
            const element = document.getElementById('content');

            html2canvas(element).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const imgWidth = 210; // A4 width in mm
                const pageHeight = 295; // A4 height in mm
                const imgHeight = (canvas.height * imgWidth) / canvas.width;
                let heightLeft = imgHeight;

                let position = 0;

                doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;

                while (heightLeft >= 0) {
                    position = heightLeft - imgHeight;
                    doc.addPage();
                    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }
                doc.save('documento.pdf');
            });
        });
    </script>
</body>
</html>

brunosm13 commented 1 week ago

Percebi que o tratamento dessas bibliotecas ficariam muito inviável, porque a margem não é configurada corretamente e algumas informações se repetem se estiver em mais de uma página. Então fui pela maneira mais simples que é chamar a impressão do dispositivo e daí o usuário fica responsável pela configuração de como deseja gerar o arquivo.

brunosm13 commented 1 week ago

Publicado em produção e funcionalidade consegue atender dispositivos móveis.

brunosm13 / curriculo-json

Incluir botão de impressão no cabeçalho do site #5