Convertir HTML a PDF usando JavaScript [Ejemplo completo]

Convertir HTML a PDF usando JavaScript. En varias publicaciones anteriores hemos convertido PHP a PDF usando diferentes librerías y hemos aprendido juntos. En este tutorial veremos otra forma para crear un documento PDF, usando JavaScript como base.

A continuación, veremos 2 ejemplos completos para convertir HTML a PDF usando JavaScript, uno usando formulario para cargar un archivo y otro convertir contenido de un DIV a PDF.

Convertir HTML a PDF usando un formulario

Hoy en día la creación de documentos PDF es un atributo imprescindible de los sistemas web. Por ejemplo, enviar comprobantes de pagos vía email, proformas, catálogos, etc. Por lo tanto, convertir HTML a PDF para algunos puede resultar complicado, pero lo haremos más sencillos con dos ejemplos completos.

Recursos para crear PDF con JavaScript

La biblioteca jsPDF .- Usaremos la biblioteca jsPDF de JavaScript para lograr la conversión requerida. es una de las más potentes para crear PDF en el lado del cliente.
html2canvas .- Es un requerimiento para crear PDF a partir de HTML.

Estructura de archivos del script

Este vendría a ser un esquema de distribución de ficheros necesarios para el funcionamiento del script.

convertir-html-pdf-javascript
     |
     ├─── js
     |    |
     |    ├─ convertir.js
     |
     ├─── inc
     |    |
     |    ├─ contenedor.php
     |    |
     |    ├─ header.php
     |    |
     |    └─ footer.php
     |
     └─ index.php

¿Cuáles son los pasos para lograr crear un PDF con JavaScript?

Vamos a trabajar con 4 pasos fundamentales para lograr el objetivo deseado. veamos a continuación.

Primer paso: Framework Bootstrap, jQuery y jsPDF

Para tener un diseño profesional vamos a incluir la biblioteca Bootstrap en el index.php ya que diseñaremos el formulario usando clases del Bootstrap. También incluiremos la biblioteca jQuery.

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

Biblioteca jsPDF

Es muy importante incluir la biblioteca jsPDF y html2canvas justo antes del final de la etiqueta body. Además, debemos de incluir un fichero llamado convertir.js que contendrá las funciones JavaScript que son necesarios para crear el PDF.

<script src="js/jspdf.umd.min.js"></script> 
<script src="js/html2canvas.min.js"></script> 
<script src="js/convertir.js"></script>

Segundo paso: Crear formulario HTML

En el archivo index.php, crearemos un formulario HTML5 con una caja de texto HTML (<input type="file">) para poder cargar un archivo HTML y convertirlo a PDF. Sin embargo, agregaremos una vista previa del archivo.

 <form name="foo" method="post" class="input-form" enctype="multipart/form-data">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Subir archivo</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<div class="form-group has-success">
<input type="file" id="fileUpload" name="file" class="form-control" accept=".html,.htm">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group has-success">
<div class="preview hidden">
<p><strong>Vista previa</strong></p>
<hr>
<div id="previewHtmlContent"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 left">
<input type="button" value="Mostrar Previsualización" class="btn btn-info" id="previewHtml">
<span id="error-message" class="error"></span>
<input type="button" value="Crear PDF" class="btn btn-info hidden" id="convertHtmlToPDF">
</div>
</div>
</div>
</div>
</form>

Tercer paso: Vista previa del archivo HTML

Al hacer clic en el botón Vista previa, llamaremos a la función previewHTMLFile() que se encuentra en el fichero convertir.js para mostrar la vista previa del archivo HTML cargado por el formulario.

$(document).on('click', '#previewHtml', function(){
previewHTMLFile();
});

Contenido de la función previewHTMLFile() para mostrar la vista previa dentro del formulario HTML. Por lo tanto, usaremos la clase «preview» para mostrar.

function previewHTMLFile() { 
var filePath = $('#fileUpload').get(0).files[0]; 
var fileContents;
$("#error-message").html("");
$("#fileUpload").css("border", "#a6a6a6 1px solid");
if ($(filePath).length != 0) {
var reader = new FileReader();
reader.onload = function(e) { 
fileContents = e.target.result; 
$(".preview").show();
$("#previewHtmlContent").html(fileContents); 
$("#previewHtml").addClass('hidden');
$("#convertHtmlToPDF").removeClass('hidden');
$(".preview").removeClass('hidden');
$(".preview").addClass("borde");

}
reader.readAsText(filePath);
} else {
$("#error-message").html("required.").show();
$("#fileUpload").css("border", "#d96557 1px solid");
}
}

