Printar Div para pdf

shopbox scripts

by thvinic

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Print Div to PDF</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>

<div id="div-to-print" style="width: 300px; height: 300px; background-color: #f2f2f2;">
  <h1>Conteúdo da Div</h1>
  <p>Este é um exemplo de conteúdo dentro da div.</p>
</div>

<form>
  <label for="doc-name">Nome do Documento:</label>
  <input type="text" id="doc-name" placeholder="Nome do Arquivo">
  <button type="button" id="print-button">Print to PDF</button>
</form>

<script>
  $('#print-button').on('click', function() {
    var width = 300;
    var height = 300;
    var pdf = new jsPDF('p', 'pt', [width, height]);

    html2canvas($('#div-to-print')[0], {
      scale: 3
    }).then(function(canvas) {
      var imgData = canvas.toDataURL('image/png');
      pdf.addImage(imgData, 'PNG', 0, 0, width, height);
      var docName = $('#doc-name').val() || 'div-to-pdf';
      pdf.save(docName + '.pdf');
    });
  });
</script>

</body>
</html>