JavaScript kullanarak PDF Dosyası Nasıl Üretilir
1.0 Giris
Adobe, metin ve grafik iceren belgeleri paylasma amaciyla Taşınabilir Belge Biçimi'ni (PDF) geliştirilmistir. Çevrim ici bir PDF dosyasini acmak icin ek bir programa ihtiyaç vardir. Modern dunyada, PDF dosyalari onemli belgeler icin oldukca onemlidir. Pek çok şirket, dokümantasyon ve faturalama icin PDF dosyalari kullanir. Geliştiriciler, müşteri gereksinimlerini karsilamak icin belgelerin PDF'lerini üretir ve oluşturur. PDF oluşturma yeteneği, modern kutuphaneler sayesinde hic bu kadar kolay olmamisti. Bir proje icin ideal kutuphane secilirken, kutuphanenin oluşturma, okuma ve donusum yetenekleri dahil bir dizi faktoru dikkate almalıyız.
Bu makalede, PDF oluşturma icin çeşitli JavaScript kutuphanelerini tartisacagiz. JavaScript kutuphanesinin özelliklerini ve kullanım alanlarini inceleyeceğiz; odaklandığımız üç ana başlık:
- Çalişma ortamı uyumluluğu
- Özel yazı tipleri ve tipografi modülleri icin destek
- Kullanım kolaylığı
Makaleyi okuduktan sonra, JavaScript uygulamaniz icin en uygun PDF kutuphanesini secebilirsiniz. Ayrica, guclu ve kullanisli bir PDF kutuphanesi olan IronPDF'i tanitacagiz.
JavaScript'te PDF Dosyalari Oluşturma Adimlari
- PDF'e metin eklemek icin PDFKit kutuphanesinin
textyöntemini kullanin - JavaScript'te pdfmake kutuphanesinin
createPdfmetodunu kullanin - PDF oluşturmak icin jsPDF kutuphanesinden jsPDF sinifini başlatin
- html2pdf kutuphanesinin
html2pdfmetoduna ayarlar verin - IronPDF kutuphanesinden
RenderHtmlAsPdfmetodunu kullanin
2.0 Kutuphaneler
Musterinin sahip oldugumuz bir faturayi indirip yazdirabilmesini istedigimizi varsayalim. Bu faturanin ayrica iyi formatlandigindan emin olmak istiyoruz. Burada, HTML biçiminden PDF'ye dönüştürmek için en popüler kutuphanelerden bazilarina bakacagiz.
2.1 PDFKit
JavaScript ekosisteminde tanitilan en eski PDF kutuphanelerinden biri PDFKit'tir. 2012'deki ilk sürümünden bu yana, buyuk bir popülarite kazanmiş ve 2021 itibariyle düzenli güncellemeler almaya devam etmektedir. PDFKit, Node.js ve Webpack araciligi ile web tarayicilarina destek sunar; ancak, burada belirli kutuphanelere kiyasla biraz daha karmasik bir seviyede olabilir. Ayrica karsilastirmada gorecegimiz gibi, belirli PDF kutuphaneleri esasen PDFKit icin birer arayuzdir.
Ozel yazı tipleri ve resimler desteklenir; ancak yüksek seviyede bir API yoktur. Ayrica, dokümantasyon siklikla karmaşiktir. Tahmin edebileceginiz üzere alışmak biraz zaman alir ve ilk basta PDF'ler oluşturmanın en basit is olmadigini fark edeceksiniz.
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();2.2 pdfmake
PDFKit icin bir arayüz kutuphanesi olan pdfmake. Iki arasindaki temel fark, programlama paradigmalari arasindadir:
pdfmake, deklaratif bir yaklasimi benimserken, PDFKit geleneksel yonetici teknigi takip eder. Sonuc olarak, PDF oluşturmanin istenen işlevselliğine odaklanmak, aracin nasıl belirli bir sonuca ulasacagine dair talimat vermekten daha kolaydir.
Ancak, umut vaat eden herseyin kusursuz olmadigini belirtmekte fayda var. Webpack kullanarak pdfmake icin ozel yazı tiplerini entegre etmeye calismak sorunlara neden olabilir. Maalesef, bu sorunla ilgili çevrim icinde sinirli bilgi mevcuttur. Webpack kullanmiyorsaniz, Git deposunu herhangi bir sorun olmaksizin kolayca klonlayip yazı tipi ekleme skriptini çalistirabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html>Yukarıda belirtilen kodun ciktilari asagida gösterilmistir.
2.3 jsPDF
jsPDF, sadece saf JavaScript kullanarak PDF dosyalari oluşturan acik kaynakli bir pakettir. PDF sayfasi oluşturur ve sagladiginiz formatlandırmaya göre dizayn eder. jsPDF, GitHub'da en yaygın olarak kullanilan PDF kutuphanesidir ve oldukça guvenilirdir ve iyi bakılmaktadir. AMD modül standardina uygun olarak dışa aktarıldığından, Node.js ve web tarayıcıları için kolayca kullanılabilecek modüller sunar.
PDFKit ile ilgili olarak, API'leri yonetsel bir paradigmaya uyar, bu da karmaşık yerlesimlerin tasarlanmasını zorlaştırabilir. Yazı tipi ekleme açısından, tek ek adım olan yazı tiplerini TTF dosyalarina dönüştürmek oldukça kolay bir süreçtir.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>Yukarıdaki kodun çıktısı aşağıda verilmiştir.
2.4 html2pdf
Web sayfalarini ve sablonlarini PDF dosyalarina donüştürmek için html2pdf, jsPDF ve Html2Canvas fonksiyonlarinin bir kombinasyonunu bir modülde birleştirir.
Web sitenizi PDF'ye dönüştürmek için bu adımları izleyin:
- html2pdf JavaScript kutuphanesini sunucunuza NPM ile yerel olarak kurun veya aşağıdaki örnekte gösterildiği gibi HTML kodunuza dahil edin:
- Web sayfasinin belirli bir segmentini PDF'ye donüştürmek için çağrılacak bir "PDF oluşturma" fonksiyonu ekleyin. İstediğiniz segmenti seçmek için
getElementByIdmetodunu kullanabilirsiniz. - "opt" değişkenine html2pdf'ye geçmeden önce formatlama seçeneklerini ekleyerek ozelleştirin. Bu, PDF oluşturmaya yönelik çeşitli ayarları tanımlamanizi sağlar. HTML sayfanıza, tıklandığında
generatePDFfonksiyonunu tetikleyen bir buton ekleyin.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>Yukarıdaki kodun çıktısı aşağıda verilmiştir.
2.5 IronPDF
IronPDF for Node.js, programatik olarak PDF belgeleri oluşturma ve ozelleştirme sürecini basitleştirir. Yüksek performanslı belge işleme kütüphanelerinin güvenilir bir sağlayıcısı olan Iron Software tarafından geliştirilmiştir, IronPDF, Node.js ortamlarında PDF oluşturma için sağlam bir çözüm sunar. Node.js projeleriyle sorunsuz bir şekilde entegre olarak, geliştiricilere PDF'leri kolayca oluşturmak, biçimlendirmek ve düzenlemek için güçlü araçlar sunar.
IronPDF kütüphanesi, yeni veya mevcut PDF belgelerinde sayfaları bölme ve birleştirme, mevcut PDF dosyalarını okuma ve düzenleme, PDF dosyalarından resim çıkartma, PDF dosyalarına metin, grafik, yer imleri, filigranlar, başlıklar ve altbilgiler ekleme gibi birçok özelliği içerir ve Acrobat Reader'a ihtiyaç yoktur. CSS ve CSS medya dosyalarından PDF belgeleri üretilebilir. IronPDF kullanıcıların hem yeni hem de önceden var olan PDF formlarını oluşturmasına, yüklemesine ve güncellemesine olanak tanır.
IronPDF for Node.js'nin Temel Özellikleri:
- Çok Yönlü PDF Oluşturma: IronPDF ile, geliştiriciler HTML, CSS, JavaScript, resimler ve diğer dosya türleri dahil olmak üzere çeşitli kaynaklardan PDF'ler oluşturabilir. Bu esneklik, belirli gereksinimlere uygun dinamik ve görsel olarak etkileyici PDF belgeleri yaratılmasına olanak tanır.
- Gelişmiş Belge Özelleştirme: IronPDF, geliştiricilere başlıklar, notlar, ekler, dijital imzalar, filigranlar ve yer imleri gibi özelliklerle PDF belgelerini zenginleştirme gücü verir. Bu, zengin içeriğe sahip ve etkileşimli unsurlarla profesyonel kalitede PDF'lerin oluşturulmasına olanak tanır.
- Güvenlik Özellikleri: IronPDF, yetkisiz erişimi onlemek icin guclu güvenlik özellikleri sunar. Geliştiriciler, PDF belgelerinde yer alan hassas bilgileri korumak için parola, dijital imzalar, meta veriler ve diğer güvenlik ayarları gibi güvenlik önlemleri uygulayabilir.
- Optimize Edilmiş Performans: IronPDF, tam çok iş parçacıklı ve eşzamanlı destek özelliği sunarak optimizasyon için tasarlanmıştır. Bu, PDF oluşturmanın verimli olmasını sağlar ve performansın çok önemli olduğu yerlerde kullanıma uygundur.
Kapsamli Özellik Seti: PDF belgeleri oluşturma, biçimlendirme ve düzenleme dahil olmak üzere 50'den fazla özellik ile IronPDF, butun PDF ile ilgili görevler için kapsamli bir cozum sunar. Temel belge oluşturma işlemlerinden gelişmiş özelleştirme ve güvenlik çözümlerine kadar, IronPDF, geliştiricilerin ihtiyaçlarını karşılamak için geniş bir yetenek yelpazesi sunar.
ozel JavaScript kullanarak bir PDF dosyasi oluşturmak icin, asagidaki kodlara bakin, bu kodlar HTML icerigini daha cazip hale getirir:
import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();Yukarıdaki kodda, başlangıçta tüm <h1> öğelerinin rengini kırmızıya değiştirmek için bir JavaScript kod parçası tanımlanır. Bu kod, sonrasında JavaScript çalıştırmasını etkinleştirmenin yanı sıra render seçeneklerine entegre edilir. Ardından, "Hello World!!" metnini içeren bir <h1> öğesi içeren bir HTML içerik belirtilir. Belirlenmiş render seçenekleriyle bu HTML iceriginden PDF belgesi oluşturulur, JavaScript kodunun render işleminde calistigi saglanir. Son olarak, oluşan PDF belgesine 'result1.pdf' olarak kaydedilir. Bu kod, IronPDF'in dinamik JavaScript değişikliklerini PDF oluşturma surecine dahil etme yetenegini göstermektedir, geliştiricilerin ozellestirilmiş ve interaktif PDF belgeleri programatik olarak oluşturmalarini saglar.
3.0 Sonuc
Sonuc olarak, yukarida sunulan JavaScript kodu, baska kisiler tarafindan kullanildiginda kotuye kullanima ve potansiyel guvenlik risklerine acik hale gelebilir. Bu tür bir kodu bir web sitesine uygularken, yetkisiz erişim ve veri güvenliği açıklarının olasılığını dikkate almak önemlidir. Farklı tarayıcılar ve platformlar arasındaki uyumluluk sorunları da dahil olmak üzere, gereken tüm işlevlere sahip olmayabilecek eski tarayıcılar için destek sağlama ihtiyaçı göz önünde bulundurulmalıdır.
Buna karşın, IronPDF Node.js kütüphanesi, potansiyel tehditlere karşı koruma sağlamak için geliştirilmiş güvenlik önlemleri sunar. Belirli tarayıcılara bağımlı değildir ve tüm büyük tarayıcılarla uyumludur. Sadece birkaç satır kodla, geliştiriciler IronPDF kullanarak kolayca PDF dosyaları oluşturabilir ve okuyabilirler.
Kütüphane, farklı geliştirici ihtiyaçlarını karşılamak için çeşitli lisans seçenekleri sunar, geliştiriciler için ücretsiz deneme lisansı ve ek olarak satın alınabilir lisanslar dahil. $799 fiyatıyla satılan Lite paketi, daimi bir lisans, bir yıl ürün desteği ve yükseltme seçeneklerini içerir, tekrarlanabilir ücretler yoktur. Bu lisanslar geliştirme, hazırlık ve üretim ortamlarında kullanılabilir. Ayrıca, C# .NET, Java ve Python gibi diğer diller için de mevcuttur. Daha fazla bilgi için IronPDF web sitesini ziyaret edin.
Ücretsiz başlamak için
Ücretsiz başlamak için
Ücretsiz Canlı Demo Rezervasyonu Yapın
Kredi kartı veya hesap oluşturma gerekli değil
