HTML a PDF con JavaScript y html2pdf

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 134

  • @angelicainiguez6053
    @angelicainiguez6053 3 роки тому +4

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

  • @brayancastro2088
    @brayancastro2088 2 роки тому

    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
    @jgvlc 3 роки тому

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

  • @matiasalvarado5227
    @matiasalvarado5227 3 роки тому +9

    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??

  • @elenagalvan8078
    @elenagalvan8078 2 роки тому

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

  • @principeabel
    @principeabel 3 роки тому +1

    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
      @parzibyte  3 роки тому +1

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

  • @peteranzulez2979
    @peteranzulez2979 2 роки тому +1

    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?

  • @d-code953
    @d-code953 4 роки тому +1

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

  • @angyesifontes2045
    @angyesifontes2045 2 роки тому

    Que Dios te bendiga!

  • @federicobertachi7411
    @federicobertachi7411 3 роки тому +2

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

  • @Henry_Nunez
    @Henry_Nunez 2 роки тому

    Excelente, muchas gracias 👏🔔

  • @jaimelagos2016
    @jaimelagos2016 2 роки тому

    Buen aporte!! Muchas gracias

  • @hektorpena7650
    @hektorpena7650 Рік тому

    Muchas gracias me sirvio de mucho!!

  • @garciaalesong
    @garciaalesong 2 роки тому

    Muchas gracias, funcionó perfecto.

  • @arrd3727
    @arrd3727 2 роки тому +1

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

    • @gerardojimenezcastillo3265
      @gerardojimenezcastillo3265 2 роки тому

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

  • @andressierra6476
    @andressierra6476 10 місяців тому

    Gracias!!!

    • @parzibyte
      @parzibyte  9 місяців тому

      Gracias por comentar

  • @pendiente3533
    @pendiente3533 2 роки тому

    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

  • @emanuelrodriguez4717
    @emanuelrodriguez4717 3 роки тому

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

  • @monsserratvillar456
    @monsserratvillar456 3 роки тому

    Excelente tutorial! Muchas gracias

  • @loretomora9538
    @loretomora9538 2 роки тому

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

    • @parzibyte
      @parzibyte  2 роки тому

      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!

  • @daniloortiz7530
    @daniloortiz7530 3 роки тому +2

    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

  • @gustavocastillejos6189
    @gustavocastillejos6189 2 роки тому

    Muchas gracias!!

  • @imsennin
    @imsennin 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому +1

      Gracias por comentar

    • @imsennin
      @imsennin 3 роки тому

      @@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
      @parzibyte  3 роки тому

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

  • @malla9171
    @malla9171 3 роки тому

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

  • @Eduardoschoenfeld97
    @Eduardoschoenfeld97 2 роки тому

    gracias,

    • @parzibyte
      @parzibyte  2 роки тому +1

      Gracias por comentar

    • @Eduardoschoenfeld97
      @Eduardoschoenfeld97 2 роки тому

      @@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

  • @javieralexanderluquepenalo5637
    @javieralexanderluquepenalo5637 2 роки тому

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

    • @davidtorres8352
      @davidtorres8352 Рік тому

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

  •  2 роки тому

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

  • @gramajocristianismael282
    @gramajocristianismael282 4 роки тому

    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
      @parzibyte  4 роки тому

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

  • @cmpunk9738
    @cmpunk9738 3 роки тому

    Gracias bro

  • @jhonatanosoriogarcia7660
    @jhonatanosoriogarcia7660 2 роки тому

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

  • @davidramirez8291
    @davidramirez8291 3 роки тому

    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
      @parzibyte  3 роки тому +2

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

    • @davidramirez8291
      @davidramirez8291 3 роки тому

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

  • @joseluis912
    @joseluis912 3 роки тому

    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
      @parzibyte  3 роки тому

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

    • @guillembagurmoll9006
      @guillembagurmoll9006 3 роки тому

      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.

  • @cesartellez163
    @cesartellez163 3 роки тому

    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
      @parzibyte  3 роки тому

      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

  • @seguelclaudio
    @seguelclaudio Рік тому

    Kapo!

  • @van.vanuzita
    @van.vanuzita 2 роки тому +1

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

  • @sebastianavendanogonzales8364
    @sebastianavendanogonzales8364 4 роки тому

    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
      @parzibyte  4 роки тому

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

  • @BeetBlueyou
    @BeetBlueyou 4 роки тому

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

    • @parzibyte
      @parzibyte  4 роки тому

      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 :)

  • @emerk92
    @emerk92 3 роки тому +1

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

  • @jESs-rn9hz
    @jESs-rn9hz 3 роки тому

    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
      @parzibyte  3 роки тому

      Claro. Puede contactarme en parzibyte.me#contacto

  • @Wololeitor
    @Wololeitor 4 роки тому

    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
      @parzibyte  4 роки тому

      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
    @g-sus4767 3 роки тому

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

  • @rosajimenezmoreno9739
    @rosajimenezmoreno9739 3 роки тому

    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

  • @edgarjesuspalominoquispe1584
    @edgarjesuspalominoquispe1584 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому

      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!

  • @axdeport1969
    @axdeport1969 4 роки тому

    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
      @parzibyte  4 роки тому +1

      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
      @axdeport1969 4 роки тому

      @@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
      @jhoni161 4 роки тому +1

      @@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?

  • @JoseAntonio-sj3iu
    @JoseAntonio-sj3iu 3 роки тому

    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!

  • @danielguzman4076
    @danielguzman4076 2 роки тому

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

  • @jorgegjardo
    @jorgegjardo 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому

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

  • @manuelborda6895
    @manuelborda6895 2 роки тому

    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
      @parzibyte  2 роки тому

      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!

  • @casanaslopezadlayeduardo9637

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

    • @parzibyte
      @parzibyte  Рік тому

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

  • @johanalexanderrodriguezgue4095
    @johanalexanderrodriguezgue4095 3 роки тому

    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
      @parzibyte  3 роки тому +1

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

  • @cristiandavidmarulandacano8449
    @cristiandavidmarulandacano8449 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому

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

  • @danieljimenez5937
    @danieljimenez5937 2 роки тому

    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?

  • @johanalexanderrodriguezgue4095
    @johanalexanderrodriguezgue4095 3 роки тому

    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
      @parzibyte  3 роки тому

      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

  • @franciscojaviertapiarivera6018
    @franciscojaviertapiarivera6018 3 роки тому

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

  • @martacastrillo6280
    @martacastrillo6280 2 роки тому

    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
      @anderson1478 11 місяців тому

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

  • @gabrielgrg2011
    @gabrielgrg2011 3 роки тому

    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
      @gabrielgrg2011 3 роки тому

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

  • @emerk92
    @emerk92 3 роки тому

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

  • @iTzCeleriX
    @iTzCeleriX 2 роки тому

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

    • @parzibyte
      @parzibyte  2 роки тому

      Puede ser porque html2pdf no está definido

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому +1

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

    • @SanchayanPackiyanathan
      @SanchayanPackiyanathan 3 роки тому

      @@parzibyte Muchas Gracias!!!!!!

  • @brunosamir6494
    @brunosamir6494 2 роки тому

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

  • @franciscocarranza5033
    @franciscocarranza5033 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому

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

  • @Squal0117Gaming
    @Squal0117Gaming 3 роки тому

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

  • @trianayala
    @trianayala 4 роки тому +1

    como funciona en responsive

    • @parzibyte
      @parzibyte  4 роки тому

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

    • @trianayala
      @trianayala 4 роки тому

      @@parzibyte solo preguntaba porque no funciona en mobiles

  • @dannymichaeljaramillojumbo6076
    @dannymichaeljaramillojumbo6076 3 роки тому

    Alguien tiene todo el codigo
    que uso para generar el pdf

  • @jesusmatos411
    @jesusmatos411 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому

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

    • @jesusmatos411
      @jesusmatos411 3 роки тому

      @@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

  • @nicolaspradines5708
    @nicolaspradines5708 Рік тому

    Como hago para que solo lo guarde en el servidor?

    • @parzibyte
      @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!

  • @cristhianmahecha1707
    @cristhianmahecha1707 4 роки тому

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

  • @carinasanchez821
    @carinasanchez821 3 роки тому

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

  • @coliseosjmkcoliseosjmk1201
    @coliseosjmkcoliseosjmk1201 4 роки тому

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

    • @parzibyte
      @parzibyte  4 роки тому +1

      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
      @coliseosjmkcoliseosjmk1201 4 роки тому

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

    • @parzibyte
      @parzibyte  4 роки тому

      Me agrada escuchar que haya funcionado

  • @ivanuribe4176
    @ivanuribe4176 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому

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

  • @marcoantonioherediagutierr5876
    @marcoantonioherediagutierr5876 4 роки тому

    tengo unproblema con la libreria de html2pdf :(

  • @juanmigueldiazhernandez143
    @juanmigueldiazhernandez143 Рік тому

    No me funciona, al darle click al boton

    • @parzibyte
      @parzibyte  Рік тому

      Acabo de probar la demostración y funciona correctamente

  • @alexander-ardila
    @alexander-ardila 3 роки тому

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

    • @parzibyte
      @parzibyte  3 роки тому

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

    • @alexander-ardila
      @alexander-ardila 3 роки тому

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