Menüyü Kapat
    Yazılım

    Javascript ile HTML İçeriklerinizi PDF Formatına Dönüştürün

    Node.js projelerinizde HTML'den PDF'e dönüşüm gereksinimleriniz için en ideal kütüphaneleri keşfedin: Puppeteer, jsPDF ve PDFKit. Bu makale bu üç popüler kütüphaneyi detaylı bir şekilde inceliyor.
    Yazar: Son Güncelleme:6 Dakika Okuma0
    Javascript ile HTML İçeriklerinizi PDF Formatına Dönüştürün

    HTML veya HiperMetin İşaretleme Dili, web sayfaları oluşturmak için kullanılan standart işaretleme dilidir ve web siteleri oluşturmak için temel bir teknolojidir. Çeşitli elementler ve etiketler kullanarak web içeriğine farklı yapılar sağlar; örneğin başlıklar, paragraflar, bağlantılar, resimler, formlar ve daha fazlası gibi web sayfasının farklı bölümlerini tanımlar.

    HTML içeriğini PDF olarak dışa aktarmanın faydalı olabileceği birçok senaryo vardır. HTML’den PDF’e dönüşüm makbuzlar, faturalar, raporlar, grafikler veya banka dekontları gibi HTML bazlı belgelerin taşınabilirliğini ve paylaşılabilirliğini arttırır.

    Bu yazıda Node.js uygulamaları için üç popüler HTML’den PDF’e dönüştürme kütüphanesini inceleyip karşılaştıracağız: Puppeteer, jsPDF ve PDFKit.

    Puppeteer ile HTML’den PDF’e Dönüşüm

    Puppeteer, Google tarafından geliştirilen ve headless Chrome / Chromium tarayıcılarını kontrol etmek için yüksek seviyeli bir API sağlayan bir Node.js kütüphanesidir. HTML, CSS ve JavaScript destekleyen en popüler açık kaynaklı HTML’den PDF’e dönüştürme aracıdır.

    Puppeteer, bir web tarayıcısında çeşitli görevleri otomatikleştirmenize olanak tanır. Bunlardan en önemlileri; web crawling, web site test otomasyonu, ekran görüntüsü oluşturma ve PDF üretimidir. HTML içeriğini PDF dosyalarına dönüştürmek için Chrome veya Chromium web tarayıcısının yeteneklerinden yararlanır.

    Puppeteer’ı kullanmak için öncelikle Node.js projenizi oluşturmanız gerekmektedir. Bunu yapmak için projenizin ana dizininde npm init -y komutunu çalıştırın. Ardından projenize bağımlılık olarak Puppeteer kütüphanesini yükleyin: npm install puppeteer.

    Alttaki kodu main.js adıyla proje ana dizinine kaydedin:

    JavaScript
    const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();

 const page = await browser.newPage();

 await page.setContent('<h1>Merhaba, Puppeteer!</h1>');

 await page.pdf({ path: 'ornek.pdf', format: 'A4' });

 await browser.close();

 console.log('PDF dosyanız hazır!.');
})();

    Burada ilk adımda Puppeteer’ı projemize dahil ediyoruz. Sonra hiçbir arayüzü olmayan (headless) bir Chrome tarayıcı açıyoruz. Yeni bir sayfa oluşturup, bu sayfaya basit bir HTML içeriği yani bir “Merhaba, Puppeteer!” başlığı ekliyoruz. Ardından sayfanın PDF çıktısını ornek.pdf adıyla ve A4 boyutunda kaydediyoruz. Tüm işlemler bittikten sonra tarayıcıyı kapatıyoruz ve işlemin tamamlandığını bir mesajla bildiriyoruz.

    Bu kodu node main.js komutu ile çalıştırdığınızda proje dizininde ornek.pdf adıyla yeni bir PDF dosyası oluşacaktır. HTML içeriğini ve PDF oluşturma seçeneklerini tercihlerinize göre özelleştirebilirsiniz.

    jsPDF ile Dinamik PDF Oluşturma

    jsPDF, kullanıcıların dinamik olarak PDF dosyaları üretebildiği popüler bir JavaScript PDF üreticisidir. Kütüphanenin kullanımı kolaydır ve zengin bir dokümantasyona sahiptir.

    jsPDF, istemci tarafında çalışır. Bu da onu sunucu tarafı PDF üretimine ihtiyaç duymadan web uygulamalarında PDF’ler üretmek için uygun bir tercih haline getirir. Mevcut HTML düzenini değiştirebilir ve kullanıcıların PDF çıktısını özelleştirmesine izin verir. Ayrıca resim, tablo ve şekil içeren sıfırdan yeni bir PDF oluşturmak için de kullanılabilir.

    jsPDF kütüphanesini kullanmak için HTML dosyanıza ilgili kütüphaneyi dahil etmeniz gerekiyor. HTML dosyanız PDF’e dönüştürmek istediğiniz içeriği, metni ve stilleri tanımlamalıdır. Başlamak için jsPDF kütüphanesini <head> bölümüne aşağıdaki haliyle dahil edin:

    HTML
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

    Ardından JavaScript dosyanızda (script.js) HTML’den PDF’e dönüşüm kodunu jsPDF kullanarak yazın. İşte basit bir örnek:

    JavaScript
    document.addEventListener("DOMContentLoaded", function () {
 const pdf = new jsPDF();
 const element = document.body;

 pdf.html(element, {
  callback: function (pdf) {
   pdf.save("ornek.pdf");
  },
 });
});

    Burada DOM’un yüklendiğinden emin olmak için DOMContentLoaded event’ini bekliyoruz. Ardından yeni bir jsPDF örneği oluşturuyoruz ve PDF’e dönüştürmek istediğimiz HTML elementi olarak document.body ‘i belirtiyoruz. pdf.html() metodunu kullanarak HTML içeriğini PDF’e dönüştürüyor ve pdf.save() metodunu kullanarak oluşturulan PDF’i “ornek.pdf” adlı bir dosyaya kaydediyoruz.

    JavaScript dosyanızı HTML dosyanıza dahil etmek için <body> etiketinin kapanışından hemen önce aşağıdaki script etiketini koda ekleyin:

    HTML
    <script src="script.js"></script>

    Sayfa yüklendiğinde script otomatik olarak çalışacak ve PDF dönüşümü başlayacaktır.

    PDFKit ile Sunucu Taraflı PDF Oluşturma

    PDFKit, JavaScript ekosistemindeki en eski ve en köklü PDF kütüphanelerinden biridir. Bu kütüphane Node.js kullanılarak sunucu tarafında PDF belgeleri oluşturmak ve düzenlemek için popüler bir seçenektir. Programlı olarak PDF dosyaları oluşturmanıza olanak tanır ve her sayfanın içeriğini, düzenini ve biçimlendirmesini tanımlayarak özel PDF’ler oluşturmanız için farklı özellikleri destekler.

    PDFKit’i kullanarak kurulum yapmak için ilk adım Node.js projenizi başlatmaktır. Bunu yapmak için proje ana dizininde npm init -y komutunu çalıştırın. Ardından projenize bağımlılık olarak PDFKit kütüphanesini yükleyin: npm install pdfkit.

    JavaScript dosyanızda PDFKit kullanarak bir PDF belgesi oluşturma ve HTML içeriği ekleme kodunu yazın. İşte basit bir örnek:

    JavaScript
    const fs = require('fs');
