Crea, Visualiza y Descarga PDFs en React

## Transcripción automática

hola chicos que tal bienvenidos aseguran

3 ha pasado que tiene alguna aplicación

que genera contenido dinámico piensa

porque ustedes lo crean o bien sea

porque lo jalan desde alguna api y

además de mostrarlo en pantalla

seguramente han querido mostrar en algún

documento pdf en el tutorial de ves

mostraré cómo hacer esto cómo tomar esta

información meterla en una vista pdf o

además si así lo desean permitir al

usuario directamente sin la vista

descargar el documento y que dicho

documento se vea exactamente igual a la

información que están renderizado se les

interesa acompáñame en el vídeo de hoy

[Música]

antes de comenzar les recuerdo que como

siempre encuentran el código de este

tutorial en mi repositorio de tutoriales

los hicieron a tutoriales y siéntense

libres de copiar modificar tomar que sí

vayamos a nuestro editor en mi caso yo

trabajaré con beats code voy a abrir una

nueva terminal y lo que haré es

dirigirme al escritorio y desde ahí voy

a crear una copia del famosísimo fui a

riad lo llamaré pdf tutorial damos entre

los ejecutamos y mientras el descaro

instar a todos no olviden darle me gusta

y escriben los comentarios que

tutoriales gustaría ver en este canal

una vez que éste haya terminado de

instalar de este proyecto está esta

copia de declarar lo queremos es acceder

al folder concede pdf este y desde aquí

vamos a instalar dos dependencias más la

primera es la dependencia para los pdf

que estaremos utilizando la cual es

estar aquí urak y un pdf punto o hereje

aquí encuentran el comando para

instalarla entonces nos regresamos lo

pegamos y lo instalamos adicionalmente y

esto es opcional la segunda dependencia

yo voy a estar trabajando con woods

track para ryan entonces lo que haré es

venir acá hacer clic en get started

tomar el comando de instalación

este instalarlo en este mismo folk del

folk der de nuestro proyecto muy

importante fíjense siempre que la

terminal les indica que están en el

folder del proyecto una vez instalada la

dependencia de pdf y la dependencia de

butcher lo que quiere es abrir la

carpeta desde escritorio aquí está y

antes de comenzar voy a tomar los

estilos para buscar que están justo aquí

estos los copió y los voy a pegar en

index

no perdón a quien index

entonces ya tenemos nuestro proyecto si

todo ha ido bien y abrimos una terminal

y corremos en plan start esto nos va a

ejecutar el ambiente de desarrollo y

debiéramos ver la clásica pantalla de

bienvenida de brad y aquí lo tienen y lo

que vamos a hacer es limpiar un poquito

proyecto porque esto trae muchísimo

muchísimo relleno entonces voy a

eliminar el estilo de la app la prueba

el estilo de index el logo los reportes

de web va a ir ao esto de aquí y debía

quedarnos únicamente up index yo que

desde app vamos a eliminar lo que

hayamos borrado previamente vamos a

eliminar todo este rellenito y vamos a

dejar que les parece una noche 1 y hola

qué tal pondría que el mundo pero hola

mundo hola bueno pues hoy está muy

trillado chicos dijo que tiene index

también tenemos código muerto por

ejemplo esto de aquí y los web air outs

y esto de aquí abajo muy bien debía

quedarnos únicamente lo de riad lab los

estilos de buscar y si yo me regreso a

mi aplicación y refresco aquí está

muy bien estamos dentro

lo primero que voy a hacer desde aquí es

crear un menú superior este similar que

les mostré en el cual podamos decidir si

queremos ver la vista web si queremos

ver la vista pdf o si queremos simple y

sencillamente descargar el pdf para ello

voy a crear aquí un count que se llame

menú este y desde aquí vamos a

al regresar un elemento nada dentro del

cual vamos a meter tres botones y aquí

ya me está ayudando el copiloto este

primero vamos a importar varón desde

books grande

aquí está entonces dentro de una vamos a

poner tres botones

no va a ser ver este web otro será ver

