gerar documento PDF App

by thvinic

HTML

<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.5.1/jspdf.umd.min.js"></script>
<style>
  #conteudo {
    width: 800px;
    padding: 20px;
    background: #fff;
    color: #000;
  }
  /* Estilize sua div conforme necessário */
</style>
</head>
<body>

<div id="conteudo">
  <!-- Conteúdo que será exportado para PDF -->
  <h1>Exemplo de Conteúdo</h1>
  <p>Texto, imagens, tabelas, etc.</p>
  <table border="1" cellpadding="5" cellspacing="0">
    <tr><th>Nome</th><th>Idade</th></tr>
    <tr><td>João</td><td>30</td></tr>
    <tr><td>Maria</td><td>25</td></tr>
  </table>
  <img src="https://via.placeholder.com/150" alt="Imagem Exemplo" />
</div>

<button id="gerarPdfBtn">Gerar Documento</button>

<script>
  // Função para gerar PDF ao clicar no botão
  document.getElementById('gerarPdfBtn').addEventListener('click', () => {
    const { jsPDF } = window.jspdf;

    const elemento = document.getElementById('conteudo');

    // Usa html2canvas para capturar a div como imagem
    html2canvas(elemento, { scale: 2 }).then(canvas => {
      const imgData = canvas.toDataURL('image/png');

      // Cria um PDF no formato A4 (210mm x 297mm)
      const pdf = new jsPDF('p', 'mm', 'a4');

      // Calcula as dimensões da imagem para caber no PDF mantendo proporção
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

      // Adiciona a imagem no PDF
      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);

      // Salva o arquivo PDF
      pdf.save('documento.pdf');
    });
  });
</script>