Blog

Scripts Úteis

Como gerar PDF a partir de Print Screen de uma área da tela

Neste tutorial, vou te mostrar como criar um botão que gera PDF a partir de uma área específica da tela.

Quer receber conteúdos em primeira mão?
Assine a minha Newsletter

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

Compartilhe
132 Visualizações

Quer receber conteúdos em primeira mão?
Assine a minha Newsletter

Entrar em Contato

Dante Testa

Para discutirmos suas necessidades, preencha o formulário; vou lhe chamar no Whatsapp.

Nome *
Whatsapp *
E-mail *
Mensagem *