NARZęDZIA PDF

Jak konwertować HTML na PDF w React (Poradnik dla dewelopera)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Zaktualizowano:18 stycznia, 2026

Konwersja HTML do PDF w React

Konwersja HTML do PDF w React stała się niezbędną funkcją dla wielu aplikacji internetowych. Niezależnie od tego, czy tworzysz system fakturowania, generator raportów, czy po prostu chcesz udostępnić informacje w powszechnie akceptowanym formacie, generowanie plików PDF ma kluczowe znaczenie. W tym artykule omówimy, jak tworzyć i formatować pliki PDF w aplikacji React poprzez konwersję HTML do PDF przy użyciu popularnych bibliotek.

Jak przekonwertować HTML na PDF w React

Utwórz i skonfiguruj projekt React
Pobierz bibliotekę, aby konwertować HTML na PDF w React przy użyciu npm
Zaimportuj niezbędne moduły z React-PDF/renderer
Skonfiguruj stronę HTML z zaimportowanymi modułami
Wykorzystaj moduł PDFDownloadLink biblioteki React-pdf do konwersji HTML na PDF

Popularne biblioteki do generowania plików PDF

Zanim przejdziemy do procesu konwersji HTML na PDF, omówmy kilka popularnych bibliotek, których można używać do generowania plików PDF w aplikacjach React:

React-pdf: Potężna biblioteka do tworzenia dokumentów PDF w aplikacjach React. Obsługuje różne opcje stylizacji i pozwala z łatwością tworzyć złożone, wielostronicowe pliki PDF.
jsPDF: Powszechnie używana biblioteka JavaScript do generowania plików PDF w locie. Oferuje szeroki zakres funkcji, w tym formatowanie tekstu, osadzanie obrazów i wiele innych.
html2canvas: Ta biblioteka pozwala na wykonanie zrzutu ekranu elementu HTML i przekształcenie go w obiekt canvas, który następnie można przekonwertować do formatu PDF przy użyciu innych bibliotek, takich jak jsPDF.

Wymagania wstępne dotyczące konwersji HTML do PDF w React

Znajomość React i jego ekosystemu

Zanim zagłębimy się w konwersję HTML do PDF, kluczowe znaczenie ma solidne zrozumienie React. Obejmuje to znajomość JSX, zarządzania stanem, cyklu życia komponentów oraz hooków.

Znajomość HTML, CSS i JavaScript

Solidna znajomość HTML, CSS i JavaScript jest niezbędna do pracy z biblioteką React-PDF. Wymaga to znajomości elementów i atrybutów HTML, stylów i selektorów CSS oraz podstaw JavaScript, takich jak zmienne, funkcje i pętle.

Pierwsze kroki z aplikacją React

Zanim przejdziemy do konwersji HTML na PDF w React, przyjrzyjmy się szybko, jak stworzyć nową aplikację React przy użyciu popularnego narzędzia CLI create-react-app. Będzie to stanowić podstawę naszego przykładu generowania plików PDF.

Krok 1 Zainstaluj Node.js

Upewnij się, że masz zainstalowany Node.js na swoim komputerze. Najnowszą wersję Node.js możesz pobrać z oficjalnej strony Node.js.

Krok 2 Zainstaluj create-react-app

create-react-app to powszechnie stosowane narzędzie CLI do generowania aplikacji React. Zainstaluj go globalnie za pomocą następującego polecenia:

npm install -g create-react-app

npm install -g create-react-app

SHELL

Krok 3 Utwórz nową aplikację React

Teraz, gdy masz już zainstalowane create-react-app, możesz utworzyć nową aplikację React za pomocą następującego polecenia:

create-react-app my-pdf-app

create-react-app my-pdf-app

SHELL

To polecenie wygeneruje nową aplikację React w folderze o nazwie my-pdf-app. Przejdź do nowo utworzonego katalogu:

cd my-pdf-app

cd my-pdf-app

SHELL

Krok 4 Uruchom serwer deweloperski

Aby uruchomić serwer deweloperski i zobaczyć nową aplikację React w akcji, uruchom następujące polecenie:

npm start

npm start

SHELL

Krok 5 Wdrażanie generowania plików PDF

Teraz, gdy masz już skonfigurowaną aplikację React, możesz postępować zgodnie z instrukcjami opisanymi w poprzednich sekcjach tego artykułu, aby zaimplementować konwersję HTML do PDF w React przy użyciu popularnych bibliotek, takich jak React-pdf.

Przedstawiamy bibliotekę React-PDF

React-PDF to popularna biblioteka zaprojektowana specjalnie dla aplikacji React, oferująca płynną integrację z ekosystemem React. Niektóre z jego kluczowych funkcji obejmują obsługę wbudowanego i zewnętrznego CSS, generowanie wielostronicowych plików PDF, zaawansowane style oraz kompatybilność z renderowaniem po stronie serwera (SSR).

Tworzenie plików PDF za pomocą React-pdf

W tej sekcji skupimy się na wykorzystaniu React-pdf do tworzenia plików PDF w aplikacji React. Na początek musisz zainstalować pakiet React-PDF:

npm install --save @react-pdf/renderer