pdf y un último será descargar pdf muy

bien regresamos a la aplicación y claro

éste no lo insertado vamos a ponerlo

aquí arribita

y debiera haberse nos anima a ver qué

pasó es que aquí me faltó decir que esto

lo que quiere es regresar entonces

metemos está aquí

está acá

ok ahora esto lo que regresa al menú y

aquí debe estar ver web ver pdf y

descargar pdf y se cuando yo le haga

clic en ver web me muestre una

información dinámica aquí en el

navegador para ello vamos a obtener esta

información dinámica vale donde

regresamos aquí y lo que haremos es yo

estar trabajando con una api que genera

poemas aleatorios para ello voy a decir

con es poema set poema es igual a y

usted que inicialmente va a estar en

nube y ahora la idea es que haya una

función que vaya por datos por esta app

y por estos poemas y me los guarde aquí

este y dicha función va a ser más o

menos así tenemos la función fecha poema

que va la app y tomar la respuesta y la

guarda en este estado de puebla esto que

quiero eliminar y luego esta función de

fecha poema es ejecutada al principio

con un giuseppe con dependencia vacía lo

cual indica que esto va a correr al

inicio aquí me dice la pantalla que no

estoy declarando estos dos para ello

vamos a importar react no esté más

reaccionarias y desde aquí mismo también

vamos a jalar el juz state y él

para que no me maten muy bien y hasta

entonces tenemos la función que va por

los datos cada problema lo guardan elfec

lo mete aquí y ahora la idea es que

cuando yo haga clic en el botón de ver

web me muestre la información del poema

aquí para ello me voy a deshacer de esto

y para ello vamos a crear este

componente de vista web entonces aquí en

shorts voy a crear un nuevo archivo este

que se va a llamar vista web punto js

aquí vamos a correr una plantilla normal

y la idea es que este elemento reciba el

poema que le reciba el poema que fuimos

a obtener ese la pista aquí recibe el

poema y la información del poema laver

mostrando en distintas etiquetas por

ejemplo un h1 que va a llevar el título

del poema poema cairo este y ojo ojo que

esta información es bien el nap y que la

información tardé en llegar entonces si

lo dejamos así y le pasamos poema esta

información se la pasamos desde un

principio y en un principio la

información no ha llegado por lo tanto

nos ha marcado error de andy fine para

ello hay que protegernos con un operador

terciario más o menos así y le decimos

si poema existe si podemos ya tiene un

valor verdadero entonces pone con el

título del poema caso contrario si poema

no existe pone unos puntos suspensivos

se pueden poner que no ponga nada

entonces aquí el título y de bajito

vamos a poner este el autor vamos a

poner lo mismo sí bueno existe poner

poema poeta contó name caso contrario

con es puntos suspensivos una imagen y

tiene imagen vamos a obtenerla desde una

vida imágenes aleatorias la cual es yx

un punto fotos diagonal y aquí metemos

las medidas que queremos lleva a poner

600 x 400 después de la imagen vamos

poner un pie de un pie de imagen en una

descripción este medio falsa a mí se me

ocurre vamos a poner aquí una constante

que sea menor en esta constante va a ser

igual a esto aquí un lore nixon o que en

tu estuvo en pie de página y por último

el contenido del poema lo mismo tipo de

malla existe entonces pone el poema

content caso contrario poner los puntos

suspensivos y ya está entonces este

componente de vista web recibe la

información del poema que fuimos a

buscar y una vez que poema haya cargado

ya tenga más información nos va a

renderizar el título del autor y el

contenido en esto vamos a probarlo para

ello aquí desde up vamos a poner

en vista web

y le vamos a pasar por poema el poema

que estamos guardando no es prestado de

la aplicación yo me vengo aquí y aquí lo

pueden ver

este es el título el autor el contenido

y la foto si yo actualizo vean que me

salen los puntos suspensivos carga el

título carga el autor carga contenía

actualizo nuevamente puntos suspensivos

y aquí está lo cual significa que

funciona vale pero notarán que esta

vista web se muestra automáticamente

cuando ya actualizó la página la idea

era habíamos dicho que sólo se viera

cuando hice clic aquí para ello me va

regresar a la aplicación y esto esto lo

dejo aquí y vamos a crear otros dos

estados

bueno que se llame web

a ver web el cual va a ser un estado que

va a estar en falso inicialmente esto lo

duplicamos

vista de web vista pdf

sed ver pdf y la idea es que cuando

queramos ver el componente web cambiemos

ver web a tour con que con este botón de

ver web vale entonces aquí en ver web

haremos lo siguiente vamos a meterle un

clic el cual va a correr una reflexión

que hará lo siguiente

cuando hagamos clic efectivamente vamos

a poner este set ver web

lo opuesto que haya tenido

y set del pdf en falso y aquí vamos a

también cambiar en contenido vamos a

ponerle si

cyber web es verdadero pone ocultar

en caso contrario por mi ver web

o que ya está y ahora la idea es que

esto solo se muestre cuando ver web sea

sea este verdadero para y vamos a poner

ver web es verdadero sí sí con este

componente caso contrario no me pongas

nada regresamos a la aplicación y no hay

nada si hago clic aquí

me muestra en la vista web clic acá me

lo oculta muy bien si yo actualizo se

reinicia y me muestra otro poema debería

ocultar perfecto muy bien está

funcionando ahora la idea es que cuando

yo haga clic en ver pdf me muestre lo

mismo el mismo poema que tengo kimber

web pero me lo muestra una vista pdf y

para ello vamos a realizarnos a nuestra

aplicación esto en el grupo cerrar y

vamos a crear un componente vamos a

poner aquí si ver pdf existe me va a

poner la vista de pdf esta es la idea

entonces vamos a configurar nuestro

botón de una vez este botón de ver pdf

en un clic

vamos a correr una función que haga lo

siguiente

[Música]

esto lo ponemos así ya está entonces

aquí me lo me lo va a ocultar espérame

tantito

aquí vamos a ponerle una continuación

dinámica ver pdf existe si si vamos a

poder ocultar caso contrario ver

muy bien entonces aquí solo están

jugando con estados esto me lo muestra

me lo oculta me lo muestra me lo oculta

yo tengo este y aprieto este menos

cambia muy bien de momento cuando yo lo

di ver pdf solo me muestra este texto

que dice pdf unidades que nos muestre la

vista pdf pero esto lo tengo como de

manera temporal registra lo ideal o lo

tenemos que hacer es que aquí tengamos

nuestro componente de vista peligro ok

entonces vamos a crear este componente

aquí en source vamos a crear un archivo

que se llame docu pdf punto a js y ojo

la idea es que en dos de efe haya

exactamente lo mismo en vista web ok

esa es la idea entonces lo que vamos a

hacer es tomar todo el contenido de

vista web y ponerlo en pdf porque la

idea es que haya exactamente lo mismo

pero antes de hacer eso quiero que

pongan un joven que el momento esta

vista web está terribles está bellísima

no tienen nada de estilos y antes de

meterle estilos lo que tienen que saber

es que para poder reciclar esta vista

nuevo con el docu pdf lo que hay que

hacer es usar estilos in line ok el

enfoque aquí no son los estilos entonces

quería es copiar eliminar

y pegar este el componente ya conoce

estilos fíjense que es lo mismo pero

tenemos aquí los estilos y 9 dentro de

cada éste está dentro del dif tenemos

estilo inline el lazio no estilo online

la imagen es tiene un line también si yo

me regreso aquí está la aplicación y el

eibar web ya se ve más decente ok

entonces a nuestro componente web

nuestra vista o el últimos los estilos

online o no puedo terminar este mes en

ello y ahora sí todo lo que está en

vista web copiamos venimos a doku pdf y

pegamos porque deberá tener lo mismo

ahora cómo funciona este documento pdf

lo que tienen que hacer es imaginar este

docu pdf como el archivo pdf ok entonces

para ello antes de comenzar vamos a

importar nuestra librería de react pdf

bueno era pdf esta web pdf

este aquí y desde aquí vamos a ir

importando los distintos elementos como

les dije este docu pdf es un archivo un

documento pdf entonces lo que haremos es

envolver todo esto que estamos

regresando lo vamos a envolver en una

etiqueta llamada document

que viene desde aquí ok entonces esto de

aquí y esto de aquí lo vamos a envolver

y ya está pero recuerden que un

documento pdf tiene distintas páginas

entonces lo que haremos es indicarle que

de momento vamos a tener una página

la cual va a envolver esto que estamos

renderizando del pueblo entonces tomamos

este esta página

y lo vamos a envolver aquí hasta tenemos

nuestro documento con una página y su

contenido si el contenido que está el

interior de la página es muy extenso y

se sale de la página lo que esta

librería va a ser es que automáticamente

va a insertar más páginas entonces no

tienen que preocuparse pero aún así si

lo que quieren hacer es tener control

exacto de las páginas y su contenido

aquí lo que debieran hacer es ir

agregando páginas con el contenido de

cada uno pero nosotros no lo haremos así

dejaremos que él se encarga

automáticamente si acaso lo que sí hay

que hacer es indicar qué tamaño debía

tener la página a través de este

próximas 6

a menos que aquí me faltó importar lo

vamos a ponerle importando desde aquí y

ahora sí vamos a pasar le indicarle qué

tamaño queremos desde estáis aquí nos

dice estos tamaños de ahora si son de

méxico este debían saber que el tamaño

carta es muy similar a la 4 en desconoce

cómo se anotan en otros países pero la 4

deberá hacer el el estándar el

tradicional muy bien entonces ya tenemos

nuestro documento con la página que

dejaremos automática en cuanto extensión

ya tenemos el contenido de la página

pero ojo ojo mucho ojo que reactive ya

toda esta librería no trabajan con

etiquetas html lo que break pdf hace es

trabajar con los famosos este elementos

primitivos creo que así se llaman que

son los elementos primitivos que es una

muy buena pregunta la verdad y no sé qué

contestarte son si han trabajado con

ryanair y son los famosos view text

image y demás sino un trabajo con rainer

y no se preocupen es muy sencillo les

muestro que hay que hacer el día vamos a

cambiarlo por un view

todos los textos vamos a cambiarlos por

texto el h1 los párrafos la img y nachi

de html vamos a cambiar por un image de

éste

de react de break pedí entonces que

importamos image y por último

continuamos este p también lo cambiamos

por un texto este br no existe entonces

vamos a quitarlo y éste lo cambiamos por

otro texto es así de fácil ditsch por

views y todo texto lo comemos por text

las imágenes por image y ahora sí

tenemos documento página y contenido con

etiquetas primitivas que estamos

importando desde la librería ahorita se

me olvida esto vamos a cambiarlo por

doku pdf y aquí al final vamos a

exportar

docu

muy bien ya tenemos nuestro documento

pdf chulada estudio no podemos cerrar

esto ya lo podemos cerrar y de vuelta

aquí en la aplicación aquí viene lo

bueno

lo que haremos es importar nuestro

documento pdf y renderizar lo desde

doku pdf

y hasta pero recuerden que ocupe de efe

recibe como argumento el poema o la

información dinámica que estamos

mostrando dentro del vamos a poner que

reciba poema pero ojo muy importante

este docu pdf recuerden que es el

documento el archivo más o menos

entonces si queremos verlo en el

navegador a doku pdf hay que envolverlo

en la vista pdf y esta vista pdf va a

tomar el documento y lo va mostrar

entonces desde aquí desde nuestras

importaciones son imports vamos a

importar pide a bioware desde ahora pide

aprender y aquí lo que haremos es

envolverlo pidiã web

esto lo pasamos en medio

y ya está muy bien pero este aquí hay un

problema y les diré cuál es yo me

regreso a la aplicación cierto ya quién

ver web aquí esta visión los columbus

books 6 ya está diciendo y en ver pdf

fíjense que tarda en salir este visor

