Javascript İle Dinamik Bir Pdf Dosyası Oluşturma Nasıl Yapılır?

JavaScript ile Dinamik Bir PDF Dosyası Oluşturma Nasıl Yapılır?

Modern web uygulamalarında kullanıcı verilerini raporlamak, fatura oluşturmak veya sertifika üretmek gibi işlemler için JavaScript ile dinamik bir PDF dosyası oluşturma becerisi kritik bir öneme sahiptir. Bu makale, tarayıcı tabanlı uygulamalarınızda sunucuya gitmeden, doğrudan istemci tarafında (client-side) nasıl profesyonel PDF dosyaları üretebileceğinizi adım adım açıklamaktadır.

Bu rehber, JavaScript kütüphanelerini kullanarak veriyi görselleştirmek, düzenlemek ve indirilmeye hazır bir doküman haline getirmek isteyen orta ve ileri seviye geliştiriciler için hazırlanmıştır. 2026 yılı standartlarına uygun, performanslı ve güvenli yöntemleri öğreneceksiniz.

Gereksinimler ve Ön Hazırlık

Dinamik PDF oluşturma süreci için modern bir tarayıcı ortamı ve JavaScript kütüphanelerine ihtiyacınız vardır. Projenizde kullanacağımız temel kütüphane, sektör standardı haline gelen jsPDF ve içerik düzenleme için html2canvas olacaktır. Bu araçlar, karmaşık PDF yapılarını kod satırlarıyla uğraşmadan, HTML elementlerini PDF'e dönüştürerek yönetmenizi sağlar.

• Modern bir kod editörü (VS Code önerilir).
• Node.js ve npm (paket yönetimi için).
• Temel düzeyde DOM (Document Object Model) manipülasyon bilgisi.
• Projenize dahil edilmiş jsPDF kütüphanesi.

Kurulum için terminalinize npm install jspdf komutunu yazarak kütüphaneyi projenize dahil edebilirsiniz. CDN üzerinden kullanmak isterseniz, HTML dosyanızın head kısmına ilgili script etiketini eklemeniz yeterlidir.

Adım 1: jsPDF ile Temel PDF Yapısını Oluşturma

İlk adım, boş bir PDF belgesi oluşturmak ve içerisine metin eklemektir. jsPDF nesnesi, PDF'in sayfalarını, yazı tiplerini ve koordinat sistemini yönetmenizi sağlar.

// jsPDF kütüphanesini içe aktarın
import { jsPDF } from "jspdf";

// Yeni bir PDF dokümanı oluşturun (A4 boyutunda)
const doc = new jsPDF();

// Metin ekleme: text(metin, x, y)
doc.text("Merhaba, bu dinamik bir PDF belgesidir.", 10, 10);

// PDF'i indirme
doc.save("ornek-belge.pdf");

Yukarıdaki kod, basit bir PDF oluşturur ve tarayıcınız üzerinden indirilmesini sağlar. Koordinat sistemi (x, y), sayfanın sol üst köşesini (0,0) referans alır.

Adım 2: HTML İçeriğini PDF'e Dönüştürme

Dinamik form verilerini veya karmaşık tabloları PDF'e dönüştürmek için html2canvas ile birlikte jspdf kullanmak en verimli yöntemdir. Bu yöntem, mevcut HTML yapınızın bir görüntüsünü alıp PDF sayfasına yerleştirir.

import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";

const element = document.getElementById("rapor-alani");

html2canvas(element).then((canvas) => {
    const imgData = canvas.toDataURL("image/png");
    const pdf = new jsPDF();
    pdf.addImage(imgData, "PNG", 0, 0);
    pdf.save("rapor.pdf");
});

Bu yaklaşım, CSS ile tasarladığınız şık bir raporu olduğu gibi PDF formatına aktarmanıza olanak tanır. Ancak, yüksek çözünürlüklü görsellerde dosya boyutuna dikkat etmeniz önerilir.

Adım 3: Dinamik Veri ile Tablo Oluşturma

İş uygulamalarında en sık ihtiyaç duyulan özellik, veritabanından gelen verilerle dinamik tablolar oluşturmaktır. Bunun için jspdf-autotable eklentisi kullanılır.

import { jsPDF } from "jspdf";
import "jspdf-autotable";

const doc = new jsPDF();
const tabloBasliklari = [["ID", "Ürün Adı", "Fiyat"]];
const tabloVerileri = [
    [1, "Laptop", "25.000 TL"],
    [2, "Mouse", "500 TL"]
];

