Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF
  2. Blog do IronPDF
  3. Ferramentas de PDF para nós
  4. HTML para PDF React
FERRAMENTAS DE PDF

Como converter HTML para PDF em React (Tutorial para desenvolvedores)

Darrius Serrant
Darrius Serrant
Atualizado:

Converter HTML para PDF em React

Converter HTML para PDF em React tornou-se um recurso essencial para muitas aplicações web. Seja para criar um sistema de faturamento, um gerador de relatórios ou simplesmente para compartilhar informações em um formato universalmente aceito, a geração de PDFs é crucial. Neste artigo, exploraremos como criar e estilizar arquivos PDF em sua aplicação React, convertendo HTML em PDF usando bibliotecas populares.

Como converter HTML para PDF em React

  1. Criar e configurar um projeto React
  2. Baixe a biblioteca para converter HTML em PDF em React usando o npm.
  3. Importe os módulos necessários de React-pdf/renderer.
  4. Configure a página HTML com os módulos importados.
  5. Utilize o módulo **PDFDownloadLink** do React-pdf para converter o HTML em PDF.

Bibliotecas populares para geração de PDFs

Antes de mergulharmos no processo de conversão de HTML para PDF, vamos discutir algumas bibliotecas populares que você pode usar para geração de PDFs em seus aplicativos React:

  1. React-pdf: Uma biblioteca poderosa para criar documentos PDF em aplicações React. Ele oferece suporte a diversas opções de estilo e pode criar PDFs complexos com várias páginas com facilidade.
  2. jsPDF: Uma biblioteca JavaScript amplamente utilizada para gerar arquivos PDF dinamicamente. Oferece uma ampla gama de recursos, incluindo formatação de texto, incorporação de imagens e muito mais.
  3. html2canvas: Esta biblioteca permite capturar uma imagem de um elemento HTML e convertê-la em um objeto canvas, que pode então ser convertido em PDF usando outras bibliotecas como o jsPDF.

Pré-requisitos para converter HTML em PDF no React

Familiaridade com React e seu ecossistema

Antes de mergulhar na conversão de HTML para PDF, é crucial ter um sólido conhecimento de React. Isso inclui conhecimento de JSX, gerenciamento de estado, ciclos de vida de componentes e hooks.

Conhecimento de HTML, CSS e JavaScript.

Uma base sólida em HTML, CSS e JavaScript é essencial para trabalhar com a biblioteca React-pdf. Isso inclui conhecimento de elementos e atributos HTML, estilos e seletores CSS e fundamentos de JavaScript , como variáveis, funções e loops.

Primeiros passos com uma aplicação React

Antes de prosseguirmos com a conversão de HTML para PDF no React , vamos revisar rapidamente como criar um novo aplicativo React usando a popular ferramenta de linha de comando create-react-app. Isso servirá de base para o nosso exemplo de geração de PDF.

Passo 1: Instale o Node.js

Certifique-se de ter o Node.js instalado em sua máquina. Você pode baixar a versão mais recente do Node.js no site oficial do Node.js

Passo 2: Instale o create-react-app

create-react-app é uma ferramenta de linha de comando amplamente utilizada para gerar aplicações React. Instale-o globalmente usando o seguinte comando:

npm install -g create-react-app
npm install -g create-react-app
SHELL

Passo 3: Criar um novo aplicativo React

Agora que você instalou o create-react-app , pode criar uma nova aplicação React com o seguinte comando:

create-react-app my-pdf-app
create-react-app my-pdf-app
SHELL

Este comando irá gerar uma nova aplicação React em uma pasta chamada my-pdf-app . Acesse o diretório recém-criado:

cd my-pdf-app
cd my-pdf-app
SHELL

Passo 4: Inicie o servidor de desenvolvimento.

Para iniciar o servidor de desenvolvimento e ver sua nova aplicação React em ação, execute o seguinte comando:

npm start
npm start
SHELL

Etapa 5: Implementando a geração de PDFs

Agora que você configurou um aplicativo React, pode seguir os passos descritos nas seções anteriores deste artigo para implementar a conversão de HTML para PDF em React usando bibliotecas populares como React-pdf .

Apresentando a biblioteca React-pdf

React-pdf é uma biblioteca popular projetada especificamente para aplicações React, oferecendo integração perfeita com o ecossistema React. Algumas de suas principais características incluem suporte para CSS embutido e externo, geração de PDFs com várias páginas, estilização avançada e compatibilidade com renderização do lado do servidor (SSR).

Criando arquivos PDF com React-pdf

Nesta seção, vamos nos concentrar em usar o React-pdf para criar arquivos PDF em uma aplicação React. Para começar, você precisará instalar o pacote React-pdf :

