Convertir HTML a PDF usando JavaScript [Ejemplo completo]

Convertir HTML a PDF usando JavaScript

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 JavaScript
Convertir HTML a PDF usando JavaScript
Índice

    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.

    Relacionado  3 formas para mostrar y ocultar contraseñas input password
    Ver 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.

    Relacionado  Actualizar ventana padre desde popup: JavaScript Ejemplos

    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.

    Guardar PDF creado por JavaScript
    Guardar PDF creado por JavaScript
    <?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.

    Relacionado  Validar contraseña segura jQuery: 3 ejemplos completos

    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.

    Ver Demostración Descarga

    Descargar

    Nestor Tapia

    Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

    Entradas Relacionadas

      6 Comentarios

    1. Stharling dice:

      Una pregunta, si deseo crear una aplicación web que convierta de word a pdf, como puedo hacerlo? cuales serian los pasos a dar?

    2. Roland dice:

      Consulta mi estimado, como puedo tomar lo que esta en un div en especifico y convertir eso a PDF, de antemano gracias.

    3. fernando dice:

      buen dia
      en la segunda forma como podría personalizarlo, es decir cambiar tamaño de fuente e incorporar un encabezado con logo

    4. Vicente dice:

      Buenas. Gracias por el tutorial. Consulta, que version de jsPDF usas? Entiendo que desde la version 2 de jsPDF no está soportado "fromHTML"...

    5. Ermes dice:

      me gustaria saber como hago para que no se descarge sino que se guarde en mi servidor y visualizarlo desde ahy

      1. Nestor Tapia dice:

        Hola Ermes

        Acabo de actualizar el artículo y he agregado la opción de guardar el documento PDF generado en el disco.

        Saludos

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir