Cómo usar JS para convertir páginas o formularios HTML en documentos PDF

Inglés | https://medium.com/coding-beauty/javascript-convert-html-to-pdf-99851d36e1cd

Usando la biblioteca jspdf, podemos convertir fácilmente cualquier página HTML o formulario a PDF:

Por ejemplo:

import { jsPDF } from 'jspdf';


const pdfContentEl = document.getElementById('pdf-content');


const doc = new jsPDF();


await doc.html(pdfContentEl.innerHTML).save('test.pdf');

PDF es un formato de archivo popular que usamos para presentar y compartir documentos con un diseño fijo en diferentes plataformas y dispositivos.

Para comenzar la conversión, usamos el constructor para crear un nuevo objeto jsPDF. Luego llamamos al método html(), pasando el elemento que contiene el contenido que queremos en el PDF. En el resultado, llamamos a save(), pasando el nombre del archivo PDF de salida que queremos.

Supongamos que tenemos HTML como este:

<div id="pdf-content">
  <h1>Test</h1>
  <p>Here's what we're saving to PDF</p>
</div>
<button id="save-pdf">Save PDF</button>

En la página web hay esta salida:

Cuando hacemos clic en el botón "Guardar PDF", jsPDF creará un nuevo PDF a partir de los elementos HTML y lo descargará al navegador como un archivo.

Esto es lo que se mostró cuando abrimos el PDF:

Instalar jsPDF

Para comenzar a usar la biblioteca jsPDF, podemos instalarla desde NPM con el siguiente comando:

npm i jspdf

Una vez instalado, podemos importarlo en un archivo JavaScript como este:

import { jsPDF } from 'jspdf';

Para hacer que este archivo funcione en HTML, podemos usar un paquete de módulos como Parcel, que es el que yo uso.

Usando Parcel, podemos incluir scripts en HTML como este:

<script type="module" src="index.js"></script>

Podemos usar herramientas modernas como las importaciones de módulos TypeScript y ES en nuestros scripts y, gracias a Parcel, simplemente funciona.

Después de instalar Parcel con npm install paquete, ejecutamos el HTML con npx paquete my-file.html.

npm install parcel


npx parcel my-file.html

Parcel hace que HTML esté disponible en localhost:1234, como habrás visto en la demostración anterior.

Personalice la conversión de HTML a PDF

El constructor jsPDF acepta un objeto de opciones para personalizar el proceso de conversión de PDF.

Por ejemplo, la opción Orientación establece la orientación del PDF generado.

Por defecto es vertical, pero podemos configurarlo en horizontal.

Personalizar la orientación de PDF

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

Personalice las unidades y dimensiones de PDF

Usando las opciones de Unidades y Formato, podemos establecer las unidades y dimensiones de cada página PDF en el archivo de salida.

const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });

Aquí especificamos una exportación horizontal de 2 x 4 pulgadas.

Convertir formularios HTML a PDF

jsPDF también puede manejar elementos HTML cuya apariencia puede cambiar dinámicamente según la interacción del usuario, como las entradas de formulario.

HTML:

<form id="form">
  <input type="email" name="email" id="email" placeholder="Email" />
  <br />
  <input
    type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  <br /><br />
  <button type="submit">Submit</button>
</form>
<br />
<button id="save-pdf">Save PDF</button>

JavaScript:

import { jsPDF } from 'jspdf';


const doc = new jsPDF();
const savePdf = document.getElementById('save-pdf');
const formEl = document.getElementById('form');
savePdf.addEventListener('click', async () => {
  await doc.html(formEl).save('test.pdf');
});

En la página web, ponemos algunos valores de prueba en las dos entradas del formulario para ver si aparecen en la salida del PDF.

PDF:

Sin embargo, no podemos interactuar con entradas de formulario o botones en el archivo PDF.

Resumir

La biblioteca jsPDF proporciona una forma conveniente de convertir contenido HTML (incluidos formularios) a formato PDF. 

Todo el proceso es muy simple, podemos crear un nuevo objeto jsPDF, llamar al método html() para especificar el contenido y luego usar el método save() para generar el archivo de salida. 

Además, podemos personalizar la salida del PDF con opciones como orientación, unidades y formato. 

En general, el uso de jsPDF simplifica el proceso de creación de archivos PDF a partir de contenido HTML en nuestras aplicaciones web.

Finalmente, gracias por leer.