Aprenda a Criar e Baixar Arquivos PDF em React com react-pdf

Introdução ao react-pdf

A geração de arquivos PDF é uma função muito útil em diversas aplicações, seja para emitir recibos, gerar relatórios ou qualquer outra necessidade que exija um documento em formato PDF. Neste tutorial, vamos explorar a biblioteca react-pdf, que torna esse processo bastante simples e eficiente.

Instalando a Biblioteca

Para começar a usar o react-pdf em sua aplicação, primeiro você precisa instalá-lo. Execute o seguinte comando no terminal:

npm install @react-pdf/renderer

Esse comando instala a biblioteca necessária para gerar PDFs. Uma vez instalada, vamos começar a criar nosso documento PDF.

Criando um Documento PDF

Para criar um documento PDF, você precisa importar os componentes do react-pdf. Aqui está um exemplo básico:

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

const MyDocument = () => (
  <Document>
    <Page size="A4">
      <Text>Hello, this is a PDF document!</Text>
    </Page>
  </Document>
);

const App = () => (
  <PDFDownloadLink document={<MyDocument />} fileName="myDocument.pdf">
    {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download PDF')}
  </PDFDownloadLink>
);

export default App;

Neste código, estamos criando um documento simples com uma única página que contém o texto "Hello, this is a PDF document!". A função PDFDownloadLink fornece um link para download do PDF gerado.

Explicação do Código

O componente MyDocument define o conteúdo do PDF. O componente PDFDownloadLink é responsável por criar um link que, ao ser clicado, baixa o PDF gerado. O link exibe "Loading document..." enquanto o PDF está sendo gerado e muda para "Download PDF" assim que estiver pronto.

Estilizando o Documento

Você pode estilizar o seu documento PDF usando estilos CSS. O react-pdf permite que você utilize as propriedades de estilo em seus componentes. Aqui está um exemplo:

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

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
Padding: 10,
    flexGrow: 1,
  },
});

const MyDocument = () => (
  <Document>
    <Page style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

Aqui, definimos estilos para a página e seções do documento, permitindo que você customize a aparência do PDF gerado conforme suas necessidades.

Adicionando Imagens

Incluir imagens no seu PDF também é uma tarefa simples. Veja como fazer:

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

const MyDocument = () => (
  <Document>
    <Page size="A4">
      <Image src="https://example.com/image.png" style={{ width: '100%', height: 'auto' }} />
      <Text>Veja a imagem acima!</Text>
    </Page>
  </Document>
);

No exemplo acima, utilizamos o componente Image para incluir uma imagem no PDF. Basta fornecer a URL da imagem que você deseja incluir.

Conclusão

Neste tutorial, aprendemos como gerar e baixar arquivos PDF usando a biblioteca react-pdf no React. Você viu como instalar a biblioteca, criar documentos simples, estilizar o conteúdo e até mesmo adicionar imagens. Com esses conhecimentos, você pode começar a implementar a geração de PDFs em suas próprias aplicações.

Próximos Passos

Agora que você tem uma base sólida, explore mais recursos do react-pdf, como tabelas, listas e muito mais. A documentação oficial da biblioteca é um excelente recurso para se aprofundar ainda mais. Boa sorte em sua jornada de desenvolvimento!

Entenda a Importância da Geração de PDFs em Aplicações Web

A criação de documentos PDF é uma habilidade valiosa para desenvolvedores que trabalham com aplicações web. Com a biblioteca react-pdf, é possível gerar PDFs de forma dinâmica, permitindo que os usuários baixem documentos personalizados com informações específicas. Isso é especialmente útil em aplicativos de e-commerce, onde recibos e faturas precisam ser gerados após uma compra. Neste contexto, o react-pdf se destaca pela sua simplicidade e eficácia, tornando o processo de geração de PDF acessível, mesmo para quem está começando no desenvolvimento web.

Algumas aplicações:

• Geração de recibos e faturas
• Relatórios dinâmicos para usuários
• Documentos de marketing e promoções
• Formulários preenchíveis

Dicas para quem está começando

• Familiarize-se com a documentação do react-pdf.
• Pratique criando diferentes tipos de documentos.
• Explore componentes e estilos disponíveis.
• Teste as funcionalidades em diferentes navegadores.
• Considere a usabilidade ao projetar seus PDFs.

Compartilhe este tutorial