Criando PDFs com React-PDF

Há um tempo atrás, uma task caiu no meu colo: criar um relatório dinâmico em PDF. Nunca havia feito algo do tipo antes e, na verdade, naquele momento, eu sequer sabia que era possível realizar essa tarefa com programação. Foi um desafio e tanto! Pesquisei bastante, li diversas documentações, mas consegui concluir minha task com êxito. Agora, trago este guia prático para você, para que também possa criar seus próprios PDFs dinâmicos de forma eficiente e com sucesso.

Passo 1: Configuração do Projeto:

Antes de começar, certifique-se de ter um projeto React configurado. Se você ainda não tem um projeto React, pode criar um novo utilizando o Vite.

npm create vite@latest meu-projeto

Em seguida, instale a biblioteca React-PDF (já tem suporte para TS):
npm install @react-pdf/renderer

Passo 2: Estrutura do PDF:

O React-PDF utiliza a mesma sintaxe do React para criar elementos PDF, porém ele conta com elementos da própria biblioteca para a montagem do arquivo:

import React from 'react';
import { Document, Page, Text } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page size={'A4'}>
      <Text>Olá, Mundo!</Text>
    </Page>
  </Document>
);

export default MyDocument;

Passo 3: Estilo e Personalização:

Assim como no React, você pode estilizar seus elementos PDF com CSS. O React-PDF traz também o seu próprio StyleSheet, que facilita a organização e aplicação de estilos aos elementos do PDF.

import { StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
      backgroundColor: '#fff',
      padding: 20,
      fontSize: 12,
    },
    header: {
      padding: 10,
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      gap: 20,
      marginBottom: 20
    },
    image: {
      width: 50,
      height: 50
    }
});

Passo 4: Renderização do PDF:

Agora que você tem a estrutura do PDF, é hora de renderizá-lo. Você pode fazer isso criando um modal e utilizar o PDFViewer fornecido pelo React-PDF, neste exemplo usei o Material-ui para me ajudar com o modal:

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import { PdfTemplate } from '../PdfTemplate';
import { PDFViewer } from '@react-pdf/renderer';
import { useMarketList } from '../../hooks/useMarketList';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '80%',
  height: '90%',
  boxShadow: 24,

};

export function ModalPdf() {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => setOpen(true);

  const handleClose = () => setOpen(false);

  const { items } = useMarketList()

  return (
    <div>
      <Button onClick={handleOpen}>Gerar lista</Button>
      <Modal
        open={open}
        onClose={handleClose}
      >
        <Box sx={style}>
          <PDFViewer width={'100%'} height={'100%'} >
            <PdfTemplate items={items} />
          </PDFViewer>
        </Box>
      </Modal>
    </div>
  );
}

Conclusão:

Com esses passos simples, você poderá criar seus próprios PDFs dinâmicos diretamente do seu aplicativo React, assim como eu fiz após enfrentar esse desafio.

Caso tenha interesse, vou disponibilizar o link do projeto que fiz para embasar esse texto.
Repositório no GitHub
LinkedIn