Documentos PDF

Los documentos PDF se realizan con la ayuda de la librería react-pdf. Tienen una sintaxis definida.

Estructura

1. Importaciones Aquí se importan los componentes necesarios para el funcionamiento del documento (el ejemplo importa los más importantes, pero pueden usarse otros según se requiera).

   import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";
   import { FC } from "react";

2. La función que contendrá al documento:

   const Ejemplo: FC = () => {}

3. Los componentes se pueden estilar a traves de la propiedad style, sin embargo, puede resultar poco conviniente repetirlos, para eso existe la hoja de estilos creada para el documento:

   const styles = StyleSheet.create({
       page: {
           fontSize: "8pt",
           backgroundColor: "#fff",
           padding: "50px",
           width: "100%",
           position: "relative",
       },
   });

4. Finalmente la función debe retornar el documento, dentro del componente Page se escribirá todo el contenido del documento (texto o imagenes).

   return (
       <Document title="Documento de ejemplo">
           <Page size="LETTER" style={styles.page}>
               <Text>Soy un pdf de ejemplo.</Text>
           </Page>
       </Document>
   );

Resumen

ejemplo.tsx

import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";
import { FC } from "react";

const Ejemplo: FC = () => {
  const styles = StyleSheet.create({
    page: {
      fontSize: "8pt",
      backgroundColor: "#fff",
      padding: "50px",
      width: "100%",
      position: "relative",
    },
  });

  return (
    <Document title="Documento de ejemplo">
      <Page size="LETTER" style={styles.page}>
       <Text>Soy un pdf de ejemplo.</Text>
      </Page>
    </Document>
  );
};

export default Ejemplo;