Como criar documentos PDF com seus componentes React usando o React-pdf

React é uma biblioteca JavaScript popular para construir interfaces de usuário. É possível criar arquivos PDF a partir de componentes React usando a biblioteca react-pdf.

Aqui você aprenderá como criar documentos PDF com componentes React usando react-pdf.

O que é React-pdf?

React-pdf é uma biblioteca que permite criar documentos PDF de componentes React. Ele fornece um conjunto de componentes que você pode usar para criar seu documento PDF e usa um DOM virtual para renderizar os componentes em PDF.

Instalando o React-pdf

Para instalar o react-pdf usando o gerenciador de pacotes do nó, execute o seguinte comando de terminal no diretório do seu projeto:

npm install @react-pdf/renderer --save

Para instalá-lo com o gerenciador de pacotes yarn, execute este comando:

fio adicionar @react-pdf/renderer

Criando um documento PDF

Para criar um documento PDF, você usará os componentes Documento, Página e Texto do react-pdf. O

Documento O componente é responsável por criar um novo documento PDF e renderizar seu conteúdo. O Página O componente cria uma nova página no documento PDF e renderiza seu conteúdo. finalmente, o Texto O componente renderiza textos dentro do documento PDF.

Aqui está um exemplo de como você pode criar um documento PDF usando todos esses três componentes:

importar Reagir de'reagir';
importar { Documento, Texto, Página } de'@react-pdf/renderer';
const MeuDocumento = () => (


Olá </Text>
 </Page>
 </Document>
);
exportarpadrão Meu documento;

Neste exemplo, você cria um documento PDF com uma única página contendo uma única linha de texto, “Olá”. Depois de criar um documento PDF, você deve renderizá-lo em seu aplicativo React.

Para renderizar o documento PDF em seu aplicativo, use o visualizador de PDF componente, que gera o documento PDF.

Importar o visualizador de PDF componente e envolva seu documento nele:

importar Reagir de"reagir"
importar { Visualizador de PDF } de'@react-pdf/renderer';
importar Meu documento de"./Meu documento";
funçãoAplicativo() {
retornar (


 </PDFViewer>
 )
}
exportarpadrão Aplicativo

Ao renderizar seu aplicativo, ele ficará mais ou menos assim:

Adicionando estilos ao documento PDF

Para adicionar estilos ao seu documento PDF, você pode usar react-pdf's Folha de estilo componente. O Folha de estilo O componente permite que você defina estilos personalizados para seu documento PDF.

Para usar o folha de estilo componente, importe-o da biblioteca react-pdf e defina seus estilos para o documento PDF.

Por exemplo:

importar Reagir de'reagir';
importar { Documento, Texto, Página, Folha de Estilo } de'@react-pdf/renderer';
const estilos = StyleSheet.create({
 página: {
 alinhamento de texto: 'Centro',
 margemTopo: 30,
 tamanho da fonte: 30,
 },
 texto: {
 cor: '#228b22',
 }
});
const MeuDocumento = () => (


Olá </Text>
 </Page>
 </Document>
);
exportarpadrão Meu documento;

No bloco de código acima, você está adicionando estilos ao seu componente PDF. Você define os estilos usando o Folha de estilo.criar função. O Folha de estilo.criar A função cria um objeto de folha de estilo contendo o página e texto estilos.

Usando o estilo suporte, você passa o página e texto estilos para o seu Página e Texto componentes. Isso garante que seus estilos se apliquem ao Página e Texto componentes.

Adicionando layouts ao documento PDF

Para adicionar layouts ao seu documento PDF, use o Visualizar componente. O Visualizar component é um componente de contêiner fornecido pela biblioteca react-pdf.

O Visualizar componente age como um HTML div—um elemento HTML fundamental. Com ele, você envolve outros componentes, como o Texto componente e defina seus layouts adicionando estilos ao Visualizar componente.

Igual a:

importar Reagir de'reagir';
importar { Documento, Texto, Página, Folha de Estilo, Visualização } de'@react-pdf/renderer';
const estilos = StyleSheet.create({
 página: {
 margemTopo: 30,
 tamanho da fonte: 30,
 preenchimento: 20,
 },
 disposição: {
 margemTopo: 30,
 flexDirection: 'linha',
 justificarConteúdo: 'espaço entre'
 }
});
const MeuDocumento = () => (




Olá </Text>
 </View>

Bem vindo!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exportarpadrão Meu documento;

Neste exemplo, você usa o Visualizar componentes para agrupar outros componentes.

Adicionando imagens ao documento PDF

Você também pode renderizar imagens no documento PDF com o Imagem componente fornecido pela biblioteca react-pdf. O Imagem componente permite exibir imagens em vários formatos, como JPEG, PNG, SVG e muitos mais.

O Imagem componente leva um origem prop que especifica o URL da imagem e um estilo prop para adicionar estilos personalizados às suas imagens.

Por exemplo:

importar Reagir de'reagir';
importar { Documento, Página, Folha de Estilo, Visualização, Imagem } de'@react-pdf/renderer';
const estilos = StyleSheet.create({
 página: {
 preenchimento: 20,
 itens de alinhamento: 'Centro',
 },
 imagem: {
 largura: 300,
 altura: 200,
 }
});
const MeuDocumento = () => (



 origem=' https://example.com/image.png'
 estilo={estilos.imagem} />
 </View>
 </Page>
 </Document>
);
exportarpadrão Meu documento;

Neste exemplo, você está criando um documento PDF com uma única página que contém uma imagem. O Imagem O componente exibe uma imagem com um estilo de largura de 300 pixels e um estilo de altura de 200 pixels.

Você provavelmente desejará incluir links em seu documento PDF. Os links direcionam o usuário a um URL designado, que pode oferecer informações suplementares indisponíveis no documento PDF. O Link O componente da biblioteca react-pdf permite que você crie links em seus documentos PDF.

O componente Link leva um origem prop para redirecionar os usuários quando eles clicarem no link. Eles serão redirecionados para a URL especificada no componente origem prop se você definir um.

Para usar o Link componente, primeiro você precisa importá-lo da biblioteca react-pdf. Você pode então adicioná-lo ao seu documento PDF assim:

importar Reagir de'reagir';
importar { Documento, Página, Folha de Estilo, Visualização, Link } de'@react-pdf/renderer';
const estilos = StyleSheet.create({
 página: {
 preenchimento: 20,
 itens de alinhamento: 'Centro',
 },
 link: {
 cor: '#333333',
 textoDecoração: 'nenhum'
 }
});
const MeuDocumento = () => (



' https://example.com' style={styles.link}>Clique em mim</Link>
 </View>
 </Page>
 </Document>
);
exportarpadrão Meu documento;

O exemplo acima cria um documento PDF com uma página e uma exibição. Dentro da visualização, você está exibindo um componente Link que, quando clicado, redireciona o usuário para o URL especificado, “ https://example.com.”

Agora você pode criar documentos PDF usando o React

React-pdf é uma biblioteca poderosa que permite gerar documentos PDF a partir de seus componentes React. Você pode criar arquivos PDF usando o react-pdf e adicionar texto, imagens e links a eles.

Ao usar esta biblioteca, você pode gerar facilmente arquivos PDF de aparência profissional com estilo e layout personalizados.