Cuarto paso: Convertir archivo HTML a PDF

Una vez generado la vista previa del archivo HTML, se muestra el botón para crea el PDF a través del ID convertHtmlToPDF. Por lo tanto, cuando presione el botón «Convertir HTML», llamaremos a la función converHTMLToPDF() para convertir HTML a PDF y se abrirá un cuadro de dialogo con la opción de descargar el documento PDF generado.

$(document).on('click', '#convertHtmlToPDF', function(){
converHTMLToPDF();
});

La función converHTMLToPDF() nos servirá para obtener contenido de archivo HTML y convertir a PDF usando la función html() de jsPDF. La función save() llamada desde jsPDF.

function converHTMLToPDF() {
const { jsPDF } = window.jspdf;
var pdf = new jsPDF('l', 'mm', [1200, 1210]);
var pdfjs = document.querySelector('#previewHtmlContent');
pdf.html(pdfjs, {
callback: function(pdf) {
pdf.save("output.pdf");
},
x: 10,
y: 10
});
}

Puede ver la demostración en vivo desde el enlace de demostración.

Usando contenido de un DIV

Existen varias formas de generar documentos PDFs a través de sistemas web y/o diversos lenguajes de programación que se basan en generar PDF al lado del servidor.

Ahora, si desea generar PDF al lado del cliente podemos usar esta solución. JavaScript es la forma más fácil de convertir HTML a PDF. Hoy en día existen varias bibliotecas de JavaScript disponibles para generar PDF a partir de HTML. jsPDF es una de las mejores bibliotecas para convertir HTML a PDF usando JavaScript.

Este ejemplo es similar al ejemplo anterior solo que implementaremos desde otro punto de vista.

Incluir jQuery y la librería jsPDF

Hay que agregar los archivos de biblioteca jQuery y jsPDF para usar la clase jsPDF correctamente.

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- jsPDF library -->
<script src="js/jspdf.min.js"></script>

Instanciar la clase jsPDF

Para poder llamar a jsPDF debemos de utilizar la siguiente línea de código para crear instancias y utilizar el objeto jsPDF en JavaScript.

var doc = new jsPDF();

Generar PDF usando JavaScript

En este ejemplo siguiente se observa cómo utilizar la biblioteca jsPDF para generar archivos PDF mediante JavaScript declarando sus instancias y variables.

var doc = new jsPDF();

doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');

// Add new page
doc.addPage();
doc.text(20, 20, 'Visita Baulphp.com');

// Save the PDF
doc.save('document.pdf');

Convertir contenido HTML a PDF usando JavaScript

Se muestra cómo utilizar la biblioteca jsPDF para convertir HTML a PDF y generar archivos PDF a partir de contenido HTML mediante JavaScript.

Código HTML:

<div id="content">
<!-- HTML contnet goes here -->
</div>

<div id="elementH"></div>

Código JavaScript:

var doc = new jsPDF();
var elementHTML = $('#contnet').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});

// Save the PDF
doc.save('sample-document.pdf');

Configuraciones útiles

La biblioteca jsPDF proporciona varios métodos y opciones para configurar la creación de PDF. A continuación, se indican algunos de los métodos útiles de la clase jsPDF que se utilizan comúnmente para exportar HTML a PDF.

Cambiar la orientación del papel

La siguiente secuencia de código nos permite cambiar la orientación de las hojas en el documento PDF y su contenido.

var doc = new jsPDF({
orientation: 'landscape'
});

doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');

// Add new page
doc.addPage();
doc.text(20, 20, 'Visit Baulphp.com');

// Save the PDF
doc.save('document.pdf');

Cambiar fuente de texto:

Usando los siguientes métodos setFont() y setFontType() nos da la posibilidad de establecer la fuente de texto y el estilo de fuente en el PDF.

var doc = new jsPDF();

doc.text(20, 20, 'This is the default font.');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is courier normal.');

doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');

doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');

doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');

// Save the PDF
doc.save('document.pdf');

Cambiar el tamaño de la fuente

El método setFontSize() sirve para establecer el tamaño de fuente del texto al momento de generar el documento PDF.

var doc = new jsPDF();

doc.setFontSize(24);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');

// Save the PDF
doc.save('document.pdf');

Cambiar el color del texto

Si deseamos cambiar el color de texto a un color personalizado podemos usar el método setTextColor() para establecer el color del texto.

var doc = new jsPDF();

doc.setTextColor(100);
doc.text(20, 20, 'This is gray.');

doc.setTextColor(150);
doc.text(20, 30, 'This is light gray.');