npm install --save @react-pdf/renderer

SHELL

Po zainstalowaniu możesz utworzyć nowy komponent React, aby zdefiniować strukturę dokumentu 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

Teraz możesz użyć komponentu PDFDownloadLink z React-pdf, aby pobrać wygenerowany plik PDF:

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

Teraz dodaj kilka stylów CSS w pliku App.css, aby uzyskać niestandardowy interfejs użytkownika:

.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;
}

Otwórz lokalhost:3000 w przeglądarce. Po kliknięciu przycisku Pobierz plik PDF zostanie pobrany.

Stylizacja plików PDF

Biblioteka React-pdf obsługuje szeroki zakres opcji stylizacji, podobnych do CSS. Oto kilka typowych właściwości stylów, których można użyć do dostosowania wyglądu plików PDF:

color: Ustawia kolor tekstu.
fontSize: Ustawia rozmiar czcionki tekstu.
fontFamily: Ustawia rodzinę czcionek tekstu.
textAlign: Ustawia wyrównanie tekstu (np. "left", "right", "center" lub "justify").
margin: Ustawia margines wokół elementu.
padding: Ustawia wypełnienie wewnątrz elementu.
border: Ustawia obramowanie wokół elementu.
backgroundColor: Ustawia kolor tła elementu.

Alternatywna biblioteka PDF dla programistów React

IronPDF for Node.js to doskonała alternatywa do konwersji HTML na PDF w React. Opracowana przez Iron Software, jest to potężna biblioteka, która pozwala programistom generować i edytować dokumenty PDF bezpośrednio z ich aplikacji Node.js. Jedną z jego wyróżniających się cech jest możliwość obsługi wykonywania kodu JavaScript w treści HTML podczas generowania plików PDF, co umożliwia tworzenie dynamicznych i interaktywnych plików PDF.

Dzięki obsłudze różnych platform, w tym Windows, MacOS, Linux, Docker oraz platform chmurowych, takich jak Azure i AWS, IronPDF zapewnia kompatybilność międzyplatformową. Jego przyjazny dla użytkownika interfejs API pozwala programistom na szybką integrację generowania i edycji plików PDF z ich projektami Node.js.

React to biblioteka JavaScript służąca do tworzenia interfejsów użytkownika, a ponieważ IronPDF jest zbudowany dla Node.js, można zintegrować IronPDF z aplikacjami React, wykorzystując jego API Node.js.

Oto zarys tego, jak można używać IronPDF z React:

Zainstaluj IronPDF: Możesz zainstalować IronPDF w swoim projekcie React za pomocą npm lub yarn.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

SHELL

Integracja z komponentami React: Możesz tworzyć komponenty React wykorzystujące IronPDF do generowania i edycji plików PDF. Na przykład można mieć komponent, który pobiera treść HTML jako dane wejściowe i konwertuje ją do formatu PDF przy użyciu API 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

Obsługa generowania plików PDF: Wykorzystaj funkcjonalność IronPDF w komponentach React do generowania, edycji i zapisywania plików PDF. Możesz użyć metod IronPDF do konwersji ciągów HTML, adresów URL lub obrazów do formatu PDF.
Renderowanie plików PDF: Po wygenerowaniu plików PDF za pomocą IronPDF można je renderować w aplikacji React przy użyciu odpowiednich komponentów lub bibliotek do wyświetlania dokumentów 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

Dzięki IronPDF programiści mogą efektywnie generować profesjonalne dokumenty PDF z różnych źródeł, dostosowywać je do swoich konkretnych wymagań oraz płynnie integrować funkcje generowania plików PDF ze swoimi aplikacjami .NET. IronPDF obsługuje również zaawansowane funkcje, takie jak CSS, JavaScript i niestandardowe czcionki, dzięki czemu wygenerowane pliki PDF będą zgodne z projektem i wymaganiami aplikacji.

Wnioski

W tym artykule omówiliśmy proces konwersji HTML do PDF w React przy użyciu biblioteki React-pdf. Omówiliśmy popularne biblioteki do generowania plików PDF, sposoby tworzenia i formatowania plików PDF przy użyciu React-pdf oraz dodatkowe opcje generowania bardziej złożonych dokumentów PDF.

Postępując zgodnie z tym przewodnikiem, powinieneś teraz dobrze rozumieć, jak generować pliki PDF w swoich aplikacjach React, co pozwoli Ci tworzyć wysokiej jakości pliki PDF i zaspokajać potrzeby różnych przypadków użycia.

IronPDF oferuje bezpłatną wersję próbną, która pozwala przetestować bibliotekę i sprawdzić, czy spełnia ona Twoje potrzeby, zanim zdecydujesz się na zakup. Po okresie próbnym ceny licencji IronPDF zaczynają się od $799, co obejmuje priorytetowe wsparcie techniczne i aktualizacje. Ponadto IronPDF jest dostępny w innych językach, takich jak C# .NET, Java i Python. Pobierz bibliotekę IronPDF, zaczynając od IronPDF for Node.js, i wypróbuj ją.

Darrius Serrant

Czat z zespołem inżynierów teraz

Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej