JavaScript kullanarak PDF Dosyası Nasıl Üretilir
1.0 Giriş
Adobe, metin ve grafik içeren belgeleri paylaşmak amacıyla Taşınabilir Belge Formatını (PDF) geliştirdi. Çevrimiçi bir PDF dosyasını açmak için ek bir programa ihtiyaç vardır. Günümüz dünyasında, PDF dosyaları önemli belgeler için oldukça kritik bir öneme sahiptir. Belgeler ve faturalar oluşturmak için birçok işletme PDF dosyaları kullanır. Geliştiriciler, müşteri ihtiyaçlarını karşılamak için belgelerin PDF'lerini üretir ve oluşturur. Modern kütüphaneler sayesinde PDF oluşturma işlemi hiç bu kadar kolay olmamıştı. Bir proje için ideal kütüphaneyi seçerken, kütüphanenin oluşturma, okuma ve dönüştürme yetenekleri gibi bir dizi faktörü dikkate almalıyız.
Bu makalede, PDF oluşturma için çeşitli JavaScript kütüphanelerini ele alacağız. JS kütüphanesinin özelliklerini ve kullanım alanlarını, üç ana nokta üzerinde odaklanarak inceleyeceğiz:
- Çalışma ortamı uyumluluğu
- Tipografi için özel fontlar ve modüllere destek
- Kullanım kolaylığı
Makalenin sonunda, JavaScript uygulamanız için en uygun PDF kütüphanesini seçebileceksiniz. Ayrıca, güçlü ve kullanışlı bir PDF kütüphanesi olan IronPDF'i tanıtacağız.
JavaScript ile PDF Dosyaları Oluşturmanın Adımları
- PDFKit kütüphanesinin
textmetodunu kullanarak PDF içine metin ekleyin - JavaScript'te pdfmake kütüphanesinin
createPdfmetodunu kullanın - PDF oluşturmak için jsPDF kütüphanesinden jsPDF sınıfını instansiyel edin
- html2pdf kütüphanesinin
html2pdfmetoduna yapılandırmaları iletin - IronPDF kütüphanesinden
RenderHtmlAsPdfmetodunu kullanın
2.0 Kütüphaneler
Diyelim ki müşterinin indirmesi ve yazdırması için elimizdeki bir faturayı sunmak istiyoruz. Ayrıca bu faturanın düzgün bir formatta yazdırılmasını da istiyoruz. Burada, bu faturayı HTML formatından PDF'ye dönüştürmek için en çok beğenilen kütüphanelerden bazılarına bakacağız.
2.1 PDFKit
JavaScript ekosisteminde tanıtılan ilk PDF kütüphanelerinden biri PDFKit'tir. 2012'deki ilk çıkışından bu yana, büyük bir popülerlik kazanmış ve 2021 itibarıyla düzenli güncellemeler almaya devam etmiştir. PDFKit, Webpack aracılığıyla hem Node.js hem de web tarayıcıları için destek sunmaktadır, ancak burada tartışılan diğer kütüphanelere kıyasla biraz daha yüksek bir karmaşıklık seviyesi sunabilir. Ek olarak, karşılaştırmada göreceğimiz gibi, bazı PDF kütüphaneleri esasen PDFKit için sarıcıdır.
Özel yazı tipleri ve resim yerleştirme desteklenmektedir; ancak yüksek seviyeli bir API yoktur. Ek olarak, belgeler sıklıkla karmaşıktır. Tahmin edileceği gibi, alışmak biraz zaman alır ve ilk başta PDF oluşturmanın en kolay görev olmadığını göreceksiniz.
// 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 için sarıcı bir kütüphane pdfmake olarak adlandırılır. İkisi arasındaki başlıca fark, programlama paradigmalarında yatmaktadır:
pdfmake, deklaratif bir yaklaşım benimserken, PDFKit geleneksel olarak imperatif teknikleri izler. Sonuç olarak, pdfmake kütüphanesi ile PDF oluşturma işlevine odaklanmak daha kolaydır, çünkü kütüphaneye belirli bir sonuca nasıl ulaşılacağını anlatmak yerine istenen işlevselliğe odaklanılır.
Ancak, her şeyin vaat ettiği kadar kusursuz olmadığını belirtmekte fayda var. Webpack kullanmak ve pdfmake ile özel yazı tiplerini entegre etmek sorunlara yol açabilir. Maalesef, bu soruna dair çevrimiçi çok az bilgi mevcuttur. Webpack kullanmıyorsanız, hala Git deposunu kolayca klonlayabilir ve yazı tipi yerleştirme komut dosyasını çalıştırabilirsiniz.
<!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 bahsedilen kodun çıktısı aşağıda gösterilmiştir.
2.3 jsPDF
jsPDF, yalnızca saf JavaScript kullanarak PDF dosyaları oluşturan açık kaynaklı bir paket. PDF sayfası oluşturur ve sağladığınız formatlamaya dayalı olarak biçimlendirir. jsPDF, GitHub üzerindeki en yaygın kullanılan PDF kütüphanesi olup yüksek ölçüde güvenilir ve iyi bir şekilde korunmaktadır. Hem Node.js hem de web tarayıcıları için kolay kullanılabilir modüller sunar, çünkü AMD modül standardına uygun olarak dışa aktarılırlar.
PDFKit konusunda, API'ları bir imperatif paradigmaya bağlı olup, karmaşık düzenler tasarlamayı zorlaştırabilir. Yazı tipi yerleştirme konusunda, ek olarak yapılması gereken tek adım yazı tiplerini TTF dosyalarına dönüştürmektir ki bu basit 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 gösterilmiştir.
2.4 html2pdf
html2pdf, web sayfalarını ve şablonlarını PDF dosyalarına dönüştürmek için jsPDF ve Html2Canvas'ın işlevlerini tek bir modülde birleştirir.
Web sitenizi PDF'ye dönüştürmek için aşağıdaki adımları izleyin:
- html2pdf JavaScript kütüphanesini sunucunuza yerel olarak NPM kullanarak yükleyin veya aşağıdaki örnekte gösterildiği gibi HTML kodunuza ekleyin:
- Belirtilen web sayfası segmentini PDF'ye dönüştürmek için çağrılacak bir "PDF oluştur" fonksiyonu ekleyin. İstediğiniz segmenti seçmek için
getElementByIdyöntemini kullanabilirsiniz. - Formatlama seçeneklerini customlayarak, onları "opt" değişkenine ekleyin ve ardından html2pdf'ye iletin. Bu, PDF oluşturma için çeşitli ayarları tanımlamanızı sağlar. HTML sayfanıza, tıklandığında
generatePDFişlevini tetikleyen bir düğme 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 gösterilmiştir.
2.5 IronPDF
IronPDF Node.js için, programatik olarak PDF belgeleri oluşturma ve özelleştirme sürecini basitleştirir. Iron Software tarafından geliştirilen, yüksek performanslı belge işleme kütüphaneleri sağlayıcısı olarak güvenilir, 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 oluşturma, biçimlendirme ve düzenlemede 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 çıkarma, PDF dosyalarına metin, grafik, yer işaretleri, filigranlar, başlıklar ve altbilgiler ekleme gibi geniş bir özellik yelpazesine sahiptir, hepsi Acrobat Reader'a ihtiyaç olmadan. CSS ve CSS medya dosyalarından, PDF belgeleri üretilebilir. IronPDF, kullanıcıların hem yeni hem de mevcut 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, görüntüler ve diğer dosya türleri dahil olmak üzere çeşitli kaynaklardan PDF'ler oluşturabilir. Bu esneklik, belirli gereksinimlere göre dinamik ve görsel olarak çekici PDF belgeleri oluşturmayı sağlar.
- Gelişmiş Belge Özelleştirme: IronPDF, geliştiricilere başlıklar, altbilgiler, ekler, dijital imzalar, filigranlar ve yer imleri gibi özelliklerle PDF belgelerini geliştirme gücü sağlıyor. Bu, zengin içerik ve etkileşimli öğeler içeren profesyonel düzeyde PDF'ler oluşturmayı mümkün kılar.
- Güvenlik Özellikleri: IronPDF, yetkisiz erişime karşı PDF'leri korumak için güçlü güvenlik özellikleri sunar. Geliştiriciler, PDF belgelerinde yer alan hassas bilgileri korumak için parolalar, dijital imzalar, meta veriler ve diğer güvenlik ayarları gibi güvenlik önlemleri uygulayabilir.
- İyileştirilmiş Performans: IronPDF, tam çoklu iş parçacığı ve asenkron destekle optimize edilmiş performans için tasarlanmıştır. Bu, PDF oluşturma işleminin verimli olduğunu garanti eder ve performansın önemli olduğu kritik uygulamalar için uygun hale getirir.
Kapsamlı Özellik Seti: PDF belgelerini oluşturma, biçimlendirme ve düzenleme için 50'den fazla özelliğe sahip olan IronPDF, tüm PDF ile ilgili görevler için kapsamlı bir çözüm sunar. Temel belge oluşturmadan gelişmiş özelleştirme ve güvenliğe kadar, IronPDF geliştiricilerin ihtiyaçlarını karşılamak için geniş bir yetenek yelpazesi sunar.
Özel JavaScript kullanarak PDF dosyası oluşturmak için, HTML içeriğini daha çekici hale getiren aşağıdaki koda göz atın:
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 daha sonra JavaScript yürütülmesini etkinleştirmekle birlikte oluşturma seçeneklerine entegre edilir. Ardından, içinde "Hello World!!" metni bulunan bir <h1> öğesi içeren bir HTML içeriği belirtilir. PDF belgesi, JavaScript kodunun oluşturma sürecinde yürütülmesini sağlayarak, tanımlanan oluşturma seçenekleri ile bu HTML içeriğinden oluşturulur. Son olarak, ortaya çıkan PDF belgesi 'result1.pdf' olarak kaydedilir. Bu kod, IronPDF'in PDF oluşturma işlemlerine dinamik JavaScript değişikliklerini dahil etme yeteneğini göstermektedir, böylece geliştiriciler, programatik olarak özelleştirilmiş ve etkileşimli PDF belgeleri oluşturabilirler.
3.0 Sonuç
Sonuç olarak, yukarıda sunulan JavaScript kodu, başkaları tarafından kullanıldığında kötüye kullanım ve potansiyel güvenlik risklerine karşı savunmasız olabilir. Böyle bir kodu bir web sitesine entegre ederken, yetkisiz erişim ve veri güvenliği açıkları olasılığını dikkate almak önemlidir. Farklı tarayıcılar ve platformlar arasında uyumluluk sorunları da dikkate alınmalıdır, özellikle tüm gerekli işlevselliklere sahip olmayabilecek eski tarayıcılara destek sağlanması ihtiyacı da dahil.
Buna karşılık, IronPDF Node.js kütüphanesi, potansiyel tehditlere karşı koruma sağlamak için gelişmiş güvenlik önlemleri sunmaktadır. 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 okuyabilir.
Kütüphane, farklı geliştirici ihtiyaçlarını karşılamak için çeşitli lisans seçenekleri sunmaktadır, geliştiriciler için ücretsiz bir deneme ve satın alma için ek lisanslar dahil. Fiyatı $999 olan Lite paketi, süresiz bir lisans, bir yıllık ürün desteği ve yükseltme seçeneklerini içerir, tekrarlayan ücretler yoktur. Bu lisanslar geliştirme, test ve üretim ortamlarında kullanılabilir. Ek olarak, C# .NET, Java, ve Python gibi diğer diller için de mevcuttur. Daha fazla ayrıntı için IronPDF web sitesini ziyaret edin.
Ücretsiz Başlayın
Ücretsiz Başlayın
Ücretsiz Canlı Demo Rezervasyonu
Kredi kartı veya hesap oluşturma gerektirmez