npm install --save @react-pdf/renderer
npm install --save @react-pdf/renderer
SHELL

Após a instalação, você pode criar um novo componente React para definir a estrutura do seu documento PDF:

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

// Sample invoice data
const invoiceData = {
  sender: {
    name: "John Doe",
    address: "123 Main Street",
    city: "New York",
    state: "NY",
    zip: "10001",
  },
  recipient: {
    name: "Jane Smith",
    address: "456 Elm Street",
    city: "San Francisco",
    state: "CA",
    zip: "94107",
  },
  items: [
    { description: "Item 1", quantity: 2, unitPrice: 10 },
    { description: "Item 2", quantity: 3, unitPrice: 15 },
    { description: "Item 3", quantity: 1, unitPrice: 20 },
  ],
  invoiceNumber: "INV-123456",
  date: "April 26, 2023",
};

// Define styles for PDF document
const styles = StyleSheet.create({
  page: {
    backgroundColor: "#FFF",
    padding: 30,
  },
  header: {
    fontSize: 24,
    textAlign: "center",
    marginBottom: 30,
  },
  sender: {
    marginBottom: 20,
  },
  recipient: {
    marginBottom: 30,
  },
  addressLine: {
    fontSize: 12,
    marginBottom: 2,
  },
  itemsTable: {
    display: "table",
    width: "100%",
    borderStyle: "solid",
    borderWidth: 1,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  tableRow: {
    margin: "auto",
    flexDirection: "row",
  },
  tableColHeader: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
    backgroundColor: "#F0F0F0",
  },
  tableCol: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  tableCell: {
    fontSize: 12,
    textAlign: "center",
    padding: 5,
  },
  total: {
    marginTop: 20,
    textAlign: "right",
  },
  totalLabel: {
    fontSize: 14,
    fontWeight: "bold",
  },
  totalValue: {
    fontSize: 14,
  },
});

const InvoiceDocument = () => {
  // Calculate total amount
  const totalAmount = invoiceData.items.reduce(
    (total, item) => total + item.quantity * item.unitPrice,
    0
  );

  return (
    <Document>
      <Page style={styles.page}>
        <Text style={styles.header}>Invoice</Text>
        <View style={styles.sender}>
          <Text>{invoiceData.sender.name}</Text>
          <Text>{invoiceData.sender.address}</Text>
          <Text>
            {invoiceData.sender.city}, {invoiceData.sender.state} {invoiceData.sender.zip}
          </Text>
        </View>
        <View style={styles.recipient}>
          <Text>{invoiceData.recipient.name}</Text>
          <Text>{invoiceData.recipient.address}</Text>
          <Text>
            {invoiceData.recipient.city}, {invoiceData.recipient.state} {invoiceData.recipient.zip}
          </Text>
        </View>
        <View style={styles.itemsTable}>
          <View style={styles.tableRow}>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Description</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Quantity</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Unit Price</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Amount</Text>
          </View>
          {invoiceData.items.map((item, index) => (
            <View key={index} style={styles.tableRow}>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.description}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.quantity}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.unitPrice.toFixed(2)}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>
                {(item.quantity * item.unitPrice).toFixed(2)}
              </Text>
            </View>
          ))}
        </View>
        <View style={styles.total}>
          <Text style={styles.totalLabel}>Total: ${totalAmount.toFixed(2)}</Text>
        </View>
      </Page>
    </Document>
  );
};

export default InvoiceDocument;
import React from 'react';
import {
  Document,
  Page,
  Text,
  View,
  StyleSheet
} from '@react-pdf/renderer';

// Sample invoice data
const invoiceData = {
  sender: {
    name: "John Doe",
    address: "123 Main Street",
    city: "New York",
    state: "NY",
    zip: "10001",
  },
  recipient: {
    name: "Jane Smith",
    address: "456 Elm Street",
    city: "San Francisco",
    state: "CA",
    zip: "94107",
  },
  items: [
    { description: "Item 1", quantity: 2, unitPrice: 10 },
    { description: "Item 2", quantity: 3, unitPrice: 15 },
    { description: "Item 3", quantity: 1, unitPrice: 20 },
  ],
  invoiceNumber: "INV-123456",
  date: "April 26, 2023",
};