doc.setTextColor(255,0,0);
doc.text(20, 40, 'This is red.');

doc.setTextColor(0,255,0);
doc.text(20, 50, 'This is green.');

doc.setTextColor(0,0,255);
doc.text(20, 60, 'This is blue.');

// Save the PDF
doc.save('document.pdf');

Ejemplo completo del ejemplo 02

Aquí mostramos todas las líneas de código y por ende las declaraciones de librerías y framework que son necesarias para crear el PDF.

<?php 
include('inc/header.php');
?>
<title>Baulphp.com : Convertir HTML a PDF usando Javascript</title>
<?php include('inc/contenedor.php');?>
<div class="container">
<h3>Demo: Convertir HTML a PDF con Javascript</h3>
<hr>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Ver demostración</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div>
<button class="btn btn-primary" onclick="generatePDF();">Click a generar PDF</button>
<button class="btn btn-primary" onclick="convert_HTML_To_PDF();">Convertir HTML a PDF</button>

<!-- HTML content for PDF creation -->
<div id="content">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="elementH"></div>
</div>
</div>

</div>

</div>
</div>

</div>
<script src="js/jspdf.min.js"></script> 
<script>
/*
* Generate 2 pages PDF document
*/
function generatePDF() {
var doc = new jsPDF();

doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');

doc.text(20, 40, 'This is the default font.');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 50, 'This is courier normal.');

doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 60, 'This is times italic.');

doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 70, 'This is helvetica bold.');

doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 80, 'This is courier bolditalic.');

doc.addPage();

doc.setFontSize(24);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');

doc.setTextColor(100);
doc.text(20, 40, 'This is gray.');

doc.setTextColor(150);
doc.text(20, 50, 'This is light gray.');

doc.setTextColor(255,0,0);
doc.text(20, 60, 'This is red.');

doc.setTextColor(0,255,0);
doc.text(20, 70, 'This is green.');

doc.setTextColor(0,0,255);
doc.text(20, 80, 'This is blue.');

// Save the PDF
doc.save('documento_generado.pdf');
}

/*
* Convert HTML content to PDF
*/
function convert_HTML_To_PDF() {
var doc = new jsPDF();
var elementHTML = $('#content').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});

// Save the PDF
doc.save('conversion-html-a-pdf.pdf');
}
</script>
<?php include('inc/footer.php');?>

Guardar archivo PDF en Disco

Si deseamos guardar el fichero PDF generado en el disco tenemos que usar PHP para poder mover el archivo generado a una carpeta en específico.

<?php 
include('inc/header.php');
?>
<title>Baulphp.com : Convertir HTML a PDF usando Javascript</title>
<?php include('inc/contenedor.php');?>
<div class="container">
<h3>Demo: Convertir HTML a PDF con Javascript</h3>
<hr>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Ver demostración</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div>
<button class="btn btn-primary" id="generatereport">Guardar PDF</button>

<!-- HTML content for PDF creation -->
<div id="content">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="elementH"></div>
</div>
</div>

</div>

</div>
</div>

</div>
<script src="js/jspdf.min.js"></script> <script>

$('#generatereport').click(function()
{
var doc = new jsPDF();
var elementHTML = $('#content').html();
doc.fromHTML(elementHTML, 15, 15,
{'width': 170},
function()
{
var blob = doc.output('blob');

var formData = new FormData();
formData.append('pdf', blob);

$.ajax('upload.php',
{
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){console.log(data)},
error: function(data){console.log(data)}
});
}
);
});
</script>
<?php include('inc/footer.php');?>

Archivo upload.php

Este archivo PHP que contiene la función move_uploaded_file que se encargara de almacenar en una determinada carpeta el fichero PDF creado.

También, se podría personalizar el contenido de este fichero agregando funciones como ser time() y/o date para el nombre del archivo creado.

<?php
move_uploaded_file(
$_FILES['pdf']['tmp_name'], "./uploads/test.pdf"
);
?>

Conclusión

Hoy hemos aprendido con dos ejemplos completos para convertir HTML a PDF y generar archivos PDF utilizando JavaScript.
En vuestros proyectos pueden agregar fácilmente la funcionalidad Exportar a PDF en cualquier sector o DIV que posea su página web o proyecto web, sin usar el script del lado del servidor, esto conlleva a no saturar nuestro servidor web.
La secuencia de creación de PDF se puede mejorar con opciones personalizadas de configuración de jsPDF según sus necesidades y estilos.
Descargue el paquete de código fuente para obtener todos los archivos necesarios, incluida la biblioteca JavaScript jsPDF con los dos ejemplos funcionando correctamente.

Descargar