Converter HTML em PDF em JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Converter HTML em PDF em JavaScript
Kushank Singh 12 outubro 2023
JavaScript JavaScript PDF
  1. Use a biblioteca jsPDF para converter HTML em PDF
  2. Use um objeto de janela para converter HTML em PDF
Converter HTML em PDF em JavaScript

Ao baixar dados massivos de um aplicativo da web, o formato de arquivo PDF é útil. Ele permite que os usuários baixem material dinâmico como um arquivo para consumo offline. O material HTML é transformado em um documento PDF e baixado como um arquivo PDF usando o recurso de exportação para PDF. Um script do lado do servidor converte HTML em PDF no aplicativo da Web dinâmico.

Neste tutorial, faremos essa conversão usando JavaScript.

Use a biblioteca jsPDF para converter HTML em PDF

Neste método, usaremos a biblioteca jsPDF para converter HTML em PDF. É uma das melhores bibliotecas para usar. A biblioteca jsPDF oferece várias técnicas e opções para personalizar a geração de PDF.

Verifique o código abaixo.

  • HTML
<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>Convert this text to PDF.</p>
    </div>
    <div id="hidden-element">This will not be printed</div>
  </body>
</html>
  • JavaScript
var source = window.document.getElementsByTagName('body')[0];
var specialElementHandlers = {
  '#hidden-element': function(element, renderer) {
    return true;
  }
};
var doc = new jsPDF({orientation: 'landscape'});
doc.setFont('courier');
doc.setFontType('normal');
doc.setFontSize(24);
doc.setTextColor(100);
doc.fromHTML(
    elementHTML, 15, 15,
    {'width': 170, 'elementHandlers': specialElementHandlers});

A propriedade oritention define a orientação do papel. As opções setFont() e setFontType() são usadas para definir a fonte e o estilo da fonte do Texto. As funções setFontSize() e setTextColor() são usadas para definir o tamanho da fonte e a cor do texto.

Use um objeto de janela para converter HTML em PDF

Neste método, criaremos um objeto de janela, que usaremos para criar um documento associado e escrever o texto HTML no arquivo para exportá-lo como PDF.

Veja o código abaixo

<html>
<head>
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  
  <script type="text/javascript">
    $("#btnPrint").live("click", function () {
      var divContents = $("#text").html();
      var printWindow = window.open('', '', 'height=400,width=800');
      printWindow.document.write('<html><head><title>Html to PDF</title>');
      printWindow.document.write('</head><body >');
      printWindow.document.write(text);
      printWindow.document.write('</body></html>');
      printWindow.document.close();
      printWindow.print();
    });
  </script>
  </head>
  <body>
    <form id="form1">
    <div id="text">
      Convert this text to PDF.
    </div>
      <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
  </body>
</html>

No exemplo acima, a função window.open() abrirá um documento com as dimensões especificadas e o método document.write() é usado para escrever texto no documento aberto.