HTML a PDF con JavaScript y html2pdf

Te muestro cómo exportar HTML a PDF. Es decir, convertir una página web a PDF sin procesamiento del lado del servidor; usando el lenguaje JavaScript del lado del cliente y la librería html2pdf.
Toda la información, demostración y código lo encuentras en mi blog:
parzibyte.me/l...
¡Gracias por ver el vídeo!
🔔 Únete a mi canal en Telegram y no te pierdas ningún contenido exclusivo: t.me/parzibyte...
💖 Apoya el canal realizando una donación: parzibyte.me/b...
💻 Blog: Visita mi blog para más contenido en parzibyte.me/blog
[Contacto]
📧 Correo electrónico: [e-mail]
📱 Telegram: t.me/parzibyte o búscame como parzibyte
¡Tu apoyo es invaluable! Cada donación me ayuda a seguir creando contenido de calidad para ti. ¡Gracias por ser parte de la comunidad!
¿Te gustó el contenido?
No olvides suscribirte y activar la campanita para no perderte ningún vídeo.

[@angelicainiguez6053]

Justo estaba buscando algo que respetara el CSS. Muchas gracias por compartir tu conocimiento, me ayudó mucho

[@brayancastro2088]

Muchas gracias amigo! durante varios días estuve buscado como hacer esto y con tu explicación lo logré en solo unos minutos! Muchas graciassss!

[@jgvlc]

Excelente explicación para los recién iniciados, gracias!

[@parzibyte]

Gracias. Saludos!

[@matiasalvarado5227]

buenisimo video man, una pregunta, es posible que al momento de generar el pdf la foto que capturas salga completa, ya que se te corta la imagen, estoy haciendo algo similar y la imagen se corta, sabes como solucionar ese problema??

[@principeabel]

Muchas Graciiias Me sirvio muchisimo, intente de mucha maneras pero no me generaba el PDF, me funciono con .html y .php, mil Graciias LIKE sigue asi =)

[@parzibyte]

Me agrada escuchar que haya funcionado. Le invito a seguirme y compartir Saludos!

[@d-code953]

Buen tutorial amigo, duró lo suficiente para comprender la utilización de la libreria!

[@elenagalvan8078]

Muchas gracias, tu video me salvo. Muchos lo hacen con composer, y hacer muchas configuraciones

[@daniloortiz7530]

Yo estoy haciendo lo mismo pero lo hago con power automate pero cuando mando el el html para q se convierta a PDF pero al convertirlo se me descuadra todo por qué será que pasa

[@peteranzulez2979]

hola me ayudo mucho, solo tengo una pregunta como le hago para que no lo baje directamente y lo visualice el pdf desde el navegador?

[@federicobertachi7411]

Muy buen tutorial, bien explicado y justo lo que estaba buscando. Gracias por compartirlo Luis! Saludos

[@angyesifontes2045]

Que Dios te bendiga!

[@monsserratvillar456]

Excelente tutorial! Muchas gracias

[@imsennin]

Que buen video explicativo, me has ayudado bastante, muchas gracias!!!

[@parzibyte]

Gracias por comentar

[@imsennin]

@@parzibyte hola, tengo una consulta, quiero ocultar elementos DOM para que no aparezcan en el archivo PDF, por ejemplo: el botón click aquí , alguna idea de como realizarlo???

[@parzibyte]

Hola. Para consultas personalizadas puede contactarme en parzibyte.me#contacto Saludos

[@Henry_Nunez]

Excelente, muchas gracias 👏🔔

[@parzibyte]

Gracias, saludos

[@jaimelagos2016]

Buen aporte!! Muchas gracias

[@parzibyte]

Gracias por comentar

[@garciaalesong]

Muchas gracias, funcionó perfecto.

[@emanuelrodriguez4717]

crack, la unica libreria que me anduvo en js para poder generar bien un informe

[@hektorpena7650]

Muchas gracias me sirvio de mucho!!

[@parzibyte]

Con mucho gusto

[@rosajimenezmoreno9739]

gracias, tengo una problema no me muestra la imagen, se supone que debemos poner el tipo de imagen que pusimos, yo puse una png y no me la mostro

[@arrd3727]

Algo interesante que se debe mencionar, es que dependiendo de la cantidad de datos, esta afecta la impresion de la tabla.

[@gerardojimenezcastillo3265]

es algo que a mi me paso, solo me imprime los datos que aparecen en mi tabla cuando carga la pagina

[@danielguzman4076]

Una pregunta amigo tengo un problema cuando pasa las 100 paginas no me muestra el pdf

[@pendiente3533]

hola amigue, una pregunta rápida, la librería es toda la carpeta "html2pdf.js-master" o sólo el archivo de nombre "html2pdf.bundle.min.js", gracias anticipadas

