Neste tutorial, vou te mostrar como criar um botão que gera PDF a partir de uma área específica da tela. Essa funcionalidade pode ser útil para diversos projetos, como a criação de certificados dinâmicos, cartões de visita personalizados e muito mais. Utilizando ferramentas como WordPress, Elementor e Jet Engine, você pode facilmente gerar conteúdos dinâmicos em formato PDF. Vou te guiar passo a passo para criar esse botão e imprimir uma área definida da tela em um PDF.
Passo 1: Configuração inicial
Primeiramente, abra uma página do Elementor ou acesse o local onde deseja imprimir a área específica da tela. Neste exemplo, vou utilizar um botão e um componente HTML para gerenciar a ação de imprimir. Arraste um botão do Elementor para a área desejada e defina o ID do botão como “btn-download”. Certifique-se de remover qualquer link associado ao botão, pois ele será ativado por meio de JavaScript posteriormente.
Passo 2: Adicionando o código HTML para Gerar o PDF
Agora, adicione um componente HTML à página e cole o código fornecido no meu GitHub. Copie todo o código a partir da linha 12 até a linha 55 e cole dentro do componente HTML. Esse código contém a função necessária para imprimir a área específica da tela quando o botão for clicado. Observe que a função chamada “HTML to Canvas” é responsável por fazer a captura da área desejada. Certifique-se de copiar corretamente o nome da área que você deseja imprimir, que neste caso é “print-area”.
Script: https://gist.github.com/dantetesta/c65c934518d262d1fbbb032b4711dc19
Passo 3: Definindo a área de impressão
No contêiner onde você declarou o ID da área de impressão como “print-area”, acesse as configurações avançadas de CSS personalizado. Copie o trecho de código fornecido no GitHub, que permite definir o tamanho fixo da área de impressão. Esse tamanho fixo deve corresponder à largura e altura da área desejada. No exemplo fornecido, a área de impressão possui 1000 pixels de largura por 707 pixels de altura, o que é proporcional a um formato A4. Certifique-se de ajustar esses valores de acordo com a sua necessidade.
Passo 4: Personalizando o código
Caso queira alterar o nome do arquivo gerado, basta modificar o valor da variável “fileName” para o nome desejado. Por exemplo, você pode alterar para “certificado.pdf” ou qualquer outro nome que faça sentido para o seu projeto.
Passo 5: Testando a funcionalidade
Após salvar todas as configurações, recarregue a página para ver o botão em ação. Ao clicar no botão, um PDF será gerado com base na área definida anteriormente. Observe que o PDF gerado é uma captura de tela, ou seja, uma imagem, e não um PDF convencional com texto selecionável. Portanto, se você precisar imprimir o PDF com qualidade aceitável, recomendo testar a impressão em uma gráfica.
Conclusão
Com esse botão de geração de PDFs, você pode criar facilmente certificados dinâmicos, cartões de visita personalizados e muito mais. Lembre-se de explorar a documentação do JS PDF para personalizar ainda mais o formato e a orientação do seu PDF. Caso precise de outras opções para gerar PDFs, existem diversas APIs e tecnologias disponíveis que podem ser úteis para o seu projeto. Espero que este tutorial tenha sido útil e que você aproveite essa funcionalidade em suas criações. Até o próximo vídeo!
Confira esse outro vídeo sobre Gerar PDF
Made with VideoToBlog