// Define styles for PDF document
const styles = StyleSheet.create({
  page: {
    backgroundColor: "#FFF",
    padding: 30,
  },
  header: {
    fontSize: 24,
    textAlign: "center",
    marginBottom: 30,
  },
  sender: {
    marginBottom: 20,
  },
  recipient: {
    marginBottom: 30,
  },
  addressLine: {
    fontSize: 12,
    marginBottom: 2,
  },
  itemsTable: {
    display: "table",
    width: "100%",
    borderStyle: "solid",
    borderWidth: 1,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  tableRow: {
    margin: "auto",
    flexDirection: "row",
  },
  tableColHeader: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
    backgroundColor: "#F0F0F0",
  },
  tableCol: {
    width: "25%",
    borderStyle: "solid",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  tableCell: {
    fontSize: 12,
    textAlign: "center",
    padding: 5,
  },
  total: {
    marginTop: 20,
    textAlign: "right",
  },
  totalLabel: {
    fontSize: 14,
    fontWeight: "bold",
  },
  totalValue: {
    fontSize: 14,
  },
});

const InvoiceDocument = () => {
  // Calculate total amount
  const totalAmount = invoiceData.items.reduce(
    (total, item) => total + item.quantity * item.unitPrice,
    0
  );

  return (
    <Document>
      <Page style={styles.page}>
        <Text style={styles.header}>Invoice</Text>
        <View style={styles.sender}>
          <Text>{invoiceData.sender.name}</Text>
          <Text>{invoiceData.sender.address}</Text>
          <Text>
            {invoiceData.sender.city}, {invoiceData.sender.state} {invoiceData.sender.zip}
          </Text>
        </View>
        <View style={styles.recipient}>
          <Text>{invoiceData.recipient.name}</Text>
          <Text>{invoiceData.recipient.address}</Text>
          <Text>
            {invoiceData.recipient.city}, {invoiceData.recipient.state} {invoiceData.recipient.zip}
          </Text>
        </View>
        <View style={styles.itemsTable}>
          <View style={styles.tableRow}>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Description</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Quantity</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Unit Price</Text>
            <Text style={[styles.tableColHeader, styles.tableCell]}>Amount</Text>
          </View>
          {invoiceData.items.map((item, index) => (
            <View key={index} style={styles.tableRow}>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.description}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.quantity}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>{item.unitPrice.toFixed(2)}</Text>
              <Text style={[styles.tableCol, styles.tableCell]}>
                {(item.quantity * item.unitPrice).toFixed(2)}
              </Text>
            </View>
          ))}
        </View>
        <View style={styles.total}>
          <Text style={styles.totalLabel}>Total: ${totalAmount.toFixed(2)}</Text>
        </View>
      </Page>
    </Document>
  );
};

export default InvoiceDocument;
JAVASCRIPT

Agora, você pode usar o componente PDFDownloadLink do React-pdf para baixar o arquivo PDF gerado:

import React from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';
import InvoiceDocument from './InvoiceDocument';
import './App.css';

const App = () => (
  <div className="app-container">
    <PDFDownloadLink
      document={<InvoiceDocument />}
      fileName="invoice.pdf"
      className="download-button"
    >
      {({ loading }) =>
        loading ? 'Loading document...' : 'Download Invoice'
      }
    </PDFDownloadLink>
  </div>
);

export default App;
import React from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';
import InvoiceDocument from './InvoiceDocument';
import './App.css';

const App = () => (
  <div className="app-container">
    <PDFDownloadLink
      document={<InvoiceDocument />}
      fileName="invoice.pdf"
      className="download-button"
    >
      {({ loading }) =>
        loading ? 'Loading document...' : 'Download Invoice'
      }
    </PDFDownloadLink>
  </div>
);

export default App;
JAVASCRIPT

Agora, adicione alguns estilos CSS no arquivo App.css para uma interface de usuário personalizada:

.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #d1e8ff;
}

.download-button {
  display: inline-block;
  background-color: #5a8fd5;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.download-button:hover {
  background-color: #3a68b7;
}

Abra localhost:3000 no seu navegador. Ao clicar no botão "Download", o arquivo PDF será baixado.

Como formatar seus arquivos PDF

A biblioteca React-pdf oferece suporte a uma ampla gama de opções de estilo, semelhantes ao CSS. Aqui estão algumas propriedades de estilo comuns que você pode usar para personalizar a aparência de seus arquivos PDF:

  • color: Define a cor do texto.
  • fontSize: Define o tamanho da fonte do texto.
  • fontFamily: Define a família da fonte do texto.
  • textAlign: Define o alinhamento do texto (por exemplo, 'esquerda', 'direita', 'centro' ou 'justificado').
  • margin: Define a margem em torno de um elemento.
  • padding: Define o preenchimento dentro de um elemento.
  • border: Define a borda ao redor de um elemento.
  • backgroundColor: Define a cor de fundo de um elemento.

Biblioteca alternativa de PDF para desenvolvedores React

IronPDF for Node.js é uma excelente alternativa para converter HTML em PDF usando React. Desenvolvida pela Iron Software, é uma biblioteca poderosa que permite aos desenvolvedores gerar e manipular documentos PDF diretamente de seus aplicativos Node.js Uma de suas características mais marcantes é a capacidade de lidar com a execução de JavaScript dentro do conteúdo HTML durante a geração de PDFs, permitindo a criação de PDFs dinâmicos e interativos.