[@malla9171]

Muchas gracias! hay alguna forma de que el documento pdf se guarde automaticamente en una carpeta?

[@jhonatanosoriogarcia7660]

puedo agregar un array en .from? o como puedo agregar varios elementos

BUEN TUTORIAL AMIGO UNA CONSULTA COMO PODRIA HACER QUE EL DOCUMENTO SE DESCARGUE SOLO LECTURA O CON ALGUNA SEGURIDAD PARA QUE NO PUEDA EDITAR

[@emerk92]

me da este error y no me lo guarda: Uncaught Missing source element or string.

[@andressierra6476]

Gracias!!!

[@parzibyte]

Gracias por comentar

[@van.vanuzita]

hola, no me está reconociendo la librería. Sabes dónde podría conseguir las 3 por separado para probar? MUCHAS GRACIASSSS

[@andresfernandolinaresaguir7099]

Borra la línea de código img en el HTML que está en el ejemplo, eso "soluciona el problema"

[@loretomora9538]

Excelente explicación !!! te felicito, ahora, como puedo enviar a un e-mail ese pdf exportado (en lugar de descargarlo en compu)

[@parzibyte]

Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en parzibyte.me/#contacto Saludos!

[@franciscojaviertapiarivera6018]

amigo como le puedo hacer si loso quiero que se convierta a pdf un container o un main alguien me podría decir

[@danieljimenez5937]

Que tal amigos tengo una duda, si deseo que al documento se le agregue un pie de pagina con el numero de hojas del documento alguien sabría como hacerlo?

[@brunosamir6494]

trato de hacer la generacion de pdf con DomPDf y no me funciona, espero que con javascript no me pase lo mismo :)

[@gustavocastillejos6189]

Muchas gracias!!

[@parzibyte]

Gracias por comentar

[@seguelclaudio]

Kapo!

[@manuelborda6895]

Hola, tengo una duda súper urgente! Al cambiar el elemento = document.body por document.querySelector(#ID) o document.getElementById(ID) aparece todo en blanco. Alguna idea del porqué suceda esto?

[@parzibyte]

Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en parzibyte.me/#contacto Saludos!

[@Squal0117Gaming]

Los input type text y los select no los pasa al pdf :(

[@johanalexanderrodriguezgue4095]

Buenas, me arroja el siguiente error si dejo una imagen en el html, si la quito se va el error, como puedo solucionarlo? DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

[@parzibyte]

Hola. Puede ser porque la imagen no es del mismo dominio que el sitio en donde está la página

[@martacastrillo6280]

Buenas tardes , el problema que intento sólo insertar en el pdf una tabla y no me deja , me pilla toda la página ¿ qué puedo hacer ? Es en la parte de document.getElementByID(“nombredeliddelatabla”) no me lo pilla y me lanza toda la web , gracias un saludo

[@anderson1478]

Creo que hubiera funcionado algo como: const $elementoParaConvertir = document.querySelector("#id_de_tu_tabla");

[@javieralexanderluquepenalo5637]

Excelente video, consulta podría guardar el pdf en una carpeta especifica de manera automática? gracias por el aporte me ayudo mucho

[@davidtorres8352]

No creo, eso lo administra el navegador, el usuario tendria que activar la opcion de elegir donde guardar la descarga

[@iTzCeleriX]

Me pone que html2pdf no esta definido y he importado el script alguna idea de que puede ser?

[@parzibyte]

Puede ser porque html2pdf no está definido

[@casanaslopezadlayeduardo9637]

El "html2pdf.bundle.min.js" tiene código?

[@parzibyte]

Me parece bien que sí. Recuerde que en ocasiones viene minificado

[@gramajocristianismael282]

Buen tutorial, sabes si puedo aplicarle una hoja de estilos a este PDF? y como agregarla? antes usaba Mpdf con php, pero lo hacia el server.

[@parzibyte]

Hola. Me parece que se toman en cuenta los estilos que la página tiene actualmente. Saludos :)

[@franciscocarranza5033]

Amigo tengo un problema, a mi si me descarga el pdf pero al momento de abrirlo sale en blanco, vacio me podrias ayudar?

[@parzibyte]

Claro, envíeme su problema en parzibyte.me/#contacto

[@nicolaspradines5708]

Como hago para que solo lo guarde en el servidor?

[@parzibyte]

Hola. Gracias por sus comentarios. Si tiene alguna consulta o duda, solicitud de creación de un programa, solicitud de vídeo o solicitud de cambio de software estoy para servirle en parzibyte.me/#contacto Saludos!

[@BeetBlueyou]

Hola , tengo la duda, el archivo html2pdf.bundle.min.js que es lo que contiene?

[@parzibyte]

Hola. Contiene todo el código fuente de la librería que permite lo que indica el título del vídeo Le invito a suscribirse y compartir el vídeo. Saludos :)

[@cesartellez163]

Excelente video, lo realice y me funcionó. Pero tengo una pregunta, tengo unos inputs text y no me muestra lo que se digita en el pdf, es posible que se pueda mostrar el contenido?

[@parzibyte]

Hola. Supongo que es posible, aunque tal vez lo mejor sería aplicar una transformación y convertir esos inputs a un párrafo o algo parecido

[@emerk92]

hola, muhcas gracias por el aporte, puedes mostrar el link desde donde descargaste la libreria html2Pdf.min.bundle.js?? muchas gracias!!!

[@andres1guerrero965]

Sí, yo tampoco sé como descargar ese archivo.

[@cristiandavidmarulandacano8449]

si ,quiero que un icono se muestre en cada pagina de pfd ?

[@parzibyte]

Hola. Para consultas puede escribirme en parzibyte.me#contacto Saludos!

[@jESs-rn9hz]

muy bueno, gracias por compartir, me podrías ayudar con un problema que me surge al exportar un pdf un textarea de mi pagina me sale todo el texto encimado, el texto se despliega bien en el navegador, pero el pdf ya no, espero me puedas ayudar a encontrar info sobre este problema, de antemano gracias, saludos.

[@parzibyte]

Claro. Puede contactarme en parzibyte.me#contacto

[@carinasanchez821]

a mi si me funciono pero la imagen no me la muestra :(

[@Wololeitor]

buenas, tengo una consulta, se podría con html2pdf tomar un pdf existente con estilos imagenes y campos transpasarlo a HTML y pasarle datos dinamicos?, si no se pudiera, es posible ir "jugando" creando paginas y dando estilo uno mismo ?, saludos

[@parzibyte]

Hola. Podría modificarse una plantilla HTML (insertando y removiendo elementos del DOM) y luego cuando el usuario lo desee, generar el PDF

[@g-sus4767]

Se podría después de el then() enviar el pdf generado por email?

[@parzibyte]

Hola. Sí

[@davidramirez8291]

Excelente tutorial, gracias por compartir el conocimiento, solo tengo una duda se puede especificar cual parte de la pagina deseo descargar en el ejemplo seleccionamos body ( const $elemento = document.body; ) pero se podría seleccionar un div con id="pdf" de que forma se aria

[@parzibyte]

const elemento = document.querySelector("#id_del_elemento");

[@davidramirez8291]

@@parzibyte muchas gracias por responder funciona genial, justo lo que buscaba

[@joseluis912]

Me funcionó perfectamente, solo que tengo una duda, ¿Se le puede modificar el margen? es que quisiera que ese div tomara el tamaño de toda la hoja, espero me puedas ayudar, saludos.

[@parzibyte]

Hola. Claro, con gusto lo ayudo en parzibyte.me/#contacto

[@guillembagurmoll9006]

Hay una opción llamada "margin" que está en 1 en el código del tutorial. Si la disminuyes, también lo hará el margen. Saludos.

[@johanalexanderrodriguezgue4095]

Buenas, tengo en el archivo html un y lo muestra bien en el navegador pero al descargar el pdf deja muestra todo menos lo que contiene el , sabes que puede ser? o si es que esta libreria no acepta los ?

[@parzibyte]

Hola. Lo desconozco, no me ha tocado ese caso específico pero puede que en la documentación de la librería o en los issues del repositorio esté lo que pregunta

[@Eduardoschoenfeld97]

gracias,

[@parzibyte]

Gracias por comentar

[@Eduardoschoenfeld97]

@@parzibyte se que mereces mas que gracias pero por el tiempo no se me viene palabras me diste la forma para resolver un gran problema mia Gracias

[@cmpunk9738]

Gracias bro

[@parzibyte]

Con gusto

[@edgarjesuspalominoquispe1584]

Hola, buen video, ¿pero como seria si se quisiera mostrar el pdf en otra pestaña sin tener que descargarlo?

[@parzibyte]

Hola. La librería o el mismo lenguaje deben proporcionar la manera de abrirlo en una pestaña ya sea como BLOB o en Base64. Le invito a que lea la documentación. También puede contactarme en parzibyte.me#contacto si desea ayuda personalizada Saludos!

[@juanmigueldiazhernandez143]

No me funciona, al darle click al boton

[@parzibyte]

Acabo de probar la demostración y funciona correctamente

[@sebastianavendanogonzales8364]

Hola :v oye gran video :3 pero tengo una pregunta hay alguna forma de que me tome lo mismo osea me imprima pero sea solo un div en especifico?

[@parzibyte]

Hola. Así es, puede ser cualquier elemento del DOM. Saludos :)

