PDF ARAçLARı

React'te HTML'den PDF'ye Dönüşüm (Geliştirici Eğitimi)

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

Darrius Serrant

Güncellendi:Haziran 20, 2026

HTML'yi React İle PDF'ye Dönüştürme

React ile HTML'yi PDF'ye dönüştürmek birçok web uygulaması için önemli bir özellik haline geldi. Bir fatura sistemi, rapor oluşturucu veya evrensel olarak kabul edilen bir formatta bilgi paylaşımı için PDF oluşturma ihtiyacınız varsa, PDF oluşturulması çok önemlidir. Bu makalede, HTML'yi popüler kütüphaneler kullanarak PDF'ye dönüştürerek React uygulamanızda nasıl PDF dosyaları oluşturup stil vereceğinizi keşfedeceğiz.

React'te HTML'yi PDF'ye Dönüştürme

Bir React projesi oluşturun ve yapılandırın
npm kullanarak React'te HTML'yi PDF'ye dönüştürmek için kütüphaneyi indirin
React-pdf/renderer'den gerekli modülleri içe aktarın
İçe aktarılan modüllerle HTML sayfasını yapılandırın
PDFDownloadLink modülünü React-pdf'den kullanarak HTML'yi PDF'ye dönüştürün

Popüler PDF Oluşturma Kütüphaneleri

HTML'yi PDF'ye dönüştürme sürecine dalmadan önce, React uygulamalarınızda PDF oluşturma için kullanabileceğiniz bazı popüler kütüphaneleri tartışalım:

React-pdf: React uygulamalarında PDF belgeleri oluşturmak için güçlü bir kütüphane. Çeşitli stil seçeneklerini destekler ve karmaşık, çok sayfalı PDF'leri kolaylıkla oluşturabilir.
jsPDF: Anlık olarak PDF dosyaları oluşturmak için yaygın olarak kullanılan bir JavaScript kütüphanesi. Metin stili, resim yerleştirme ve daha fazlası dahil olmak üzere geniş bir özellik yelpazesi sunar.
html2canvas: Bu kütüphane, bir HTML elemanının ekran görüntüsünü almanıza ve ardından jsPDF gibi diğer kütüphaneler kullanarak bir PDF'ye dönüştürülebilen bir tuval nesnesine dönüştürmenize olanak tanır.

React'te HTML'yi PDF'ye Dönüştürmek İçin Ön Koşullar

React ve ekosistemine aşinalık

HTML'yi PDF'ye dönüştürmeye başlamadan önce React hakkında sağlam bir anlayışa sahip olmak önemlidir. Bu, JSX, durum yönetimi, bileşen yaşam döngüleri ve hooklar hakkında bilgi sahibi olmayı içerir.

HTML, CSS ve JavaScript Anlayışı

React-pdf kütüphanesi ile çalışmak için HTML, CSS ve JavaScript konularında sağlam bir temel şarttır. HTML elemanları ve nitelikleri, CSS stili ve seçicileri ve değişkenler, fonksiyonlar ve döngüler gibi JavaScript temelleri hakkında bilgi sahibi olunması gerekir.

Bir React Uygulamasıyla Başlamak

Henüz HTML'den PDF'e React içinde dönüştürme işlemine geçmeden önce, popüler create-react-app CLI aracını kullanarak nasıl yeni bir React uygulaması oluşturacağınızı kısaca gözden geçirelim. Bu, PDF oluşturma örneğimiz için temel olarak hizmet edecektir.

Adım 1 Node.js Kurulumu

Makinenizde Node.js yüklü olduğundan emin olun. Node.js'nin en son sürümünü resmi Node.js web sitesinden indirebilirsiniz.

Adım 2 Create-react-app Kurulumu

create-react-app, React uygulamaları oluşturmak için yaygın olarak kullanılan bir CLI aracıdır. Aşağıdaki komutu kullanarak global olarak kurun:

npm install -g create-react-app

npm install -g create-react-app

SHELL

