React PDF - Crea PDFs con React desde el navegador

https://react-pdf.org/

Creacion del proyecto

npm install @react-pdf/renderer --save

en components/PDF.jsx

import { Document, Text, Page, StyleSheet, Image } from "@react-pdf/renderer";
import nextLogo from '../nextlogo.png';

const styles = StyleSheet.create({});

function PDF() {
  return (
    <Document>
      <Page>
        <Text>Hello world</Text>
        <Image src={nextLogo} />
        <Text>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempore modi voluptate molestias aperiam laboriosam consequatur ullam aspernatur blanditiis earum, id eius dignissimos a neque, autem doloribus accusantium recusandae repudiandae consectetur. Sapiente eum neque perspiciatis laborum, at et rerum ipsum necessitatibus ex, odio explicabo atque nostrum, velit voluptatum similique labore minima. Incidunt, quibusdam dicta quisquam quidem dolorum nemo possimus sed error inventore nam, quis ut officia quo sapiente dolorem molestiae corporis, velit optio. Similique ducimus doloribus quam, corrupti adipisci, perspiciatis accusamus voluptates laudantium magni cupiditate optio! Sunt ad, in ut similique est, vitae enim minima deleniti voluptatem repellat architecto dolor.
        </Text>
      </Page>
    </Document>
  );
}

export default PDF;

en App.jsx:

import { PDFDownloadLink } from "@react-pdf/renderer";
import PDF from "./components/PDF";

function App() {
  return (
    <div>
      <PDFDownloadLink document={<PDF />} fileName="somename.pdf">
        {({ blob, url, loading, error }) =>
          loading ? (
            <button>Loading document...</button>
          ) : (
            <button>Download now!</button>
          )
        }
      </PDFDownloadLink>
    </div>
  );
}

export default App;

Añadiendo Estilos

import {
  Document,
  Text,
  Page,
  StyleSheet,
  Image,
  View,
} from "@react-pdf/renderer";
import nextLogo from "../nextlogo.png";

const styles = StyleSheet.create({
  page: {
    backgroundColor: "#E4E4E4",
  },
  section: {
    flexDirection: "row",
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
  pageNumber: {
    position: "absolute",
    fontSize: 12,
    bottom: 30,
    left: 0,
    right: 0,
    textAlign: "center",
    color: "grey",
  },
});

function PDF() {
  return (
    <Document>
      <Page style={styles.page}>
        <Text>Hello world</Text>
        <View style={styles.section}>
          <Image src={nextLogo} />
          <Text>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi
            tempore modi voluptate molestias aperiam laboriosam consequatur
            ullam aspernatur blanditiis earum, id eius dignissimos a neque,
            autem doloribus accusantium recusandae repudiandae consectetur.
            Sapiente eum neque perspiciatis laborum, at et rerum ipsum
            necessitatibus ex, odio explicabo atque nostrum, velit voluptatum
            similique labore minima. Incidunt, quibusdam dicta quisquam quidem
            dolorum nemo possimus sed error inventore nam, quis ut officia quo
            sapiente dolorem molestiae corporis, velit optio. Similique ducimus
            doloribus quam, corrupti adipisci, perspiciatis accusamus voluptates
            laudantium magni cupiditate optio! Sunt ad, in ut similique est,
            vitae enim minima deleniti voluptatem repellat architecto dolor.
          </Text>
        </View>

        <View style={styles.pageNumber}>
          <Text
            render={({ pageNumber, totalPages }) =>
              `${pageNumber} / ${totalPages}`
            }
            //   fixed
          />
        </View>
      </Page>
    </Document>
  );
}

export default PDF;