React PDF - Crea PDFs con React desde el navegador

Подписаться 262 тыс.

Просмотров 18 тыс.

50% 1

Aprende a crear PDFs desde el frontend usando React PDF, una biblioteca que te permite usar componentes de JSX al estilo de React y React Native pero que te permite crear documentos PDF como si de escribir HTML se tratara, ademas que tambien permite tener un visor PDF desde el navegador.
Código del ejemplo:
github.com/faz...
Curso Recomendados
Curso de React: • Curso de Reactjs desde...
Curso de Nextjs: • Curso de Nextjs desde ...
🛒 Fazt Web
Tienda Online: store.faztweb....
⭐ Cursos Recomendados
Curso de Nodejs ⮕ fazt.dev/nodejs
Curso de Python⮕ faztweb.com/py...
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
Github ⮕ github.com/fazt
Twitter ⮕ / fazttech
Whatsapp ⮕ www.whatsapp.c...
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef2...
Namecheap ⮕ namecheap.pxf....
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
Notion ⮕ affiliate.noti...
Codecrafters ⮕ app.codecrafte...
Puedes encontrar la lista de tutoriales de React en:
faztweb.com/react
#reactpdf #reactjs #javascript

Опубликовано:

4 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 45

@rubenn6160 10 месяцев назад

Esto ira a mi lista de cursos que ver, lo vere después de otros 10 jaja

@cristiannerylozada4713 10 месяцев назад

notas importantes: segun la documentacion, no se puede tener estilos grid, y acepta unidades por defecto (pero tmbn acepta 'px' ), para mostrar el pdf se implementara mediante un

@omarchanelalifuertes910 10 месяцев назад

Acaso eres mi ángel de la guarda, primero los formularios y ahora PDF, en el proyecto en el cual trabajo siempre con un video muy oportuno

@Deus-lo-Vuilt 10 месяцев назад

Gracias Fazt, estos vídeos que haces compartiendo bibliotecas y librerías me han servido mucho ❤

@jairflores3047 9 месяцев назад

Hace poco tiempo, estaba utilizando esta libreria en mi proyecto, pero tuve que cambiarla porque, casualmente, con Next.js 13, al subir la aplicación a producción, se generaban problemas (reventaba el pdf, link, viewer de la libreria). La 'solución' que han encontrado prácticamente implica no usar Next.js 13. Espero que esto le sea útil a alguien que esté pensando en utilizarlo con Next.js. Si a alguien más le ha sucedido lo mismo que a mí y ha encontrado la solución, será bienvenida.

@diegomarroquin4369 5 месяцев назад

En serio? Nooo, que triste, yo este lo usé con React y me funcionó a la perfección, pero necesito ahora hacer otro pero con Next para crear API

@seanmeissimilly 7 месяцев назад

Muchas gracias, esto me ha servido en mi aplicacion web, saludos desde Cuba.

@joaquinbustelo7889 10 месяцев назад

Fazt siempre compartiendo lo que necesitamos 💕💕💕

@byrondaniel9386 6 месяцев назад

uff siempre salvándome la vida y los proyectos ajajaj, gracias :)

@BigAstaroth01 10 месяцев назад

De nuevo, justo lo que buscaba. Eres el mejor

@agustingonzalez7641 10 месяцев назад

Uhhh me viene de diez, sos un grande pa!

@juangabriel2559 6 месяцев назад

Justo lo que buscaba.

@RobertoRamirez-ey1ds Месяц назад

gran video, aunque me hubiese gustado ver como se crea tabla para reportes

@CarlosCarvajal 9 месяцев назад

Muchas gracias por la info, fue de mucha ayuda!

@dantemercurial1957 8 месяцев назад

Puedes subir un video reparando el problema de @react-pdf/renderer: Can't resolve 'fs' in '/app/node_modules/jpeg-exif/lib'? o sugerir otra alternativa que proporcione el mismo resultado?

@devdariill 9 месяцев назад

con print media de css puedes hacer el pdf para descargarlo al usar el la impresion de pagina normal y vale todo el css

@fernandojosefloresmendoza4504 2 месяца назад

Esta genial. Como puedo agregar un logo en la parte izquierda superior en cada página?

@rodrigoandrespapamija3413 10 месяцев назад

