Generar PDF en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Generar PDF en JavaScript
Muhammad Muzammil Hussain 12 octubre 2023
JavaScript JavaScript PDF
  1. Generar PDF en JavaScript
  2. Utilice la biblioteca jsPDF para generar PDF en JavaScript
  3. Utilice la biblioteca html2pdf para generar PDF en JavaScript
Generar PDF en JavaScript

En este artículo, aprenderemos cuál es la mejor biblioteca para la creación de PDF en el código fuente de JavaScript y cómo podemos usar esa biblioteca en nuestro código JavaScript.

Generar PDF en JavaScript

A menudo hemos visto opciones de descarga de archivos en páginas web como PDF. El desarrollador debe generar un archivo PDF utilizando el código del programa para proporcionar esta funcionalidad al usuario.

Podemos usar varias bibliotecas en JavaScript para crear un archivo PDF. Por ejemplo, muchos sitios web brindan la funcionalidad para generar y descargar archivos como facturas, boletos, CV, etc.

Estos sitios web utilizan diferentes bibliotecas para realizar esta funcionalidad. Discutiremos y aprenderemos las dos bibliotecas más utilizadas con la ayuda de ejemplos.

Utilice la biblioteca jsPDF para generar PDF en JavaScript

Solo para JavaScript, tenemos el paquete de biblioteca npm jsPDF para crear PDF. No se necesitan secuencias de comandos del lado del servidor al usar esta biblioteca.

Podemos generar un archivo PDF procesando el contenido dinámico. Es una forma rápida y sencilla de generar un archivo PDF en 3 líneas de código, como se muestra a continuación.

Sintaxis básica:

var myDoc = new jsPDF();                    // object
myDoc.text(10, 10, 'DelftStack Website!');  // content
myDoc.save('dummyFile.pdf');                // saving

Necesitamos crear un objeto y almacenarlo en una variable usando la palabra clave nuevo y jsPDF(). Luego, debemos configurar el contenido como una cadena con la propiedad texto de un objeto.

Finalmente, guardamos el archivo PDF con la propiedad guardar.

Utilice la biblioteca html2pdf para generar PDF en JavaScript

La biblioteca html2pdf nos permite incrustarla en nuestro sitio web con una fuente de JavaScript y convertir el contenido de la página web en un documento PDF. El documento PDF se podrá descargar como PDF.

Simplemente descargue la biblioteca e impórtela a nuestra fuente antes de usarla.

Sintaxis básica:

const docElement = document.getElementById('ticket');
html2pdf().from(docElement).save();

Como se muestra arriba, obtenemos el contenido del elemento mediante document.getElementById() y usando html2pdf().from(docElement).save() podemos convertir el contenido a PDF y descargar el archivo.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>HTML to PDF conversion</title>
        <script src="html2pdf.bundle.min.js"></script>

        <script>
            function createPDF() {
                // get the element of ticket content.
                const docElement = document.getElementById('ticket');
                // select the element and save as the PDF.
                html2pdf().from(docElement).save();
            }
        </script>
    </head>
    <body>
    <h1 style="color:blueviolet">DelftStack Learning</h1>
    <h3>JavaScript create and download pdf</h3>

        <div id="ticket">
            <h1>Our Ticket</h1>
            <p>Ticket content here</p>
        </div>
        <button onclick="createPDF()">Download as PDF</button>
    </body>
</html>

Producción:

Use la biblioteca html2pdf para generar PDF en JavaScript

En el ejemplo de fuente HTML anterior, ya descargamos la biblioteca html2pdf y la importamos en las etiquetas <head>. Creamos un elemento div para el ticket, le definimos el id ticket y le proporcionamos contenido ficticio a ese elemento div de HTML.

Luego, hay un elemento de botón Descargar como PDF en el evento de clic de ese botón; hemos llamado a la función createPDF(). Dentro de esa función, en primer lugar, tenemos el elemento usando document.getElementById('ticket') y almacenándolo en una variable.

Finalmente usamos el método de la biblioteca html2pdf from() y save(). Solo necesitamos pasar el elemento en el método from() como argumento y llamar al método save().

Descargue esta biblioteca, guarde la fuente anterior con la extensión de HTML y ábrala en el navegador para ver los resultados.

Artículo relacionado - JavaScript PDF