Adım 3 Yeni Bir React Uygulaması Oluşturun

create-react-app kurulu olduğuna göre, aşağıdaki komutla yeni bir React uygulaması oluşturabilirsiniz:

create-react-app my-pdf-app

create-react-app my-pdf-app

SHELL

Bu komut, my-pdf-app adlı bir klasörde yeni bir React uygulaması oluşturacaktır. Yeni oluşturulan dizine girin:

cd my-pdf-app

cd my-pdf-app

SHELL

Adım 4 Geliştirme Sunucusunu Başlatın

Geliştirme sunucusunu başlatmak ve yeni React uygulamanızı iş başında görmek için aşağıdaki komutu çalıştırın:

npm start

npm start

SHELL

Adım 5 PDF Oluşturmanın Uygulanması

Bir React uygulamanız kurulduğuna göre, bu makalenin önceki bölümlerinde açıklanan adımları izleyerek, React-pdf gibi popüler kütüphaneleri kullanarak HTML'den PDF'ye React dönüşümünü uygulayabilirsiniz.

React-pdf Kütüphanesinin Tanıtımı

React-pdf, React ekosistemi ile kesintisiz entegrasyon sunan, özel olarak React uygulamaları için tasarlanmış popüler bir kütüphanedir. Temel özelliklerinden bazıları satıriçi ve harici CSS desteği, çok sayfalı PDF oluşturma, gelişmiş stil ve sunucu tarafı render (SSR) uyumluluğudur.

React-pdf ile PDF Dosyaları Oluşturma

Bu bölümde, bir React uygulamasında PDF dosyaları oluşturmak için React-pdf kullanımına odaklanacağız. Başlamak için React-pdf paketini yüklemeniz gerekir:

npm install --save @react-pdf/renderer

npm install --save @react-pdf/renderer

SHELL

Yüklendikten sonra, PDF belgenizin yapısını tanımlamak için yeni bir React bileşeni oluşturabilirsiniz:

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

Artık PDFDownloadLink bileşenini React-pdf içinden kullanarak oluşturulan PDF dosyasını indirebilirsiniz:

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

Özel bir kullanıcı arayüzü için App.css içinde bazı CSS Stilleri ekleyin:

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

Tarayıcınızda localhost:3000 açın. İndirme düğmesine tıkladığınızda, PDF dosyası indirilecektir.

PDF Dosyalarınızı Biçimlendirme

React-pdf kütüphanesi, CSS'ye benzer geniş bir stil seçenekleri yelpazesi sunar. PDF dosyalarınızın görünümünü özelleştirmek için kullanabileceğiniz bazı yaygın stil özellikleri şunlardır:

color: Metin rengini ayarlar.
fontSize: Metnin yazı tipi boyutunu ayarlar.
fontFamily: Metnin yazı tipi ailesini ayarlar.
textAlign: Metin hizalamasını ayarlar (ör. 'sol', 'sağ', 'orta' veya 'iki yana yasla').
margin: Bir öğenin etrafındaki kenar boşluğunu ayarlar.
padding: Bir öğenin içindeki dolguyu ayarlar.
border: Bir öğenin etrafındaki kenarlığı ayarlar.
backgroundColor: Bir öğenin arka plan rengini ayarlar.

React Geliştiricileri İçin Alternatif PDF Kütüphanesi

IronPDF for Node.js, React içinde HTML'yi PDF'ye dönüştürmek için mükemmel bir alternatiftir. Iron Software tarafından geliştirilen bu güçlü kütüphane, geliştiricilere Node.js uygulamalarından doğrudan PDF belgeleri oluşturma ve işleme olanağı tanır. Öne çıkan özelliklerinden biri, PDF oluşturma sırasında HTML içeriği içinde JavaScript yürütme yeteneğidir ve bu da dinamik ve etkileşimli PDF oluşturmayı mümkün kılar.