doc.autoTable({
    head: tabloBasliklari,
    body: tabloVerileri,
});

doc.save("urun-listesi.pdf");

Bu yöntem, verileriniz arttıkça sayfa sonlarını otomatik olarak hesaplar ve düzenli bir tablo yapısı sunar.

Adım 4: Güvenlik ve Performans Optimizasyonu

İstemci tarafında PDF oluştururken kullanıcı verilerinin güvenliğini sağlamak zorundasınız. Özellikle XSS (Cross-Site Scripting) saldırılarına karşı, PDF içine aktardığınız verileri mutlaka temizleyin (sanitize edin).

Kritik Uyarı: Dinamik içerik oluştururken kullanıcıdan gelen verileri doğrudan PDF'e basmayın. Verileri her zaman bir filtreleme fonksiyonundan geçirin ve PDF oluşturma işlemlerini mümkünse Web Worker kullanarak ana thread'i (iş parçacığını) dondurmadan gerçekleştirin.

Yöntem Karşılaştırma Tablosu

Sıkça Sorulan Sorular

PDF oluştururken neden karakterler görünmüyor?

jsPDF varsayılan olarak sadece standart fontları destekler. Eğer Türkçe karakter (İ, ş, ğ gibi) kullanıyorsanız, özel bir font dosyasını (TTF) Base64 formatına çevirip kütüphaneye tanıtmanız gerekir.

Mobil cihazlarda PDF indirme sorunu yaşanır mı?

Modern mobil tarayıcılar, Blob nesneleri üzerinden dosya indirmeyi destekler. Ancak büyük dosyalarda bellek yönetimine dikkat edilmelidir.

Sunucu tarafında mı yoksa istemci tarafında mı oluşturmalıyım?

Eğer veriler çok gizli değilse ve hızlı bir rapor gerekiyorsa istemci tarafı yeterlidir. Ancak yasal belgeler veya çok büyük veriler için sunucu tarafında (Node.js ile PDFKit gibi) oluşturma daha güvenlidir.

PDF dosyasını şifreleyebilir miyim?

İstemci tarafındaki jsPDF kütüphaneleri temel şifreleme sunsa da, yüksek güvenlikli belgeler için sunucu tarafında şifreleme yapmak her zaman daha güvenli bir pratiktir.

PDF'e resim eklemek dosya boyutunu etkiler mi?

Evet, yüksek çözünürlüklü resimler PDF boyutunu ciddi oranda artırır. Resimleri PDF'e eklemeden önce mutlaka sıkıştırmalı ve optimize etmelisiniz.

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

Profesyonel raporlama süreçlerinde, oluşturulan PDF dosyalarının kurumsal kimliği yansıtması ve doküman takibinin kolaylaştırılması kritik öneme sahiptir. jsPDF kütüphanesi, sayfa altbilgileri ve filigran gibi gelişmiş görsel öğeleri eklemek için esnek bir API sunar.

Dinamik Sayfa Numaralandırma Mantığı

Her sayfaya otomatik numara eklemek için doc.internal.getNumberOfPages() metodunu bir döngü içerisinde kullanırız. Bu işlem, PDF oluşturma süreci tamamlanmadan hemen önce, tüm sayfalar üzerinde gezilerek gerçekleştirilmelidir.

const doc = new jsPDF();
doc.text("Rapor İçeriği", 10, 10);
doc.addPage();
doc.text("İkinci Sayfa", 10, 10);

const pageCount = doc.internal.getNumberOfPages();
for (let i = 1; i


Sonuç

JavaScript ile dinamik PDF oluşturma, doğru kütüphaneler ve yöntemler kullanıldığında oldukça güçlü bir araçtır. Bu rehberde, temel metin yerleştirmeden karmaşık tablo oluşturmaya kadar tüm süreci ele aldık. Bir sonraki adımda, kendi projenizde özel bir font yükleyerek Türkçe karakter desteğini tam olarak entegre etmeyi deneyebilirsiniz. Unutmayın, kullanıcı deneyimi için oluşturduğunuz PDF'lerin dosya boyutlarını optimize etmek her zaman en iyi pratiktir.


    Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce kütüphanelerin güncel güvenlik yamalarını kontrol edin ve kullanıcı verilerini işlerken veri gizliliği yasalarına uygun hareket edin.