Com suporte para diversas plataformas, incluindo Windows, MacOS, Linux, Docker e plataformas em nuvem como Azure e AWS, o IronPDF garante compatibilidade entre plataformas. Sua API intuitiva permite que os desenvolvedores integrem rapidamente a geração e manipulação de PDFs em seus projetos Node.js

React é uma biblioteca JavaScript para construir interfaces de usuário e, como o IronPDF foi desenvolvido for Node.js, você pode integrá- IronPDF aos seus aplicativos React utilizando sua API for Node.js

Aqui está um resumo de como você pode usar o IronPDF com React:

  1. Instale o IronPDF: Você pode instalar o IronPDF em seu projeto React usando o npm ou o yarn.
npm install @ironsoftware/ironpdf
npm install @ironsoftware/ironpdf
SHELL
  1. Integração com componentes React: Você pode criar componentes React que utilizam o IronPDF para gerar e manipular PDFs. Por exemplo, você pode ter um componente que recebe conteúdo HTML como entrada e o converte em PDF usando a API do IronPDF.
import React from 'react';
import { PdfDocument } from '@ironsoftware/ironpdf';

const HTMLToPDFComponent = () => {
    const convertHTMLToPDF = async (htmlContent) => {
        try {
            const pdf = await PdfDocument.fromHtml(htmlContent);
            await pdf.saveAs('generated_pdf.pdf');
            alert('PDF generated successfully!');
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    return (
        <div>
            {/* Input HTML content */}
            <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
        </div>
    );
};

export default HTMLToPDFComponent;
import React from 'react';
import { PdfDocument } from '@ironsoftware/ironpdf';

const HTMLToPDFComponent = () => {
    const convertHTMLToPDF = async (htmlContent) => {
        try {
            const pdf = await PdfDocument.fromHtml(htmlContent);
            await pdf.saveAs('generated_pdf.pdf');
            alert('PDF generated successfully!');
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    return (
        <div>
            {/* Input HTML content */}
            <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
        </div>
    );
};

export default HTMLToPDFComponent;
JAVASCRIPT
  1. Geração de PDFs: Utilize as funcionalidades do IronPDF em seus componentes React para lidar com a geração, manipulação e salvamento de PDFs. Você pode usar os métodos do IronPDF para converter strings HTML , URLs ou imagens em PDFs.
  2. Renderizar PDFs: Depois de gerar PDFs usando o IronPDF, você pode renderizá-los em seu aplicativo React usando os componentes ou bibliotecas apropriados para exibir documentos PDF.
import React from 'react';

const PDFViewerComponent = () => {
    return (
        <div>
            {/* Render PDF using appropriate component or library */}
            <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
        </div>
    );
};

export default PDFViewerComponent;
import React from 'react';

const PDFViewerComponent = () => {
    return (
        <div>
            {/* Render PDF using appropriate component or library */}
            <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
        </div>
    );
};

export default PDFViewerComponent;
JAVASCRIPT

Com o IronPDF, os desenvolvedores podem gerar documentos PDF de nível profissional de forma eficiente a partir de diversas fontes, personalizá-los para atender às suas necessidades específicas e integrar perfeitamente os recursos de geração de PDF em seus aplicativos .NET . O IronPDF também oferece suporte a recursos avançados, como CSS, JavaScript e fontes personalizadas, garantindo que os arquivos PDF gerados correspondam ao design e aos requisitos do seu aplicativo.

Conclusão

Neste artigo, abordamos o processo de conversão de HTML para PDF em React usando a biblioteca React-pdf . Discutimos bibliotecas populares para geração de PDFs , como criar e estilizar arquivos PDF usando React-pdf e opções adicionais para gerar documentos PDF mais complexos.

Seguindo este guia, você agora deve ter um sólido entendimento de como gerar arquivos PDF em seus aplicativos React, permitindo que você gere PDFs de alta qualidade e atenda às necessidades de diversos casos de uso.

O IronPDF oferece uma versão de avaliação gratuita , que permite testar a biblioteca e determinar se ela atende às suas necessidades antes de efetuar a compra. Após o período de avaliação, as licenças de compra do IronPDF começam a partir de $799, o que inclui suporte prioritário e atualizações. Além disso, o IronPDF está disponível para outras linguagens como C# .NET , Java e Python . Baixe a biblioteca IronPDF , começando com IronPDF for Node.js , e experimente.

Darrius Serrant
Darrius Serrant
  Converse agora mesmo com a equipe de engenharia.
Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim