Javascript İle Tarayıcıda Pdf Dosyası Oluşturma Nasıl Yapılır?

JavaScript ile Tarayıcıda PDF Dosyası Oluşturma Nasıl Yapılır?

Günümüz web uygulamalarında, kullanıcıların verilerini dijital olarak saklamaları veya fiziksel bir belgeye dönüştürmeleri sıkça ihtiyaç duyulan bir özelliktir. JavaScript ile tarayıcıda PDF dosyası oluşturma işlemi, sunucu tarafına yük bindirmeden doğrudan istemci (client-side) tarafında gerçekleştirilebilir. Bu rehberde, modern web standartlarını kullanarak tarayıcı üzerinde nasıl dinamik PDF belgeleri üretebileceğinizi adım adım öğreneceksiniz.

Bu makale, özellikle kendi web projelerinde fatura, rapor veya sertifika gibi belgeleri PDF olarak dışa aktarmak isteyen yazılım geliştiriciler için hazırlanmıştır. 2026 yılı itibarıyla en güncel kütüphaneleri ve yöntemleri kullanarak, tarayıcı uyumluluğu yüksek ve performanslı çözümler geliştirmeyi hedefliyoruz.

Gereksinimler ve Ön Hazırlık

Tarayıcı üzerinde PDF oluşturmak için herhangi bir arka plan (backend) kurulumuna ihtiyacınız yoktur. Sadece modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve temel JavaScript bilginiz yeterlidir. Projenizde kullanacağımız temel kütüphane olan jsPDF, PDF dosyalarının düşük seviyeli (low-level) oluşturulmasını sağlayan standart bir araçtır.

Geliştirme ortamınızda bir HTML dosyası ve bir JavaScript dosyası oluşturarak başlayabilirsiniz. Harici kütüphaneleri projenize dahil etmek için CDN (Content Delivery Network) kullanmak, kurulum karmaşasını ortadan kaldıracaktır.

Yukarıdaki kod bloğu, jsPDF kütüphanesini projenize yükler. Bu kütüphane, PDF oluşturma sürecindeki karmaşık matematiksel hesaplamaları ve dosya yapısını sizin yerinize yönetir.

Adım Adım Basit Bir PDF Belgesi Oluşturma

İlk adımda, tarayıcıda sadece metin içeren basit bir PDF dosyası oluşturalım. Bu işlem, kütüphanenin temel çalışma mantığını anlamanızı sağlayacaktır. PDF oluşturma süreci genel olarak bir "doküman nesnesi" oluşturma ve bu nesneye içerik ekleme şeklinde ilerler.

// jsPDF nesnesini oluşturma
const { jsPDF } = window.jspdf;
const doc = new jsPDF();

// Sayfaya metin ekleme (x, y koordinatları ile)
doc.text("Merhaba Dunya!", 10, 10);

// PDF dosyasını indirme
doc.save("ilk-belgem.pdf");

Bu kod, tarayıcıda 10x10 koordinatlarında "Merhaba Dünya!" yazan bir PDF dosyası oluşturur ve otomatik olarak indirme işlemini başlatır. doc.save() fonksiyonu, tarayıcının dosya indirme yöneticisini tetikleyerek kullanıcıya dosyayı kaydetme seçeneği sunar.

PDF İçeriğini Özelleştirme ve Stil Ekleme

Sadece düz metinler profesyonel belgeler için yeterli değildir. Yazı tiplerini, boyutlarını ve renklerini değiştirerek PDF'inizi daha okunabilir hale getirebilirsiniz. jsPDF, metinlerin yanı sıra çizimler ve farklı yazı tipi stilleriyle çalışmanıza olanak tanır.

const doc = new jsPDF();

// Yazı tipi ve boyut ayarları
doc.setFont("helvetica", "bold");
doc.setFontSize(20);
doc.setTextColor(0, 0, 255); // Mavi renk
doc.text("Profesyonel Rapor", 10, 20);

// Normal metin
doc.setFont("helvetica", "normal");
doc.setFontSize(12);
doc.setTextColor(0, 0, 0); // Siyah renk
doc.text("Bu rapor tarayici uzerinde JavaScript ile olusturulmustur.", 10, 30);

doc.save("ozel-rapor.pdf");

Bu örnekte, setFont ve setTextColor gibi metodları kullanarak belgenin görsel hiyerarşisini nasıl yöneteceğinizi gördünüz. Koordinat sisteminin sol üst köşeden (0,0) başladığını unutmamak, içerik yerleşimi için kritiktir.

HTML İçeriğini PDF'e Dönüştürme Yöntemi

Karmaşık yapıları (tablolar, div blokları) tek tek kodla çizmek yerine, mevcut bir HTML yapısını PDF'e dönüştürmek çok daha pratiktir. Bunun için html2pdf.js kütüphanesi en yaygın kullanılan çözümdür. Bu kütüphane, HTML elementlerini tarayıcıda render eder ve bunları PDF sayfalarına dönüştürür.

// HTML elementini seçme
const element = document.getElementById('rapor-alani');

// HTML'i PDF'e dönüştürme ayarları
const opt = {
  margin:       1,
  filename:     'rapor.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

// Dönüştürme işlemini başlatma
html2pdf().set(opt).from(element).save();

Bu yöntem, özellikle karmaşık formların veya tabloların PDF çıktısını alırken geliştiricilere büyük zaman kazandırır. html2canvas ayarı, HTML elementlerinin görsel bir yansımasını alarak PDF içerisine yerleştirir.

PDF Oluşturma Yöntemlerinin Karşılaştırılması

Güvenlik ve Performans Uyarıları

Dikkat: Tarayıcıda PDF oluştururken kullanıcı verilerini işliyorsanız, XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Kullanıcıdan gelen verileri PDF'e yazmadan önce mutlaka temizleyin (sanitization). Ayrıca, çok büyük dosyalar oluşturmak tarayıcının belleğini (RAM) zorlayabilir; bu durumda işlemi parçalara bölerek gerçekleştirmeyi değerlendirin.

PDF oluşturma süreci istemci tarafında gerçekleştiği için sunucu güvenliği açısından bir risk oluşturmaz; ancak kullanıcıların tarayıcılarında çalışacak olan kodun güvenliğinden siz sorumlusunuz. Özellikle kullanıcı girdilerini doğrudan PDF'e yansıtırken içerik filtrelemesi yapmayı unutmayın.

Sıkça Sorulan Sorular

PDF dosyasına Türkçe karakterleri nasıl eklerim?

jsPDF varsayılan olarak standart yazı tiplerini kullanır. Türkçe karakter desteği için, UTF-8 destekli özel yazı tipi dosyalarını (TTF) kütüphaneye tanıtmanız veya standart yazı tipi sınırlamalarını aşmak için addFont metodunu kullanmanız gerekir.

PDF dosyasının boyutunu nasıl optimize ederim?

PDF dosya boyutunu küçültmek için görselleri optimize edin, gereksiz yüksek çözünürlüklü resimler kullanmaktan kaçının ve yazı tipi gömmelerini (font embedding) sadece ihtiyaç duyulan karakterlerle sınırlayın.

Mobil cihazlarda PDF oluşturma çalışır mı?

Evet, JavaScript tabanlı kütüphaneler modern mobil tarayıcılarda sorunsuz çalışır. Ancak, mobil cihazların RAM kapasitesi kısıtlı olduğu için çok büyük belgeler oluştururken dikkatli olunmalıdır.

PDF'e nasıl şifre koyabilirim?

İstemci tarafında (tarayıcıda) PDF şifreleme işlemi, kütüphanelerin sunduğu yeteneklere bağlıdır. jsPDF'in bazı eklentileri bu desteği sunsa da, yüksek güvenlik gerektiren belgeler için şifreleme işleminin sunucu tarafında yapılması daha güvenli bir yaklaşımdır.

PDF içerisine nasıl dinamik tablo eklerim?

jsPDF-autotable gibi yardımcı eklentileri kullanarak veritabanından gelen verileri kolayca PDF tablolarına dönüştürebilirsiniz. Bu, raporlama sistemleri için en verimli yoldur.

İleri Seviye PDF Özelleştirme: Filigran ve Sayfa Numaralandırma

Profesyonel raporlama süreçlerinde, PDF belgelerinin kurumsal kimliği yansıtması ve takip edilebilir olması kritiktir. jsPDF kütüphanesi, sayfa döngüleri içerisinde dinamik olarak filigran eklemenize ve her sayfaya otomatik sayfa numarası yerleştirmenize olanak tanır.

Dinamik Sayfa Numaralandırma Uygulaması

Belge oluşturulurken toplam sayfa sayısını önceden bilmek zor olabilir. Bu nedenle, doc.internal.getNumberOfPages() metodunu kullanarak sayfa numaralarını her sayfanın alt kısmına dinamik olarak basabiliriz.

const doc = new jsPDF();
const totalPages = 10; // Örnek olarak 10 sayfa

for (let i = 1; i


Sonuç

JavaScript ile tarayıcıda PDF dosyası oluşturmak, kullanıcı deneyimini artıran ve sunucu maliyetlerini düşüren oldukça etkili bir yöntemdir. Bu rehberde, temel metin yerleştirmeden, karmaşık HTML yapılarını PDF'e dönüştürmeye kadar birçok tekniği ele aldık. Bir sonraki adım olarak, veritabanınızdan gelen verileri jsPDF-autotable eklentisi ile profesyonel tablolara dönüştürmeyi deneyebilirsiniz. Başarılı kodlamalar dilerim.