DIV BASE 64 APP Recibos

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


<div id="conteudo">
  <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>
  document.getElementById('gerarPdfBtn').addEventListener('click', () => {
    const { jsPDF } = window.jspdf;
    const elemento = document.getElementById('conteudo');

    html2canvas(elemento, { scale: 2 }).then(canvas => {
      const imgData = canvas.toDataURL('image/png');

      const pdf = new jsPDF('p', 'mm', 'a4');

      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);

      // Gera o PDF como Data URI base64 (string)
      const pdfBase64 = pdf.output('datauristring');

      // Aqui você pode enviar essa string para o app Kodular
      // Exemplo: window.KodularInterface.receivePdf(pdfBase64);
      // Para teste, vamos mostrar no console:
      console.log(pdfBase64);

      // Opcional: mostrar alert para confirmar geração
      alert('PDF gerado em base64. Veja o console para a string.');

      // Se quiser abrir o PDF em nova aba (para teste)
      // window.open(pdfBase64);
    });
  });
</script>