IronPDF, Windows, MacOS, Linux, Docker ve Azure ve AWS gibi bulut platformları dahil olmak üzere çeşitli platformlar için destek sunarak platformlar arası uyumluluk sağlar. Kullanıcı dostu API'si geliştiricilerin PDF oluşturma ve işleme işlemlerini Node.js projelerine hızlıca entegre etmelerine olanak tanır.

React, kullanıcı arabirimi oluşturan bir JavaScript kütüphanesidir ve IronPDF Node.js için geliştirildiğinden, IronPDF'yi Node.js API'si aracılığıyla React uygulamalarınıza entegre edebilirsiniz.

İşte IronPDF'yi React ile nasıl kullanabileceğinizin bir taslağı:

IronPDF Kurulumu: IronPDF'yi npm veya yarn kullanarak React projenize kurabilirsiniz.

npm i @ironsoftware/ironpdf

React Bileşenleri ile Entegrasyon: IronPDF'yi kullanarak PDF oluşturma ve işleme fonksiyonlarını içeren React bileşenleri oluşturabilirsiniz. Örneğin, HTML içeriğini girdi olarak alan ve IronPDF'nin API'sini kullanarak bir PDF'ye dönüştüren bir bileşeniniz olabilir.

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

PDF Oluşturma İşleme: React bileşenleriniz içinde IronPDF'nin fonksiyonlarını kullanarak PDF oluşturma, işleme ve kaydetme işlemlerini yönetin. HTML dizelerini, URL'leri veya resimleri PDF'lere dönüştürmek için IronPDF'nin yöntemlerini kullanabilirsiniz.
PDF'leri Render Etme: IronPDF kullanarak PDF'ler oluşturduktan sonra, bunları React uygulamanızda PDF belgelerini görüntülemek için uygun bileşenler veya kütüphaneler kullanarak render edebilirsiniz.

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

IronPDF ile geliştiriciler, çeşitli kaynaklardan profesyonel düzeyde PDF belgeleri verimli bir şekilde oluşturabilir, özel gereksinimlere göre özelleştirebilir ve PDF oluşturma yeteneklerini .NET uygulamalarına sorunsuz bir şekilde entegre edebilir. IronPDF ayrıca CSS, JavaScript ve özel yazı tipleri gibi gelişmiş özellikler sunar ve bu sayede oluşturduğunuz PDF dosyalarının uygulamanızın tasarım ve gereksinimlerine uyumlu olmasını sağlar.

Sonuç

Bu makalede, React-pdf kütüphanesini kullanarak HTML'yi React'te PDF'ye dönüştürme sürecini ele aldık. Popüler PDF oluşturma kütüphanelerini, React-pdf kullanarak PDF dosyaları oluşturma ve stil verme yöntemlerini ve daha karmaşık PDF belgeleri oluşturma seçeneklerini tartıştık.

Bu rehberi takip ederek, React uygulamalarınızda PDF dosyalarını nasıl üreteceğinize dair sağlam bir anlayışa sahip olmalısınız ve böylece çeşitli kullanım senaryolarının gereksinimlerini karşılayarak yüksek kaliteli PDF'ler oluşturabilirsiniz.

IronPDF, kütüphaneyi denemeniz ve satın almadan önce ihtiyaçlarınıza uygun olup olmadığını belirlemeniz için ücretsiz deneme sürümü sunar. Deneme süresinden sonra IronPDF satın alma lisansları $999 ile başlar ve öncelikli destek ve güncellemeler içerir. Ek olarak, IronPDF, C# .NET, Java ve Python gibi diğer diller için de mevcuttur. IronPDF for Node.js ile başlamaya IronPDF kütüphanesini indirerek başlayın ve deneyin.

Darrius Serrant

Mühendislik ekibiyle şimdi sohbet edin

Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimi alanında Lisans Derecesine sahip ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışıyor. Genç yaşlardan itibaren kodlamaya çekildi, bilgisayar bilimi hem gizemli hem de erişilebilir olarak görüldü ve bu özellik, yaratıcılık ...

Daha Fazla Oku