Cómo crear documentos PDF con sus componentes React usando React-pdf

React es una biblioteca de JavaScript popular para crear interfaces de usuario. Es posible crear archivos PDF a partir de componentes React utilizando la biblioteca react-pdf.

Aquí aprenderá cómo crear documentos PDF con componentes React usando react-pdf.

¿Qué es React-pdf?

React-pdf es una biblioteca que te permite crear documentos PDF de los componentes de React. Proporciona un conjunto de componentes que puede usar para crear su documento PDF y usa un DOM virtual para representar los componentes en PDF.

Instalación de React-pdf

Para instalar react-pdf utilizando el administrador de paquetes de nodos, ejecute el siguiente comando de terminal en el directorio de su proyecto:

npm install @react-pdf/renderer --save

Para instalarlo con el administrador de paquetes de hilo, ejecute este comando:

añadir hilo @react-pdf/renderer

Creación de un documento PDF

Para crear un documento PDF, utilizará los componentes Documento, Página y Texto de react-pdf. El

Documento El componente es responsable de crear un nuevo documento PDF y representar su contenido. El Página El componente crea una nueva página dentro del documento PDF y representa su contenido. Finalmente, el Texto El componente representa los textos dentro del documento PDF.

Aquí hay un ejemplo de cómo puede crear un documento PDF utilizando estos tres componentes:

importar Reaccionar de'reaccionar';
importar { Documento, Texto, Página } de'@react-pdf/renderizador';
constante MiDocumento = () => (


hola/Text>
 </Page>
 </Document>
);
exportarpor defecto Mi documento;

En este ejemplo, crea un documento PDF con una sola página que contiene una sola línea de texto, "Hola". Después de crear un documento PDF, debe representarlo en su aplicación React.

Para representar el documento PDF en su aplicación, use el Visor de PDF componente, que genera el documento PDF.

Importar el Visor de PDF componente y envuelva su documento en él:

importar Reaccionar de"reaccionar"
importar { Visor de PDF } de'@react-pdf/renderizador';
importar Mi documento de"./Mi documento";
funciónaplicación() {
devolver (


 </PDFViewer>
 )
}
exportarpor defecto aplicación

Al renderizar su aplicación, se verá así:

Agregar estilos al documento PDF

Para agregar estilos a su documento PDF, puede usar react-pdf Hoja de estilo componente. El Hoja de estilo El componente le permite definir estilos personalizados para su documento PDF.

Usar el hoja de estilo componente, impórtelo desde la biblioteca de react-pdf y defina sus estilos para el documento PDF.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar { Documento, Texto, Página, Hoja de estilo } de'@react-pdf/renderizador';
constante estilos = StyleSheet.create({
 página: {
 texto alineado: 'centro',
 margen superior: 30,
 tamaño de fuente: 30,
 },
 texto: {
 color: '#228b22',
 }
});
constante MiDocumento = () => (


hola/Text>
 </Page>
 </Document>
);
exportarpor defecto Mi documento;

En el bloque de código anterior, está agregando estilos a su componente PDF. Usted define los estilos usando el Stylesheet.create función. El Stylesheet.create crea un objeto de hoja de estilo que contiene el página y texto estilos.

Utilizando el estilo prop, pasas el página y texto estilos a tu medida Página y Texto componentes Esto asegura que sus estilos se apliquen a la Página y Texto componentes

Adición de diseños al documento PDF

Para agregar diseños a su documento PDF, utilice el Vista componente. El Vista componente es un componente contenedor proporcionado por la biblioteca react-pdf.

El Vista componente actúa como un HTML división—un elemento HTML fundamental. Con él, envuelves otros componentes, como el Texto y defina sus diseños agregando estilos al Vista componente.

Al igual que:

importar Reaccionar de'reaccionar';
importar { Documento, Texto, Página, Hoja de estilo, Vista } de'@react-pdf/renderizador';
constante estilos = StyleSheet.create({
 página: {
 margen superior: 30,
 tamaño de fuente: 30,
 relleno: 20,
 },
 disposición: {
 margen superior: 30,
 dirección flexible: 'fila',
 justificar el contenido: 'espacio entre'
 }
});
constante MiDocumento = () => (




hola/Text>
 </View>

¡¡¡Bienvenido!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exportarpor defecto Mi documento;

En este ejemplo, se utiliza el Vista componentes para agrupar otros componentes.

Adición de imágenes al documento PDF

También puede renderizar imágenes en el documento PDF con el Imagen componente proporcionado por la biblioteca react-pdf. El Imagen El componente le permite mostrar imágenes en varios formatos, como JPEG, PNG, SVG y muchos más.

El Imagen componente toma un origen prop que especifica la URL de la imagen y un estilo prop para agregar estilos personalizados a sus imágenes.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar { Documento, página, hoja de estilo, vista, imagen } de'@react-pdf/renderizador';
constante estilos = StyleSheet.create({
 página: {
 relleno: 20,
 alinear elementos: 'centro',
 },
 imagen: {
 ancho: 300,
 altura: 200,
 }
});
constante MiDocumento = () => (



 origen=' https://example.com/image.png'
 estilo={estilos.imagen} />
 </View>
 </Page>
 </Document>
);
exportarpor defecto Mi documento;

En este ejemplo, está creando un documento PDF con una sola página que contiene una imagen. El Imagen El componente muestra una imagen con un estilo de ancho de 300 píxeles y un estilo de alto de 200 píxeles.

Probablemente querrá incluir enlaces en su documento PDF. Los enlaces dirigen al usuario a una URL designada, que puede ofrecer información adicional que no está disponible en el documento PDF. El Enlace El componente de la biblioteca react-pdf le permite crear enlaces dentro de sus documentos PDF.

El componente Enlace toma una origen prop para redirigir a los usuarios cuando hacen clic en el enlace. Serán redirigidos a la URL especificada en el componente origen prop si defines uno.

Usar el Enlace componente, primero debe importarlo desde la biblioteca react-pdf. Luego puede agregarlo a su documento PDF de esta manera:

importar Reaccionar de'reaccionar';
importar { Documento, página, hoja de estilo, vista, enlace } de'@react-pdf/renderizador';
constante estilos = StyleSheet.create({
 página: {
 relleno: 20,
 alinear elementos: 'centro',
 },
 enlace: {
 color: '#333333',
 decoración de texto: 'ninguno'
 }
});
constante MiDocumento = () => (



' https://example.com' style={styles.link}>Haz clic en mí</Link>
 </View>
 </Page>
 </Document>
);
exportarpor defecto Mi documento;

El ejemplo anterior crea un documento PDF con una página y una vista. Dentro de la vista, está mostrando un componente de enlace que, cuando se hace clic, redirige al usuario a la URL especificada, " https://example.com.”

Ahora puedes crear documentos PDF usando React

React-pdf es una poderosa biblioteca que le permite generar documentos PDF a partir de sus componentes React. Puede crear archivos PDF usando react-pdf, luego agregarles texto, imágenes y enlaces.

Al usar esta biblioteca, puede generar fácilmente archivos PDF de aspecto profesional con estilo y diseño personalizados.