Convertir HTML a PDF en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Convertir HTML a PDF en JavaScript
Kushank Singh 12 octubre 2023
JavaScript JavaScript PDF
  1. Utilice la biblioteca jsPDF para convertir HTML a PDF
  2. Utilice un objeto de ventana para convertir HTML a PDF
Convertir HTML a PDF en JavaScript

Al descargar datos masivos desde una aplicación web, el formato de archivo PDF resulta útil. Permite a los usuarios descargar material dinámico como un archivo para su consumo fuera de línea. El material HTML se transforma en un documento PDF y se descarga como un archivo PDF utilizando la capacidad de exportación a PDF. Un script del lado del servidor convierte HTML a PDF en la aplicación web dinámica.

En este tutorial, realizaremos dicha conversión utilizando JavaScript.

Utilice la biblioteca jsPDF para convertir HTML a PDF

En este método, usaremos la biblioteca jsPDF para convertir HTML a PDF. Es una de las mejores bibliotecas para usar. La biblioteca jsPDF ofrece varias técnicas y opciones para personalizar la generación de PDF.

Verifique el código a continuación.

  • 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});

La propiedad orientation establece la orientación del papel. Las opciones setFont() y setFontType() se utilizan para establecer la fuente y el estilo de fuente del texto. Las funciones setFontSize() y setTextColor() se utilizan para establecer el tamaño de fuente y el color del texto.

Utilice un objeto de ventana para convertir HTML a PDF

En este método, crearemos un objeto de ventana, que usaremos para crear un documento asociado y escribir el texto HTML en el archivo para exportarlo como PDF.

Ver el código a continuación

<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>

En el ejemplo anterior, la función window.open() abrirá un documento con las dimensiones especificadas, y el método document.write() se usa para escribir texto en el documento abierto.

Artículo relacionado - JavaScript PDF