En el tutorial de hoy vamos a trabajar con JavaScript y la librería html2pdf.js que a su vez usa jsPDF. Estas librerías sirven para generar un PDF y descargarlo, como ya te he mostrado en otro tutorial.

Lo que vamos a ver hoy es cómo obtener el PDF generado como un BLOB, es decir, como un montón de bytes que representan al archivo, ya sea para descargarlo, almacenarlo en otro lugar o enviarlo a algún servidor.

Creando PDF

Ya sea que estés usando html2pdf.js o jsPDF, este tutorial no cubre la generación del PDF; sino su exportación. Revisa el otro tutorial para saber cómo crear un PDF a partir de HTML en el lado del cliente.

Obtener PDF como archivo

Ahora veamos lo interesante: cómo obtener los bytes del PDF, obteniendo la representación BLOB del PDF. Se puede generar un PDF con:

html2pdf()
.set({
    margin: 1,
    filename: 'documento.pdf',
    image: {
        type: 'jpeg',
        quality: 0.98
    },
    html2canvas: {
        scale: 3, // A mayor escala, mejores gráficos, pero más peso
        letterRendering: true,
    },
    jsPDF: {
        unit: "in",
        format: "a3",
        orientation: 'portrait' // landscape o portrait
    }
})

Y después, al invocar a save, el documento PDF se va a guardar. Pero para obtenerlo como BLOB, hay que invocar a output pasándole una cadena como primer argumento indicando el formato, que según la documentación de jsPDF puede ser arraybuffer, blob, bloburi, datauristring y otras más.

En este caso quiero el PDF como Blob así que indico blob en el argumento, y al hacerlo, se nos devolverá una promesa que al ser resuelta traerá consigo los bytes para armar el PDF.

const $elementoParaConvertir = document.body; // <-- Aquí puedes elegir cualquier elemento del DOM
const pdfComoBlob = await html2pdf()
.set({
    margin: 1,
    filename: 'documento.pdf',
    image: {
        type: 'jpeg',
        quality: 0.98
    },
    html2canvas: {
        scale: 3, // A mayor escala, mejores gráficos, pero más peso
        letterRendering: true,
    },
    jsPDF: {
        unit: "in",
        format: "a3",
        orientation: 'portrait' // landscape o portrait
    }
})
.from($elementoParaConvertir)
.output("blob");

La parte importante es al invocar output("blob"), que devolverá una promesa (por ello el uso de await) y al ser resuelta tendrá el PDF como bytes.

Alternativamente, si no quieres usar async y await para esperar la promesa, puedes usar then y especificar el callback:

html2pdf().set().from().output("blob").then((pdfComoBlob)=>{

// Aquí hacer algo con el PDF

});

Y así es como puedes exportar un PDF creado con html2pdf, jsPDF y obviamente JavaScript a su representación Blob. Cuando tengas el blob, puedes hacer varias cosas, entre ellas subirlo a un servidor con cualquier lenguaje de programación.