Gracias Fazt eres un crack Una pregunta, la parte de PDFVIEWER sirve también para visualizar archivos ya existentes? Por ejemplo ver los archivos que escogí en el explorador de archivos de windows?

@danielloveradamian934 9 месяцев назад

Alguien sabe cómo podría hacerlo para tablas en base a data dinámica? Ya lo intente pero cuando paso mi data a través de un prop me da muchos errores 😢

@juansalinas788 5 месяцев назад

Fazt, conoces alguna librería que permita guardar imágenes de gráficas generadas con librerías como Chart.js, Highcharts, etc., y también agregar tablas?

@sergiomdp2002 4 месяца назад

Cuando estoy editando el código de un PDF, y viéndolo con el PDFViewer, este no se actualiza cada vez que guardo un cambio. Tengo que hacerlo manualmente. Tienen este problema? Tiene solución?

@vkurama7u7v22 5 месяцев назад

Una dudas, y si solamente quiero generar el archivo, y posteriormente subirlo a la nube mediante una api, que método se usaria?

@GratCode 10 месяцев назад

Genial....!! Gracias

@juandanielvalderrama1485 10 месяцев назад

Que bueno un vídeo de cómo hacer un árbol de jerarquias

@rodrigolezcano3029 6 месяцев назад

Hola! Buen video! Cómo se hace para pasarle una prop dinámica dentro de un ? Estoy intentando hacerlo así: {prop.miDato} ; pero no funciona.

@higorskowronskidesouza1692 8 месяцев назад

Poderia fazer um com Next (versão 14 ou 13), por gentileza?

@ivoalegre2877 9 месяцев назад

Hola! puede ser que haya un error con PDFViewer con los dispositivos moviles? se ve todo correcto en el navegador y cuando hago las pruebas en pantallas mas chicas, pero cuando paso a hacer las pruebas en mobile se queda todo en blanco! gracias fazt sos crack!

@Segadordealmas 3 месяца назад

Se puede asignar una contraseña al documento??

@claudiomnec 10 месяцев назад

ReactPDF vs PDFTKit?

@armandodma6730 2 месяца назад

funciona para react native? o hay algo similar para react native?

@enmanuelrondon8906 6 месяцев назад

Saludos! alguien sabe como hacer para que se vean las imagenes de firebase storage???

@CodeCastle_Oficial 9 месяцев назад

Gracias por el video... Pero el de backend esta eliminado... Video no disponible La persona que subió el video lo quitó.

@FaztCode 9 месяцев назад

Te refieres a PDFKit, te dejo en enlace: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_TEikWd9GW0.html

@franciscojoserivascorralej5414 10 месяцев назад

Gran video, aunque el sonido y la imagen no están sincronizado

@FaztCode 10 месяцев назад

Si el editor aún se está adaptando y varios vídeos le están saliendo mal

@brandon400 8 месяцев назад

no se puede insertar html ni templates😔

@lucianocosta4062 10 месяцев назад

Hola buenas , soy yo o el audio y el video no estan sincronizados ?

@FaztCode 10 месяцев назад

Si Luciano ha sido un error del editor

@vicenterodriguez7236 8 месяцев назад

Me tira un error, " can't resolve 'fs' " alguien sabe que pasa?

@FaztCode 8 месяцев назад

Si estás en Nextjs no olvides colocar el use client

@vicenterodriguez7236 8 месяцев назад

@@FaztCode Nono, estoy con react puro, necesitaría colocar ese use client también?, justo está librería me salva pero me tira ese error y no hallo solución en ningún lado

@vicenterodriguez7236 8 месяцев назад

@@FaztCode En si cuando instalo la dependencia veo que trae una carpeta y en esa carpeta se usa el fs y varias cosas de node que tiran error, pero si borro la carpeta deja de funcionar

@animeadicts 9 месяцев назад

Estoy usando Next y trato de seguir los pasos del video y no me salen, trato de seguir los de la documentación y tampoco me sale. Me bota este error: "Error: PDFViewer 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." Si alguien me puede ayudar a resolverlo les agradecería. PD: Ya le pregunté a ChatGPT y tampoco me ayudó :v Ah no ser que esté pendejo yo

@FaztCode 9 месяцев назад

Si estas usando nextjs intenta colocar la propiedad "use client" arriba de todo el documento que indica que no es un componente de servidor sino del.ñ frontend