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.
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:
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.
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.
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.
Makinenizde Node.js yüklü olduğundan emin olun. Node.js'nin en son sürümünü resmi Node.js web sitesinden indirebilirsiniz.
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-appcreate-react-app kurulu olduğuna göre, aşağıdaki komutla yeni bir React uygulaması oluşturabilirsiniz:
create-react-app my-pdf-appBu komut, my-pdf-app adlı bir klasörde yeni bir React uygulaması oluşturacaktır. Yeni oluşturulan dizine girin:
cd my-pdf-appGeliş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 startBir 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, 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.
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/rendererYü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;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;Ö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.
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.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ğı:
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';
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;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.
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.
Curtis Chau, Bilgisayar Bilimleri alanında Lisans Derecesine (Carleton Üniversitesi) sahip ve Node.js, TypeScript, JavaScript ve React konularında uzmanlaşmış ön uç geliştirmeyle ilgileniyor. Sezgisel ve estetik açıdan hoş kullanıcı arayüzleri oluşturma tutkunu, Curtis modern çerçevelerle çalışmayı ve iyi yapılandırılmış, görsel olarak çekici kılavuzlar oluşturmayı seviyor.
IronPDF, IRONSUITE'in bir parçasıdır
Ofis belgeleriniz için 10 .NET API ürünü
PDF'nizin HTML gibi görünmesine ihtiyaç duyduğunuzda, hızlı.
