Al parecer hay personas con problemas para instalar las dependencias necesarias. En este corto video les muestro cómo proceder para que todo se ejecute con normalidad. ruclips.net/video/BFUS_0y9_aM/видео.html 👈🏼
Si llegan a terner problemas de instalación con "npm install @react-pdf/renderer --save" podrian intentar usar "npm install @react-pdf/renderer --legacy-peer-deps"
ami me sale el siguiente error!! browser-external:events:9 Uncaught Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code. at Object.get (browser-external:events:9:13) at node_modules/queue/index.js (index.js:2:20) at __require2 (chunk-HI5STWHF.js?v=2fda7313:15:50) at index.js:24:31
uau que clase más magistral en todos los sentidos, intenso, interesante, bien explicado, útil, etc! Muchisimas gracias lafito! Video digno de la imagen de la fusión Goten y Trunks!
Muchas gracias, amigo, de verdad ha sido de gran ayuda. Tuve problemas, pero básicamente era el navegador Chrome, pues no me permite visualizar el PDF, pero sí descargarlo. Lo probé en otros navegadores y si funciona. Muchas gracias
Me gusta bastante el video, solo una duda. Como podría ponerle un encabezado y pie de pagina, y aparte que si la pagina no cabe toda la información en la siguiente pagina del pdf siga repitiendo el encabezado y pie de pagina?
Tiene tiempo que creé este video, si no me equivoco, crear encabezados y píes de página de forma automatizada no era posible. Debes añadirlos de forma manual 🤔
@@lasfito Profe me tira error😢, no le pido que me lo solucione, solo le pido si tiene una idea de que puede ser ./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit'). En stackover dicen que debo editar el package.log pero sigue sin funcionar. De nuevo, gracias por el tuto♥
Sí, al parecer es un tema con las dependencias. ¿Ya probaste eliminando package-lock, node_modules y volviendo a instalar? Si no funciona, te recomendaría usar las mismas versiones que tengo en el video y después ir actualizando dependencias poco a poco para ver dónde es que se rompe.
disculpa que listado de datos debería buscar para saber que div se reemplaza por View en render? , lo pregunto porque necesito realizar una tabla y no encuentro etiquetas. gracias.
Tengo el problema que no se muestra el PDF cuando esta en un dispositivo móvil, hay que usar media query o tiene que ver con el tamaño de hoja que le asigné? (A4). Gran video
Excelente video colega!! se agradece que compartas tus conocimientos. Tengo una duda, como haría en el caso que solo quiera descargar (no es necesario verlo) un archivo pdf que ya tengo en mi computadora?
Gracias, Lorenzo. Mueve el archivo a la carpeta de public/ y luego en un anchor tag apunta el href al nombre del archivo. Adicional, debes de añadir el atributo download="true" al anchor ✌🏼
@@candelalinares6931 Hola Candela, no pude. Terminé optando por poner el pdf en mi cuenta de google drive y mostrarlo a través de un anchor tag que me redireccione al link de solo lectura que te da drive, ya que de ahí también se puede descargar. Es una solución bastante vaga quizás, pero me sirvió para mi proyecto que es bastante pequeño y con poca complejidad
Hola, chicos. Acabo de subir un video donde muestro a detalle cómo volver descargable algún archivo pre-existente: ruclips.net/video/nb4vZqjG4Kg/видео.html 👈🏼
Hola, Ale Disculpa la demora Me parece que con este paquete no se puede crear PDFs de forma programática, por lo tanto tendrías que manualmente incorporar esos saltos.
Gracias, Nico Para compartir el PDF en WhatsApp y otras Apps de tu cel puedes utilizar la API de "Web Share". En este video te muestro cómo hacerlo paso a paso: ruclips.net/video/FRQCQrpe1GE/видео.html Saludos
¡Muchas gracias! Veo que se despliega bien en localhost pero, ¿cómo puedo lograr que se vea en producción? Aunque lo configure bien a nivel local, me ha sucedido que no se puede ver cuando ya está en netlify o hostinguer, ¡muchas gracias!
Hola que tal, muy buen tutorial, tengo una duda: Como haria en caso de usar un documento personal que quiero comparir en PDF y no una API, como sería ese proceso?. Gracias
@@lasfito Oks, bueno es q debo hacer un proyecto donde pueda previsualizar un documento que tengo en mi PC Ej: un Resume y dar la opción de descargarlo en PDF entonces eso vendría siendo un documento mio que no viene de una API, como podría hacer yo ese proceso. Gracias
Hola, Diana. En ese caso solo necesitas agregar el PDF como archivo/asset a tu código y luego "visitarlo". Por ejemplo, ejemplo.com/archivo.pdf . Si no puedes cargarlo al código, puedes añadirlo a un input de tipo archivo ✌️
Hola, Walter Sí, varias personas me lo han comentado. Ya me hago un espacio y saco un nuevo video. Saludos
2 года назад+1
@@lasfito entonces eso ha de ser, yo había visto otro tutorial de alguien más, pero el declaraba los componentes funcionales de un modo distinto, y con ese modo no tengo acceso a varias funciones, como el onChange de input text. Asi: En vez de empezar con const Login = () => {} Inicia directo con export default function Login({ Y dentro de este hace el render.
@ Hola, Gerardo Esta diferencia que mencionas no es relevante para el problema. La diferencia es que const Login = ()=> {} es una función de flecha y function Login () {} es una función "estándar"; pero al final del día ambas son funciones. Ambos métodos son válidos en cualquier versión de React 🤙🏼
Estoy siguiendo los pasos y me sale este error: ERROR in ./node_modules/jpeg-exif/lib/index.js 3:10-23 Module not found: Error: Can't resolve 'fs' in '/Users/rafaelirigoyen/Desktop/GIG/Certificates App/certificates-app/node_modules/jpeg-exif/lib' que estare haciendo mal? Y descargue el repositorio pero no se me vi ninguna pista pero si me deja descargar no entiendo
Cuando dices que descargaste el repositorio, te refieres al mío? De ser así, debes revisar que versión usé ahí para que uses la misma. Ahora mismo, las versiones recientes de react-pdf traen error
Saben si es compatible en typescript. Porque me genera el error: ./node_modules/@react-pdf/renderer.jsx.tsx doesn't exist Aunque he instalado la libreria.
Hola genio! Excelente tutorial. Una pregunta me gustaría poder previsualizar el PDF y si todo va bien luego generarlo pero poder enviar ese PDF generado mediante formData al servidor y no descargarlo. Cómo podría lograr esto? Muchas gracias.
Sí, si solo requieres acceso al archivo puedes usar . Aquí puedes ver cómo usarlo: react-pdf.org/advanced Básicamente es generar el blob y luego referenciarlo en el form o directamente en el request para enviarlo al servidor 🤙🏼
Hola lasfito, ante todo te doy las gracias por el tutorial. Estoy probando el proyecto con NextJS y al compilar me da este error: "PDFDownloadLink is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build." Alguna solucion ?? desde ya muchas gracias
Hola, Marcelo Lo que ocurre es que Next te está renderizando los componentes en servidor y como te indica el error PDFDownloadLink es una API del navegador y el servidor no puede acceder a ella. Lo que debes hacer es evitar que este componente se renderice en servidor y por ende que solo se renderice en cliente. Si buscas en Google encontrarás varias soluciones/implementaciones de como renderizar solo en cliente en Next ✌️
Piénsalo por un momento, ¿quieres poner el input en el pdf? ¿o quieres poner el valor del input en el pdf? Recuerda que el PDF no es interactivo, por lo tanto poner un input no serviría de nada, además de que no se puede. Lo que tendrías que hacer es guardar el valor seleccionado del input y luego renderizarlo dentro de un 👈🏼
Hola! Gracias por este excelente tutorial, tengo una duda, se puede generar el PDF en tamaño de papel térmico? Es que necesito generar facturas de ese tamaño. Muchísimas gracias!!
Hola, Álvaro. Desconozco cuál sea ese tamaño, pero sí se pueden personalizar las medidas del PDF. Para ello pasas una de las opciones disponibles en la propiedad de tamaño en page: Puedes ver las opciones en: github.com/diegomura/react-pdf/blob/master/packages/layout/src/page/getSize.js Saludos 🤙
Muy buen video! Estoy teniendo problemas con la etiqueta de Image y es que básicamente no muestra ninguna imagen que le paso. Son imagenes que ya muestro en otra parte de mi proyecto así que no sabría que podría solucionarlo. Otra cosa que me gustaria saber es si quiero que tenga los estilos como ya lo tengo en mi componente de react. Estaba viendo opciones como de convertir directamente el componente de React en html y luego hacerlo pdf, pero esa opción obliga a descargar el pdf y yo solo quiero tener el visualizador
Hola, Bryan ¿ya revisaste la documentación y el apartado de imágenes? react-pdf.org/components Sobre la 2da pregunta no he comprendido muy bien cuál es el problema. Los componentes que utiliza React-PDF ya son aptos para React, por lo tanto no hay que hacer ninguna conversión como mencionas. Échale un vistazo al apartado de estilos en la documentación y si te surge una duda más específica puedes comentarla y lo resolvemos: react-pdf.org/styling Saludos ✌️
@@lasfito solucioné el problema de las imágenes, era algo muy simple y que olvidé, por si a alguien le pasa algo similar, en mi caso era que yo copié mi componente de React con las importaciones y usaba un componente Image de Chakra Ui y como tenía el mismo nombre que el componente de react-pdf entonces había un error. Con respecto a lo segundo de lo que hablé lo decía porque mientras investigaba como hacer los pdf me encontré con un sitio en el que indicaban que se convertía el jsx de react en html y después se lo convertia en pdf usando jspdf creo que era pero no estoy seguro
Sí, esos errores pasan todo el tiempo. Es casi obligatorio en este campo jaja. Sobre lo segundo, tal parece que se trata de otra librería para crear PDFs. Con la que uso en el video no debes preocuparte por convertir componentes a HTML sino a componentes "primitivos" como View e Image. En el enlace anterior puedes encontrar todos los componentes permitidos ✌🏼
Gracias. Para eso tendrías que crear cada parte del sitio dentro del documento PDF con los y demás. Si no requieres que sea dinámico puedes echarle un vistazo a soluciones en internet como webtopdf.com/
Gracias por el video, tengo una duda, estoy trabajando en un proyecto en el que me piden descargar como pdf un dashboard, el mismo tiene componentes hijos que son filtros, un mapa de google y un gráfico de barras. al momento de duplicar el componente con las etiquetas de react-pdf, debería duplicar tambien a los componentes hijos y reemplazar sus etiquetas tal como en el componente padre? y por otro lado, como el dashboard es dinámico, es decir, puedo aplicar filtros y hacer que cambie el gráfico y el mapa. este estado se perdería al imprimir el componente duplicado?
Hola, Depetris Como buen dev te diré que depende jaja Depende de cómo estén tus componentes y como hagas el filtrado. Pero en una primera instancia puedo decirte que sí debería poderse. ¿Por qué no pruebas y nos compartes tus hallazgos?
A mí me da el siguiente error Module not found: Error: Can't resolve 'zlib' in '/node_modules/@react-pdf/pdfkit/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }
Hola, Gabriel. Tal parece que hubo un problema con alguna dependencia en los módulos. ¿Ya probaste a borrar package-lock.json y node_modules y volver a ejecutar npm install?
Que tal amigo, aqui molestando otra vez, todo genial con la libreria solo que tengo una duda, ya que cuando paso el fontFamily inline no consigo que se aplique, y peor aun no carga el pdf, segun la documentacion de react pdf si es soportada esa propiedad
Hola, Oscar Sí acepta los estilos en línea, pero para temas específicos de letra tienes que declararlo previamente. Échale un vistazo a este apartado: react-pdf.org/fonts
Por desgracia me sale muchos errores al importar la librería ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24 ERROR in ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 1:0-24 ERROR in ./node_modules/blob-stream/index.js 3:11-26 y más cosas que aparecen :(
hola hize lo mismo que usted,. pero me sale este error,. browser-external:events:9 Uncaught Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code.
Hola, Alexis Lo que comentas es un error por las versiones de React y la biblioteca de PDF. Lo que puedes hacer para que no hay problemas es usar las versiones que tengo en el repo. De hecho, tengo un comentario fijado para que veas cómo puedes clonarlo en caso de que estés familiarizado con Git. Saludos 🤙🏼
@@alexisantoniojimenezjoaqui6776 No termino de entender, pero esto es lo que debiera pasar. Al clonar el repo, tendrás el código en tu PC. Después abres el archivo de preguntas y lo modificas a gusto. No es necesario ejecutar nada, tan solo editar esa parte. Una vez terminado, lo publicas en internet con Firebase o Netlify y listo. En nunca parte se involucra vite o Cra y no hay alguna parte sobre CODE o Go to FILE.
Alguien mas tiene problema con la buffer? e seguidos los pasos al pie de la letra e incluso me fije que los modulos estuvieran en la misma version y nada
@@lasfito el problema son las polifys, a partir de CRA 5.0.1 las polifys de @react-pdf no se agregan automáticamente al archivo webpack.config toco ingresar al archivo que esta dentro de node_moduls/react-scripst/config añadir las reglas de las polifys e instalar los recursos necesarios como buffer entre otro según la librería o el proyecto Si mucha gente que utilice CRA sufre este mismo problema y no a podido salir de el, lo invito a dejar su comentario podría ayudarlo o realizar un video para la comunidad
@@jacl_dev Gracias, le echo un vistazo. De hecho hay varios que han tenido el mismo problema, si echas un vistazo a los comentarios lo confirmarás jeje Así que un servicio a la comunidad no caería mal 🤙🏼
Y si tengo una tabla dinámica con colspan y rowspan, dependiendo de un map dentro de otro funciona? o como seria? por que tengo esto :
{registrosTabla.data.map((e) => { return (
{e.id}
{e.criterio.map((h: any) => { return (
{h.nombre.toLowerCase()}
); })}
); })}
y donde dice necesito cerrarla antes de pintar la otra columna que es la del map 2 de criterio, o sea que tengo dos columnas y la primera debe tener rowspan dependiendo de los criterios que es la segunda columna
Hola, Claudia Por lo que veo en el código sí debiera funcionar sin mayor problema. Pero asumo que si preguntas es porque te ha marcado algún error xd ¿Qué es lo que ocurre cuando ejecutas ese ejemplo? 🤔
@@lasfito si, el problema es que ejemplo: tengo 3 columnas, la primera debe adaptarse del mismo alto dependiendo de la segunda, ya que en la segunda hago un map pero el problema es como cierro el view de la primer columna ya que pues necesito que tome el alto dependiendo de la segunda columna
Hola, Alex Efectivamente, hay un problema de incompatibilidad por las versiones. Tienes 3 opciones: - Clonar el repo del vídeo - Probar con --force o --deps - Echar un vistazo a a los comentarios y ver las otras soluciones a las que llegaron los demás. Tengo en pendientes crear una biblioteca similar que esté actualizada, pero mientras toca hacer malabares jaja
@@lasfito Ya lo logré solo hay que forzar la instalación con --force, va a pedir otras librerías que nos encontradas, igual no dejará instalarlas pero con --force las instala y queda funcionando Sabes si hay manera de hacer tablas de manera fácil o convertir el HTML a formato PDF con esta u otra librería
Buen video! Me sirivó muchísimo, pero tengo el problema de cuando hago el npm run build y el npm run start me tira error y no renderiza nada del pdf ni tampoco deja descargarlo, de pronto alguien sabría cómo arreglarlo?
Hola, Julián Es un tema de las versiones de React y PDF. Tendrías que utilizar las versiones exactas que utilicé o leer los comentarios porque alguien había encontrado una mejor solución (no recuerdo)
esa libreria nose que brujeria tiene pero no la pude hacer andar ni con un proyecto de react en vite como asi tampoco con create-react-app.. justo que necesitaba hacer algo no anda y no hay otra para usar
Hola, MR Klenton. Me parece que es un tema de las versiones, en los comentarios alguien dejó una solución. Puedes revisarlo o clonar mi repo, ahí las versiones están de forma correcta. Saludos ✌🏼
@@Dhampirito Esos errores de "dependency tree" son bien molestos. ¿Por qué no clonas mi repositorio y pruebas de ahí? Así no deberías tener problema alguno
pero si esta tiene ventanas modales como hago, por que lo que necesito son las vetanas modales, lo otro es meno interesante... lo primordial que necesito son las ventanas modales
Buen Video, tengo un problema me salta este error ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28 Module not found: Error: Can't resolve 'stream' como podria solventarlo?
@@sergioromero9707 Hola, Segio. No lo he trabajado mucho, pero me parece que no hay etiqueta para eso. Échale un vistazo a algunos ejemplos que quizá puedan ayudarte: github.com/wojtekmaj/react-pdf/wiki/Recipes
Al parecer hay personas con problemas para instalar las dependencias necesarias.
En este corto video les muestro cómo proceder para que todo se ejecute con normalidad.
ruclips.net/video/BFUS_0y9_aM/видео.html 👈🏼
Si llegan a terner problemas de instalación con "npm install @react-pdf/renderer --save" podrian intentar usar "npm install @react-pdf/renderer --legacy-peer-deps"
@@itengineeremmanuel2284 gracias de la que me salvo... una pregunta , a que se debe ese error? y por que añades -legacy-peer-deps ?
ami me sale el siguiente error!!
browser-external:events:9 Uncaught Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code.
at Object.get (browser-external:events:9:13)
at node_modules/queue/index.js (index.js:2:20)
at __require2 (chunk-HI5STWHF.js?v=2fda7313:15:50)
at index.js:24:31
uau que clase más magistral en todos los sentidos, intenso, interesante, bien explicado, útil, etc! Muchisimas gracias lafito! Video digno de la imagen de la fusión Goten y Trunks!
Gracias por las palabras, espero que te sigan gustando 🤙🏼
Me sirvió muchísimo para implementar algo que me pidieron en el trabajo. Muchas gracias por compartir!
Gracias, Ema
Espero que te haya servido 🤙🏼
Simple, claro y sencillo. Justo lo que necesitaba para añadir en mi aplicación de ingeniería. Muchas gracias!
Gracias, Jesús
Un saludo 🤙🏼
Muchas gracias, amigo, de verdad ha sido de gran ayuda. Tuve problemas, pero básicamente era el navegador Chrome, pues no me permite visualizar el PDF, pero sí descargarlo. Lo probé en otros navegadores y si funciona. Muchas gracias
Gracias, Darwin
Es raro lo que mencionas porque en el video usé que brave que parte de chromium. Espero que lo hayas resuelto 🤙🏼
Muchas gracias me salvaste la vida, todo muy completo y super detallado
Gracias, Tiri
Espero que te haya servido ✌🏼
Fenomenal, fantastico, la mejor explicacion de este tema, me salvas la patria. Eres grande bro muchas gracias. LIKE y SUSCRITO a tu canal
Gracias, Eriber
Me alegra que te haya servido 🤙🏼
Excelente clase! Me sirvió muchisimo, mil gracias por tu aporte.
Gracias, José
Me alegra que te haya servido 🤙🏼
Me gusta bastante el video, solo una duda. Como podría ponerle un encabezado y pie de pagina, y aparte que si la pagina no cabe toda la información en la siguiente pagina del pdf siga repitiendo el encabezado y pie de pagina?
Tiene tiempo que creé este video, si no me equivoco, crear encabezados y píes de página de forma automatizada no era posible. Debes añadirlos de forma manual 🤔
me gusto mucho como enseñas y las piscaz de humor son lo maximo xD
Gracias, Jesús.
Espero te sirvan los tutos ✌🏼
simple y sencillo, gracias! ^^
Gracias, espero que te haya servido 🤙🏼
Dios me lo bendiga por tan buen tutorial ♥, encima con memes jajaja que mejor
Grax por la bendición, a ver si con ella ya me corre el código :,v
@@lasfito Profe me tira error😢, no le pido que me lo solucione, solo le pido si tiene una idea de que puede ser
./node_modules/@react-pdf/font/lib/index.browser.es.js
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
En stackover dicen que debo editar el package.log pero sigue sin funcionar.
De nuevo, gracias por el tuto♥
Sí, al parecer es un tema con las dependencias.
¿Ya probaste eliminando package-lock, node_modules y volviendo a instalar? Si no funciona, te recomendaría usar las mismas versiones que tengo en el video y después ir actualizando dependencias poco a poco para ver dónde es que se rompe.
disculpa que listado de datos debería buscar para saber que div se reemplaza por View en render? , lo pregunto porque necesito realizar una tabla y no encuentro etiquetas.
gracias.
Para algo como una tabla tendrás que ser creativo con los y . Desafortunadamente no existe un equivalente de y sus etiquetas
amigo muchas gracias!! sabes por que las imágenes traídas de firebase-storage no se pueden ver??
Ah, ya te había respondido en el otro comentario xd
Tengo el problema que no se muestra el PDF cuando esta en un dispositivo móvil, hay que usar media query o tiene que ver con el tamaño de hoja que le asigné? (A4). Gran video
Hola Luis,
Se muestra algún error en la consola?
@@lasfito no mostraba ningun error en consola, al final si se arregló con media query pero tuve que crear una stylesheet para el pdf
Excelente video, muy útil,
¿existirá la forma de pasarle no una creación del documento sino un documento ya creado al PDFViewer?
¡Gracias!
Hola, Lennin
Si quieres mostrar un PDF ya existente, no es necesario utilizar alguna biblioteca externa. Puedes usar la etiqueta object de html:
@@lasfito Pero cuando son URL no locales, por ejemplo, un archivo en la nube no lo muestra, hace es la descarga de dicho documento
No necesariamente, revisa este ejemplo, ahi implemento un object con URL externa:
lasfito-object.w3spaces.com/
@@lasfito Excelente muchas gracias!
@@lasfito Si ese archivo pdf me lo suben desde un formulario, tenes idea como lo muestro como pdf para visualizarlo?
Excelente video colega!! se agradece que compartas tus conocimientos. Tengo una duda, como haría en el caso que solo quiera descargar (no es necesario verlo) un archivo pdf que ya tengo en mi computadora?
Gracias, Lorenzo.
Mueve el archivo a la carpeta de public/ y luego en un anchor tag apunta el href al nombre del archivo. Adicional, debes de añadir el atributo download="true" al anchor ✌🏼
@@lasfito Excelente muchas gracias!!
@@lorenzopodio4382 Hola Lorenzo, pudiste lograr añadir el archivo pdf y que sea descargable?
@@candelalinares6931 Hola Candela, no pude. Terminé optando por poner el pdf en mi cuenta de google drive y mostrarlo a través de un anchor tag que me redireccione al link de solo lectura que te da drive, ya que de ahí también se puede descargar. Es una solución bastante vaga quizás, pero me sirvió para mi proyecto que es bastante pequeño y con poca complejidad
Hola, chicos.
Acabo de subir un video donde muestro a detalle cómo volver descargable algún archivo pre-existente:
ruclips.net/video/nb4vZqjG4Kg/видео.html 👈🏼
Excelente video, tienes de como crear una app para play store??
Gracias, Elvis.
No, pero lo tengo en lista de espera para más adelante grabarlo ✌🏼
Tengo una tabla con aprox 300 registros (filas) y necesito que al descargar el pdf me haga un salto de linea cada 40 filas, como le hago?
Hola, Ale
Disculpa la demora
Me parece que con este paquete no se puede crear PDFs de forma programática, por lo tanto tendrías que manualmente incorporar esos saltos.
Buen video amigo! Una consulta en caso de que quiera compartir el pdf a alguna app de mi celular por ejemplo whatsapp, como seria? Gracias
Gracias, Nico
Para compartir el PDF en WhatsApp y otras Apps de tu cel puedes utilizar la API de "Web Share".
En este video te muestro cómo hacerlo paso a paso:
ruclips.net/video/FRQCQrpe1GE/видео.html
Saludos
Muchas gracias por tu contenido, ha sido de gran ayuda!
Por nada, Daniel. Me alegra que te haya servido ✌🏼
¡Muchas gracias! Veo que se despliega bien en localhost pero, ¿cómo puedo lograr que se vea en producción? Aunque lo configure bien a nivel local, me ha sucedido que no se puede ver cuando ya está en netlify o hostinguer, ¡muchas gracias!
Tienes algún error en los logs de netlify o hostinger?
Hola buen video; consulta: para generar un PDF de 30 hojas aprox tambien sirve o es mejor traer el pdf hecho desde el backend ?
En ese caso es mejor usar algo programático desde el back
Hola que tal, muy buen tutorial, tengo una duda: Como haria en caso de usar un documento personal que quiero comparir en PDF y no una API, como sería ese proceso?. Gracias
Hola, Diana
¿Me podrías explicar nuevamente? No entendí a qué te refieres
@@lasfito Oks, bueno es q debo hacer un proyecto donde pueda previsualizar un documento que tengo en mi PC Ej: un Resume y dar la opción de descargarlo en PDF entonces eso vendría siendo un documento mio que no viene de una API, como podría hacer yo ese proceso. Gracias
Hola, Diana.
En ese caso solo necesitas agregar el PDF como archivo/asset a tu código y luego "visitarlo". Por ejemplo, ejemplo.com/archivo.pdf . Si no puedes cargarlo al código, puedes añadirlo a un input de tipo archivo ✌️
@@lasfito Oh ok super mil gracias por la info. Súper tu tutorial
❤❤
@@NANAPATY Por nada, aquí andamos por cualquier otra duda 👋
Excelente tuto!! mil gracias
Gracias, Alejandra
Espero que te sirva ✌🏼
Con react 17.0.2 este instructivo no se puede ejecutar. podrías hacer otro video con esa versión de react? Gracias
Hola, Walter
Sí, varias personas me lo han comentado.
Ya me hago un espacio y saco un nuevo video.
Saludos
@@lasfito entonces eso ha de ser, yo había visto otro tutorial de alguien más, pero el declaraba los componentes funcionales de un modo distinto, y con ese modo no tengo acceso a varias funciones, como el onChange de input text.
Asi:
En vez de empezar con const Login = () => {}
Inicia directo con export default function Login({
Y dentro de este hace el render.
@ Hola, Gerardo
Esta diferencia que mencionas no es relevante para el problema.
La diferencia es que const Login = ()=> {} es una función de flecha y function Login () {} es una función "estándar"; pero al final del día ambas son funciones.
Ambos métodos son válidos en cualquier versión de React 🤙🏼
En el caso de que no quiera crear otro componente que genere el DocuPDF en este caso, me saldria mejor usar la libreria de ReacToPrint?
No conozco ReacToPrint, pero suena a que ya conoces la respuesta de tu pregunta
@@lasfito gracias bro, ya lo hice con react-to-print
Una pregunta, esto es para crear un pdf desde cero, pero si yo quisiera cargar un archivo pdf, se podría hacer?
Si
Puedes poner el pdf en public para que sea estático y en tu app usas esa url para mostrarlo
Estoy siguiendo los pasos y me sale este error:
ERROR in ./node_modules/jpeg-exif/lib/index.js 3:10-23
Module not found: Error: Can't resolve 'fs' in '/Users/rafaelirigoyen/Desktop/GIG/Certificates App/certificates-app/node_modules/jpeg-exif/lib'
que estare haciendo mal?
Y descargue el repositorio pero no se me vi ninguna pista pero si me deja descargar no entiendo
Cuando dices que descargaste el repositorio, te refieres al mío?
De ser así, debes revisar que versión usé ahí para que uses la misma.
Ahora mismo, las versiones recientes de react-pdf traen error
Una pregunta, Como puedo hacer que el boton descargar del PDFViewer quede el nombre que yo quiera como el que tu colocastes poema.pdf
En esta parte del código:
Saben si es compatible en typescript. Porque me genera el error: ./node_modules/@react-pdf/renderer.jsx.tsx doesn't exist
Aunque he instalado la libreria.
No lo es
excelente video! justo lo que necesitaba gracias!
Por nada 😉
Hola genio! Excelente tutorial. Una pregunta me gustaría poder previsualizar el PDF y si todo va bien luego generarlo pero poder enviar ese PDF generado mediante formData al servidor y no descargarlo. Cómo podría lograr esto? Muchas gracias.
Sí, si solo requieres acceso al archivo puedes usar .
Aquí puedes ver cómo usarlo: react-pdf.org/advanced
Básicamente es generar el blob y luego referenciarlo en el form o directamente en el request para enviarlo al servidor 🤙🏼
@@lasfito muchas gracias crack!
Hola lasfito, ante todo te doy las gracias por el tutorial. Estoy probando el proyecto con NextJS y al compilar me da este error: "PDFDownloadLink is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build." Alguna solucion ?? desde ya muchas gracias
Hola, Marcelo
Lo que ocurre es que Next te está renderizando los componentes en servidor y como te indica el error PDFDownloadLink es una API del navegador y el servidor no puede acceder a ella.
Lo que debes hacer es evitar que este componente se renderice en servidor y por ende que solo se renderice en cliente. Si buscas en Google encontrarás varias soluciones/implementaciones de como renderizar solo en cliente en Next ✌️
Amigo, excelente video. Como podria establecer encabezados y pie de pagina al documento?
Hola, José.
Tendrías que crearlos con algún componente hecho con Views y Texts ✌️
si tengo input y select como envuelvo ?? si los div son View y el resto de texto es Text, como le hago con los input ?
Piénsalo por un momento, ¿quieres poner el input en el pdf? ¿o quieres poner el valor del input en el pdf? Recuerda que el PDF no es interactivo, por lo tanto poner un input no serviría de nada, además de que no se puede.
Lo que tendrías que hacer es guardar el valor seleccionado del input y luego renderizarlo dentro de un 👈🏼
Thanks for tutorial! :D
You're welcome 🤙🏼
Hola! Gracias por este excelente tutorial, tengo una duda, se puede generar el PDF en tamaño de papel térmico? Es que necesito generar facturas de ese tamaño. Muchísimas gracias!!
Hola, Álvaro.
Desconozco cuál sea ese tamaño, pero sí se pueden personalizar las medidas del PDF. Para ello pasas una de las opciones disponibles en la propiedad de tamaño en page:
Puedes ver las opciones en:
github.com/diegomura/react-pdf/blob/master/packages/layout/src/page/getSize.js
Saludos 🤙
Muy buen video! Estoy teniendo problemas con la etiqueta de Image y es que básicamente no muestra ninguna imagen que le paso. Son imagenes que ya muestro en otra parte de mi proyecto así que no sabría que podría solucionarlo. Otra cosa que me gustaria saber es si quiero que tenga los estilos como ya lo tengo en mi componente de react. Estaba viendo opciones como de convertir directamente el componente de React en html y luego hacerlo pdf, pero esa opción obliga a descargar el pdf y yo solo quiero tener el visualizador
Hola, Bryan
¿ya revisaste la documentación y el apartado de imágenes?
react-pdf.org/components
Sobre la 2da pregunta no he comprendido muy bien cuál es el problema.
Los componentes que utiliza React-PDF ya son aptos para React, por lo tanto no hay que hacer ninguna conversión como mencionas.
Échale un vistazo al apartado de estilos en la documentación y si te surge una duda más específica puedes comentarla y lo resolvemos:
react-pdf.org/styling
Saludos ✌️
@@lasfito solucioné el problema de las imágenes, era algo muy simple y que olvidé, por si a alguien le pasa algo similar, en mi caso era que yo copié mi componente de React con las importaciones y usaba un componente Image de Chakra Ui y como tenía el mismo nombre que el componente de react-pdf entonces había un error. Con respecto a lo segundo de lo que hablé lo decía porque mientras investigaba como hacer los pdf me encontré con un sitio en el que indicaban que se convertía el jsx de react en html y después se lo convertia en pdf usando jspdf creo que era pero no estoy seguro
Sí, esos errores pasan todo el tiempo. Es casi obligatorio en este campo jaja. Sobre lo segundo, tal parece que se trata de otra librería para crear PDFs. Con la que uso en el video no debes preocuparte por convertir componentes a HTML sino a componentes "primitivos" como View e Image. En el enlace anterior puedes encontrar todos los componentes permitidos ✌🏼
Sabes como puedo importar svg? Buen video amigo, me ayudaste un montón
Hola, Daniel
¿SVG en el docu PDF?
Me parece que no se puede, pero podrías intentar añadir una imagen y pasarle por fuente el archivo svg.
Gracias!!
Espero que te haya servido 🤙🏼
Excelente video bro!, voy a ver si se puede integrar con react native jaja
Gracias, nos cuentas qué tal te va con la prueba ✌🏼
Eres el mejor gracias
Gracias, Kevin
Espero que te haya servido ✌🏼
genial como siempre pero tengo una duda como puedo cargar el sitio para poder verlo como pdf y descargarlo
Gracias.
Para eso tendrías que crear cada parte del sitio dentro del documento PDF con los y demás. Si no requieres que sea dinámico puedes echarle un vistazo a soluciones en internet como webtopdf.com/
Gracias por el video, tengo una duda, estoy trabajando en un proyecto en el que me piden descargar como pdf un dashboard, el mismo tiene componentes hijos que son filtros, un mapa de google y un gráfico de barras.
al momento de duplicar el componente con las etiquetas de react-pdf, debería duplicar tambien a los componentes hijos y reemplazar sus etiquetas tal como en el componente padre? y por otro lado, como el dashboard es dinámico, es decir, puedo aplicar filtros y hacer que cambie el gráfico y el mapa. este estado se perdería al imprimir el componente duplicado?
Hola, Depetris
Como buen dev te diré que depende jaja
Depende de cómo estén tus componentes y como hagas el filtrado. Pero en una primera instancia puedo decirte que sí debería poderse. ¿Por qué no pruebas y nos compartes tus hallazgos?
Hola yo quiro mostrar un archivo pdf que ya tengo en react que ya tengo no crearlo, como puedo hacer?
Hola, puedes explicar lo que quieres hacer?
Tengo una imagen en base64 que me da una API, como puedo imprimirla usando el componente Image de react render
Hola, Alex
La biblioteca admite base64 como fuente para el componente de imagen.
No deberías tener problema alguno usándolo ✌🏼
Buenas!
Para implementarlo en Nextjs habría algún problema? Gracias.
Ninguno, Cris ✌🏼
buen video, duda si presionas descargar pdf sin presionar ver pdf este lo descarga?
Sí, siempre y cuando hayas generado antes la vista web ✌️
me sale este error y no me deja ver nada
En qué parte exactamente ?
Como se llama la extensión que te autocompleta estructura de código como el template de archivo de React?
Hola,
Es Github Copilot 🤙🏼
A mí me da el siguiente error
Module not found: Error: Can't resolve 'zlib' in '/node_modules/@react-pdf/pdfkit/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
Hola, Gabriel.
Tal parece que hubo un problema con alguna dependencia en los módulos.
¿Ya probaste a borrar package-lock.json y node_modules y volver a ejecutar npm install?
@@lasfito Hola, a mi tambien me pasa lo mismo, ya hice lo que recomendaste pero sigue sin funcionar
@@davidespinosa307 ¿Corriste el npm install con el package-lock de mi repo?
@@lasfito Hola, tambien y sigue sin funcionar
@@lasfito me pasa lo mismo
Se puede colocar el PDFDownloadLink dentro del onclick? que ese PDFDownloadLink solo se dispare si le doy click en el botón
Me parece que sí, pero por sí mismo la descarga solo se dispara al hacer clic en el botón que está dentro de como puedes ver en el 19:40
Y si quiero que el boton Ver PDF, abra su visualización pero en otra pestaña?
Tendrías que abrir una nueva pestaña con algún param. Al abrirse la app, leer el param y poner el modo lectura de forma automática.
@@lasfito me gustaría ver un video de eso porque es super util mejor
Que tal amigo, aqui molestando otra vez, todo genial con la libreria solo que tengo una duda, ya que cuando paso el fontFamily inline no consigo que se aplique, y peor aun no carga el pdf, segun la documentacion de react pdf si es soportada esa propiedad
Hola, Oscar
Sí acepta los estilos en línea, pero para temas específicos de letra tienes que declararlo previamente.
Échale un vistazo a este apartado:
react-pdf.org/fonts
Por desgracia me sale muchos errores al importar la librería
ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24
ERROR in ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 1:0-24
ERROR in ./node_modules/blob-stream/index.js 3:11-26
y más cosas que aparecen :(
Hola, Jesús
Se trata de un tema de versiones.
Si clonas el repo que tengo en la descripción encontrarás la combinación de versiones que funciona 🤙🏼
Muchas gracias amigo, como siempre un excelente material, pero tengo una duda, ¿Cómo podría guardar un formulario hecho en expo a pdf?, Saludos.
Gracias, Jesús.
La verdad es que no he probado la librería con RN (Expo), entonces desconozco si se pueda.
hola hize lo mismo que usted,. pero me sale este error,. browser-external:events:9 Uncaught Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code.
Hola, Alexis
Lo que comentas es un error por las versiones de React y la biblioteca de PDF. Lo que puedes hacer para que no hay problemas es usar las versiones que tengo en el repo. De hecho, tengo un comentario fijado para que veas cómo puedes clonarlo en caso de que estés familiarizado con Git.
Saludos 🤙🏼
@@lasfito YA TENGO UN PROYECTO AVANZADO.. es hacer de nuevo el proyecto verdad?
O puedes cambiar las versiones en package.json, borrar node_modules y package-lock y luego instalas todo con npm i y ver si funciona
@@lasfito estoy trabajando con Vite.js
@@alexisantoniojimenezjoaqui6776 No termino de entender, pero esto es lo que debiera pasar.
Al clonar el repo, tendrás el código en tu PC. Después abres el archivo de preguntas y lo modificas a gusto. No es necesario ejecutar nada, tan solo editar esa parte. Una vez terminado, lo publicas en internet con Firebase o Netlify y listo. En nunca parte se involucra vite o Cra y no hay alguna parte sobre CODE o Go to FILE.
La liberia react-pdf me tira can't resolve 'fs', alguna recomendacion de como solucionarlo?
Me parece que anda abandonada en sus versiones recientes. Puedes instalar la versión específica que usé en el video
@@lasfito La instale pero no funciona en esta version de react que hay actualmente, estoy usando react puro, nose cual sera el problema 🥲
En ese sentido también deberías usar la versión de react que utilicé en el video
Muito Bom. Voce acaba de ganhar um inscrito!
Obrigado, Eduardo 🙌
@@lasfito Me gustaría ver esta misma aplicación pdf con Typecript. Es solo una sugerencia.
Excelente video sl2
Gracias! 😊
disculpa es compatible con next js?
Debiera serlo
Que buen video!!
Gracias, Fernando ✌🏼
Alguien mas tiene problema con la buffer? e seguidos los pasos al pie de la letra e incluso me fije que los modulos estuvieran en la misma version y nada
Hola, Alexander
¿Ya probaste a clonar el repo que tengo en la descripción?
En los comentarios viene fijado uno donde te muestro cómo hacerlo.
@@lasfito el problema son las polifys, a partir de CRA 5.0.1 las polifys de @react-pdf no se agregan automáticamente al archivo webpack.config toco ingresar al archivo que esta dentro de node_moduls/react-scripst/config añadir las reglas de las polifys e instalar los recursos necesarios como buffer entre otro según la librería o el proyecto
Si mucha gente que utilice CRA sufre este mismo problema y no a podido salir de el, lo invito a dejar su comentario podría ayudarlo o realizar un video para la comunidad
@@jacl_dev Gracias, le echo un vistazo. De hecho hay varios que han tenido el mismo problema, si echas un vistazo a los comentarios lo confirmarás jeje Así que un servicio a la comunidad no caería mal 🤙🏼
Y si tengo una tabla dinámica con colspan y rowspan, dependiendo de un map dentro de otro funciona? o como seria?
por que tengo esto :
{registrosTabla.data.map((e) => {
return (
{e.id}
{e.criterio.map((h: any) => {
return (
{h.nombre.toLowerCase()}
);
})}
);
})}
y donde dice necesito cerrarla antes de pintar la otra columna que es la del map 2 de criterio, o sea que tengo dos columnas y la primera debe tener rowspan dependiendo de los criterios que es la segunda columna
Hola, Claudia
Por lo que veo en el código sí debiera funcionar sin mayor problema.
Pero asumo que si preguntas es porque te ha marcado algún error xd
¿Qué es lo que ocurre cuando ejecutas ese ejemplo? 🤔
@@lasfito si, el problema es que ejemplo: tengo 3 columnas, la primera debe adaptarse del mismo alto dependiendo de la segunda, ya que en la segunda hago un map pero el problema es como cierro el view de la primer columna ya que pues necesito que tome el alto dependiendo de la segunda columna
Thank you.
You're welcome ✌🏼
que geniaal :D
Grax 🤓
Estimado en react 18, no funciona me arroja varios errores, podrías ayudarme con el downgrade a react 17 o una alternativa para react 18
Hola, Alex
Efectivamente, hay un problema de incompatibilidad por las versiones. Tienes 3 opciones:
- Clonar el repo del vídeo
- Probar con --force o --deps
- Echar un vistazo a a los comentarios y ver las otras soluciones a las que llegaron los demás.
Tengo en pendientes crear una biblioteca similar que esté actualizada, pero mientras toca hacer malabares jaja
@@lasfito Ya lo logré solo hay que forzar la instalación con --force, va a pedir otras librerías que nos encontradas, igual no dejará instalarlas pero con --force las instala y queda funcionando
Sabes si hay manera de hacer tablas de manera fácil o convertir el HTML a formato PDF con esta u otra librería
Las tablas son el talón de aquiles jaja.
Ahí sí toca echarle un poco más de coco
Could you please make a Tuto Export excel table into word with reactjs.
Thank you
Sure, I´ll work on it ✌
es posible convertir el pdf a bases 64 para enviarlo en una petición?
Sí, pero no con esta biblioteca.
Echa un vistazo a:
stackoverflow.com/questions/36280818/how-to-convert-file-to-base64-in-javascript
Saludos
Buen video! Me sirivó muchísimo, pero tengo el problema de cuando hago el npm run build y el npm run start me tira error y no renderiza nada del pdf ni tampoco deja descargarlo, de pronto alguien sabría cómo arreglarlo?
Me pasa lo mismo no se porq
Hola, Julián
Es un tema de las versiones de React y PDF. Tendrías que utilizar las versiones exactas que utilicé o leer los comentarios porque alguien había encontrado una mejor solución (no recuerdo)
esa libreria nose que brujeria tiene pero no la pude hacer andar ni con un proyecto de react en vite como asi tampoco con create-react-app..
justo que necesitaba hacer algo no anda y no hay otra para usar
Hola, MR Klenton.
Me parece que es un tema de las versiones, en los comentarios alguien dejó una solución. Puedes revisarlo o clonar mi repo, ahí las versiones están de forma correcta.
Saludos ✌🏼
Hola, es que no se me visualiza el PDF me aparece en blanco
Revisa si tienes algún error en consola o utiliza la versión que usé en el video
Thanks ;)
Me salió bilingüe el pana jaja
Gracias ✌🏼
@@lasfito jaajjajajaja
Hola tengo un documento html con table y no funciona. No se puede usar table?
No, tendrás que simular la tabla con View.
@@lasfito Donde puedo conseguir algun curso sobre usar primitivas como View? Gracias
@@fredy894 Hola, Fredy.
La verdad es que no conozco alguno, pero puedes echarle un vistazo a la documentación de React-PDF:
react-pdf.org/components ✌
ya no es compatible con la versión 18 de react :(
Se nos cayó un héroe 😢
Ya se puede implementar, yo pude. pero no se cual sería la razón por la cual ahora si se puede.
No puedo instalarlo en react 17.0.2
¿puedes probar de nuevo? Esa es la versión de React que utilicé para el tutorial
@@lasfito Rarisimo...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.2
@@Dhampirito Esos errores de "dependency tree" son bien molestos. ¿Por qué no clonas mi repositorio y pruebas de ahí? Así no deberías tener problema alguno
Tampoco puedo
@@yefribrioso511 😔
Lamentablemente no funciona con VIte :c no descarga nada, fui a la libreria y al poner la opcion que ellos dicen tampoco sale jeje
Qué lástima, me parece que la biblioteca está un tanto abandonada.
Alguien conoce alguna pagina para maquetear el archivo pdf con los elementos primitivos?
Te fallo, bro
a alguien mas le da el error que dice que doc.chilren esta undefined?
¿Lograste resolver el problema?
alguien sabe como solucionar el warning del casing ?
Hola, Arturo
¿Podrías explicar mejor a qué te refieres?
Y si tengo una tabla igual seria texto?
Hola, Oscar.
Para una tabla tendrías que "simularla" con View y Text.
@@lasfito gracias! Al final así lo hice
@@oscarcardoso7599 De nada, ¡suerte en tus proyectos! 🤙🏼
pero si esta tiene ventanas modales como hago, por que lo que necesito son las vetanas modales, lo otro es meno interesante... lo primordial que necesito son las ventanas modales
Ventanas modales que contengan a su interior el PDF?
No me reconoce Document, Text, Page.... me parecen puros warnings en la consola
¿Si los estás importando? 🤔
@@lasfito sisi :(
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Es porque lo tienes todo en mayúsculas. Prueba con solo la primera letra en mayúscula.
in english?
Try turning on the auto-translation
Buen Video, tengo un problema me salta este error ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28
Module not found: Error: Can't resolve 'stream' como podria solventarlo?
Hola, José
¿Ya probaste con npm i stream?
son obligatorios los estilos in line?
No, pero yo los añado así para que los tutoriales sean más rápidos.
@@lasfito a vale gracias.
@@lasfito sabes si puedo hacer una lista con etiquetas de HTML o hay otro etiqueta?
@@sergioromero9707 Hola, Segio.
No lo he trabajado mucho, pero me parece que no hay etiqueta para eso. Échale un vistazo a algunos ejemplos que quizá puedan ayudarte:
github.com/wojtekmaj/react-pdf/wiki/Recipes