[@ivanuribe4176]

Como saltar la página y no se divida el contenido y todo quede en una sola hoja

[@parzibyte]

Hola. Tal vez en la documentación oficial se indique, yo desconozco eso Saludos

[@trianayala]

como funciona en responsive

[@parzibyte]

Lo invito a que lo pruebe usted mismo y nos cuente los resultados Saludos :)

[@trianayala]

@@parzibyte solo preguntaba porque no funciona en mobiles

[@dannymichaeljaramillojumbo6076]

Alguien tiene todo el codigo que uso para generar el pdf

[@jorgegjardo]

Hola!! Sabes si hay posibilidad de pasar un chart js a pdf con html2pdf?

[@parzibyte]

Hola. No he tenido la oportunidad de probar por el momento Saludos!

[@cristhianmahecha1707]

Hay una forma de que me imprime otro archivo html, digamos una referencia de otro archivo para imprimir en pdf

[@parzibyte]

Me parece que no

[@JoseAntonio-sj3iu]

Buen video, una pregunta... Puedo convertir una pagina "b" desde una pagina "a" ? es decir quiero desde una pagina convertir a pdf varios html y que queden en el mismo archivo pdf... Saludo y desde ya, gracias!

[@SanchayanPackiyanathan]

amigo ayúdame plz, como se puede indicar que se guarde automáticamente a un directorio ?

[@parzibyte]

Tendría que ver la API de acceso al sistema de archivos con JavaScript: web.dev/file-system-access/

[@SanchayanPackiyanathan]

@@parzibyte Muchas Gracias!!!!!!

[@axdeport1969]

Gran tutorial, me sirvió solo tengo un inconveniente a la hora de tratar de convertir a PDF imágenes que vienen de internet con una URL no me aparecen tenderas alguna solución? por lo demás esta genial

[@parzibyte]

Hola. Me parece que no se pueden usar imágenes que no son del dominio en donde se encuentra la página desde donde se invoca a html2pdf. Le invito a leer la documentación para ver si encuentra algo sobre ello No olvide compartirlo y suscribirse Saludos :)

[@axdeport1969]

@@parzibyte Pude encontrar la solución simplemente se tiene que convertir la URL de la imagen a Base64 aquí te dejo la fuente donde conseguí la solución: stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript/20285053#20285053 pd: muchas gracias amigo ya me suscribí

[@jhoni161]

@@axdeport1969 hola amigo, vi el código del que hablas, pero estoy desubicado de donde debo aplicarlo, en cual archivo del código de ejemplo?

[@jesusmatos411]

Buenas tengo el problema que no descarga, incluso probé con el código que dejaste el tu blog y nada :c

[@parzibyte]

Acabo de probar (parzibyte.github.io/ejemplos-javascript/html-a-pdf/) y funciona perfectamente. No sé a qué se refiere

[@jesusmatos411]

@@parzibyte uso el mismo codigo y no me funciona, no se si es un problema de la pc, lo eh intentado de dos maneras diferente y no me descarga archivos :c

[@gabrielgrg2011]

Gracias. Me Funcionó en google chrome pero no me funciona en firefox. Debería funcionar en ambos o hay que hacer algo extra? Gracias!

[@gabrielgrg2011]

Gracias, amigo. Ya lo solucioné. Era por una extensión que tenía instalado en el firefox: Darkreader!

[@alexander-ardila]

No me funciona. Se descarga el PDF pero no se observa nada en él.

[@parzibyte]

Qué raro. Lo acabo de probar y funciona de maravilla Saludos!

[@alexander-ardila]

@@parzibyte cordial saludo. Utilizo .net con c#. Y mi HTML es dinámico. Que me recomienda o donde encuentro más documentación.

[@marcoantonioherediagutierr5876]

tengo unproblema con la libreria de html2pdf :(

[@marcoantonioherediagutierr5876]

me dice que no esta definida

[@parzibyte]

Hola. Para consultas personalizadas puede encontrarme en parzibyte.me#contacto Saludos :)

[@coliseosjmkcoliseosjmk1201]

Buen video descargue el codigo de tu blog pero no me funciona cuando hago click :(

[@parzibyte]

Hola. Yo acabo de probar la demostración y funciona de maravilla, se me hace muy raro que no le funcione; puede que se haya equivocado en algún paso

[@coliseosjmkcoliseosjmk1201]

@@parzibyte me botaba error en en el campo img lo solucione corvirtiendo la imagen a base64 :)

[@parzibyte]

Me agrada escuchar que haya funcionado