Convierte HTML en PDF con JavaScript - Guía Html2Pdf

#javascript #js #vue #developer #desarrolladorweb #pdf
Esta es la primera parte de un tutorial, donde generamos reportes pdf con JS utilizando el paquete JavaScript Html2Pdf
== Ejemplo JSpdf
• Exportar DIV Html como...
======= SI BUSCAS SERVIDORES BUENOS PARA TUS PROYECTOS ======
m.do.co/c/d464...
De esta forma también apoyas al contenido del canal.

[@JoseLuisYsturiz]

Excelente contenido, muy claro en su explicacion, como debe ser, gracias

[@rodrigoloya4163]

Justo tenia que hacer algo asi para mi examen final. Gracias por tu excelente explicación. Utilicé html2pdf pero con Blazor WASM

[@SamuelRodriguez-xp1hi]

Donde está el video para hacer lo de las imágenes?

[@angelcardians7134]

Wow y pensaba que era más complicado y resulta ser muy práctica jaja. Podrías hacer un ejemplo consultando una API y mostrando los datos en el pdf? Llevando la herramienta más allá

[@Neunapp]

En teoría lo que hace es como una captura al bloque seleccionado, no importa de donde este pintada la data en pantalla. Sobre consultas API en el curso de vue aquí en el canal se habla mucho de ello.

[@jesusavila9769]

Existe forma de que tome estilos css de archivos externos? Es decir yo quiero crear mis reportes de ciertas vistas html pero entre ellas existen los encabezados de las tablas de color, iconos de fontawesome. Mi backend esta escrito con express , para el frontend utiliza js puro con el motor de plantillas ejs para renderizar data

[@Neunapp]

Creo que de todas formas tendrás que insertar los estilos ahí en su objeto js, para los iconos y demás tendría que tal vez usar cdns e insertar esto dentro del objeto js para que tome estos valores. Normalmente estos paquetes no dejan trabajar con css externo

[@yisuus17]

Se puede guardar el PDF en una ruta del árbol de carpetas del proyecto ?

[@Neunapp]

En teoría si, el archivo generado existe, podrías usar la clase URL de JS para obtener la ruta, ya con la ruta puedes hacer upload de ese archivo: URL.createObjectURL(pdf);

[@rodrigosanchez4864]

Se puede hacer exactamente eso, hacer un pdf con un html, pero con java script vanilla? Me refiero si se puede hacer sin node. Simplemente con html y js.

[@Neunapp]

Si, es mas la misma función del ejemplo te serviría. El paquete Html2pdf lo puedes traer desde el CDN sin necesidad de node.

[@matiastoledo9597]

Tengo problemas para correrlo en produccion
Try `npm i --save-dev @types/html2pdf.js` if it exists or add a new declaration (.d.ts) file containing `declare module 'html2pdf.js';`
No me funcionaron ninguna de las 2 opciones, sabras que puede ser ?

[@Neunapp]

No se si tengas todo el compilado o estés importando de otra forma, recuerda que a producción debes llevar únicamente el archivo compilado, no tu código JS como tal, y si es el caso de que quieres llevar tu código JS, entonces debes escribir el archivo js en sintaxis vanilla, en mi ejemplo uso sintaxis ecmascript, le puede pedir a GPT que te lo vuelva vanilla.

[@matiastoledo9597]

@@Neunapp Estoy trabajando con nextjs 14 ya lo declare como modulo y todo y los mismo persiste el problema

[@Neunapp]

@@matiastoledo9597 Ahora entiendo mejor, como dice instala los tipos de datos para html2pdf con: npm i --save-dev @types/html2pdf.js Luego, en next seguro normalmente los tipos son TS, es probable que necesites alguna carpeta de types y de ahi exportes html2pdf como código TS. La idea en next es que html2pdf.js se lea como un modulo TS