const PDFDocument = require('pdfkit');

const doc = new PDFDocument();

const stream = fs.createWriteStream('ornek.pdf');
doc.pipe(stream);

doc.fontSize(12).text('Merhaba, PDFKit'e Hoş Geldiniz!', { align: 'center' });

doc.end();

stream.on('finish', () => {
 console.log('PDF dosyanız hazır!');
});

    Bu kodda fs (dosya sistemi) modülünü ve PDFKit kütüphanesinden PDFDocument sınıfını içe aktarıyoruz ve ardından PDFDocument kullanarak yeni bir PDF belgesi oluşturuyoruz. Sonrasında PDF çıktısını ornek.pdf adlı dosyaya yönlendiriyoruz.

    text metodunu kullanarak PDF içeriğini, yazı boyutunu ve hizalama gibi değerleri belirliyoruz.

    Belgeyi doc.end() kullanarak sonlandırıyoruz ve stream’in finish olayını handle ederek PDF oluşturulduktan sonra bir mesaj basıyoruz.

    PDFKit, kullanıcıların özel ihtiyaçlarına uygun şekilde oldukça özelleştirilmiş PDF’ler oluşturmasına olanak tanır. PDFKit, kullanıcı istekleri, dinamik veriler ve diğer sunucu taraflı süreçlere yanıt olarak dinamik PDF’ler üretmek için mükemmel bir seçenektir.

    Puppeteer, jsPDF ve PDFKit Özellik Karşılaştırması

    İşte Puppeteer, jsPDF ve PDFKit kütüphanelerinin PDF oluşturma, dosya boyutu, tarayıcı entegrasyonu ve topluluk desteği gibi özelliklerinin karşılaştırması:

    • PDF Oluşturma:
      • Puppeteer: HTML ve web sayfası içeriğinden PDF’ler üretilebilir.
      • jsPDF: HTML ve SVG içeriğinden PDF’ler üretilebilir.
      • PDFKit: Sıfırdan PDF üretilebilir.
    • Dosya Boyutu:
      • Puppeteer: PDF boyutu üzerinde kontrol sağlamaz.
      • jsPDF: PDF boyutu üzerinde kontrol sağlamaz.
      • PDFKit: PDF dosya boyutu kontrol edilebilir.
    • Tarayıcı Entegrasyonu:
      • Puppeteer: Web sayfası oluşturma için headless Chrome entegrasyonu sağlar.
      • jsPDF: Tarayıcı entegrasyonu yok.
      • PDFKit: Tarayıcı entegrasyonu yok.
    • Topluluk Destek ve Güncelleme:
      • Puppeteer: Aktif topluluk desteği ve güncellemeler.
      • jsPDF: Aktif topluluk desteği ve güncellemeler.
      • PDFKit: Aktif topluluk desteği ve güncellemeler.

    Sonuç

    Node.js projeniz için bir PDF dönüşüm kütüphanesi seçmek biraz zorlayıcı olabilir ancak mevcut birkaç harika seçenek vardır. Sıfırdan PDF oluşturmak istiyorsanız PDFKit en iyi seçenek olabilir. HTML veya SVG içeriğini hızlıca PDF’lere dönüştürmek istiyorsanız jsPDF daha uygun olabilir. Web sayfası oluşturma ve etkileşimli içerik için Puppeteer’i düşünebilirsiniz.

    Sizin için en iyi HTML’den PDF’e dönüştürme kütüphanesi, projenizin türüne ve kişisel tercihlerinize göre büyük oranda değişebilir. Her kütüphane farklı senaryolar için farklı avantajlar sunar:

    • Puppeteer, özellikle web sayfası içeriği ve etkileşimli PDF’ler oluşturmak istediğinizde tarayıcı tabanlı bir çözüm olarak mükemmeldir. Chrome veya Chromium tarayıcıları üzerinden güçlü render yetenekleri sunar.
    • jsPDF, istemci tarafında hızlı ve etkili PDF üretimi yapmak isteyenler için idealdir. Özellikle web uygulamalarında kullanıcıların doğrudan tarayıcılarında PDF oluşturmasına olanak tanır.
    • PDFKit, daha karmaşık PDF belgeleri oluşturmak ve sunucu tarafında detaylı kontrol gerektiren durumlar için uygun bir seçenektir. Dosya boyutu ve düzen üzerinde yüksek düzeyde kontrol imkanı sunar.

    Her bir kütüphanenin güçlü yanlarını ve sınırlamalarını dikkate alarak projenizin gereksinimlerine en uygun aracı seçmek uygulamanızın başarısı için kritik bir adımdır. Kütüphanelerin güncel durumları, topluluk tarafından desteklenme düzeyleri ve entegrasyon kolaylıkları gibi faktörler de tercih yaparken önemli bir rol oynar.

    Son olarak seçeceğiniz kütüphane, projenizin ölçeklenebilirliği, performansı ve kullanıcı deneyimi üzerinde doğrudan etkili olacaktır. Belirtildiği gibi Puppeteer etkileşimli ve dinamik içerikler için, jsPDF hızlı ve kullanımı kolay bir istemci tarafı çözümü için, PDFKit ise karmaşık ve özelleştirilmiş PDF’ler için mükemmeldir. Kullanım senaryonuza ve teknik gereksinimlerinize en uygun olanı seçmek, projenizin uzun vadeli başarısını destekleyecektir.

    Paylaş:

    İlgili Haberler

    Yorum Yap