número uno tarda en salir y número dos

está muy chiquito ok entonces cómo lo

resolvemos

primero porque tarda en salir tarda en

salir porque poema todavía no tiene

valor o que entonces esto lo podemos

resolver

diciendo que esto va a ir dentro de un

fragmento ok

y este fragmento solo lo vamos a mostrar

cuando poema ya haya sido recibido si

puede más ya fue recibido me muestra

este fragmento caso contrario no me

muestra nada aunque el problema número

uno resuelto esto para para que éste no

llegamos no digamos de algún programa

donde find y el segundo problema viene

con el tamaño step y 10 bioware

estadista de pdf puede entenderla como

un iframe entonces que vamos a modificar

su tamaño con un imán y vamos a decir

que el with queremos 100 por ciento

siendo el ancho y en height altura

queremos un 90 height y este 10 vamos a

ponerle el disc principal de la

aplicación haremos lo mismo diciendo que

la altura mínima sea de 100 por ciento

bueno siente viajar muy bien regresemos

y aquí está aquí está la vista pdf se

puede ocultar la vista web de root

muy bien aquí está la vista pdf fíjense

que aquí esto esto no me lo tiene bien

pero esto se debe a los estilos si acaso

lo podemos modificar ya no nos ha

quedado pdf la parte del contenido esté

aquí en text content aquí tiene un

máximo de 50 vamos a ponerle vamos vamos

a poner lo mejor un tracking de

20

si yo uso la página ver pdf

aunque aquí ya está mejor muy bien aquí

notarán que es un pdf que está está

feliz y ok desde está feo las cosas como

son y esto se debe a que pues estos son

estilos genéricos son estilos que me

pide rápido lo que ustedes tienen que

hacer es comenzar los españoles currar

se la tienen que meterle buenos estilos

pensar todo el diseño y todo el momento

lo que importa es que ya tenemos la

vista web ya tenemos la vista pdf y lo

que nos hace falta es poder descargar el

archivo para ello hoy vamos a regresar a

la aplicación y aquí vamos a vamos a

aquí a descargar pdf

la idea es cuando la gente haga clic

aquí descargue el pdf y para ello vamos

a importar además de la vista pdf del

pbi de bioware vamos a importar pdf

download link aunque la descarga para el

pdf éste lo que haremos es tomar acá el

botón de descargar pdf y vamos a

envolverlo con download link

luego envolvemos y este de download me

recibe dos propios dos propiedades la

primera es indicarle qué documento

queremos descargar para ello me vengo

aquí el document es igual a y le vamos a

pasar el documento nuestro documento

recuerden es docu pdf entonces lo propio

y lo pongo aquí el segundo programa

propiedades indicarle con quien nombre

queremos que se descarguen vamos a

llamarlo poema punto pdf y hasta

entonces con esto me regreso a mi

aplicación vamos a actualizarla tenemos

la vista web fanhouse oms tenemos el pdf

de fabián songs y tenemos descargar pdf

que me lo guardé fíjense como poema le

doy guardar me vengo a vámonos al

escritorio y aquí está poema pdf lleva

doble clic en el aquí está el publica en

archivo bonito y precioso es muchísimo y

bueno con ello ya estaríamos teniendo

hoy todas las funcionalidades de nuestra

aplicación la vista web la vista pdf y

descargar pdf con shaquille o lo

importante es mover o dejar muy claros

los estilos para que no tengan algo tan

horrible como éste bueno eso ha sido

todo chicos si les gustó el vídeo dejen

me gusta y como siempre comenten qué

tutoriales más quieren ver en este canal

nos vemos

[Música]

Acerca del autor

¡Hola! Me llamo Adrián, pero todos me conocen como Lasfito. Soy desarrollador front-end y escribo artículos y tutoriales sobre JavaScript, desarrollo web y diseño.

¿Dudas o comentarios?

Únete al Discord oficial

¿Alguna errata?

Si encuentras alguna errata en este artículo, por favor, no dudes en levantar un pull request en el repositorio de GitHub.