import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

PDF ARAçLARı

JavaScript'te PDF Dosyaları Nasıl Görüntülenir

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Güncellendi:Temmuz 28, 2025

Adobe, bol miktarda metin ve grafik içeren belgelerin paylaşılabilmesi için Taşınabilir Belge Formatı'nı (PDF) yaratmıştır. PDF dosyasını çevrimiçi açmak için farklı bir programa ihtiyaç duyulmaktadır. PDF dosyaları bugün ortamda önemli yayıncılık için vazgeçilmezdir. İş dünyasında sıkça belgeler ve faturalar üretmek için kullanılırlar. Geliştiriciler, müşteri taleplerini karşılamak için PDF dosyaları üretirler. Modern kütüphaneler, PDF'ler oluşturmayı her zamankinden daha kolay hale getirdi. Projede kendi oluşturulmuş PDF dosyalarını üretirken doğru kütüphaneyi seçerken, oluşturma, okuma ve dönüştürme yetenekleri gibi çeşitli faktörler dikkate alınmalıdır.

2.0 JavaScript Kütüphaneleri

Örneğin, müşterimizin fatura kopyamızı indirip görmesini istediğimiz bir senaryoyu düşünün. Bizim için eşit derecede önemli olan diğer şeyler, bu faturanın doğru düzeni, yazdırılması ve sayfa sayısıdır. Bu bölümde, PDF belgelerini görüntülemek için en popüler kütüphanelerden bazılarını inceleyeceğiz.

2.1 HTML2PDF

HTML2PDF, jsPDF ve Html2Canvas'ın özelliklerini tek bir modülde birleştirerek web sayfalarını ve şablonları tam PDF belge dosyalarına dönüştürür.

Web sitenizden bir PDF oluşturmak için bu adımları izleyin:

HTML2PDF JavaScript kütüphanesini yerel sunucunuza NPM kullanarak kurun veya aşağıdaki örnek gösterimdeki gibi HTML kodunuza ekleyin.
Hedeflenen web sayfası bölümünü PDF'ye dönüştürmek için kullanılacak viewPDF adlı bir fonksiyon oluşturun. İstenilen segmenti seçmek için getElementById fonksiyonunu kullanın.
html2pdf'a geçirmeden önce, biçimlendirme seçeneklerini opt değişkenine ekleyerek değiştirin. Bu, PDF üretimi için çeşitli ayarları özelleştirmenizi sağlar.
HTML sayfanıza bir buton ekleyin ki tıklandığında viewPDF fonksiyonu tetiklensin. Bu işlev, PDF'yi oluşturacak ve ayrı bir tarayıcı sekmesinde açacaktır.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View 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 viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

HTML

JavaScript'te PDF Dosyalarını Görüntüleme: Şekil 1

2.3 jsPDF

jsPDF adı verilen açık kaynaklı yazılım, yalnızca JavaScript kullanarak PDF dosyaları oluşturur. PDF sayfası olarak bir sayfa nesnesi oluşturur ve sağlanan biçimlendirmeye göre biçimlendirir. GitHub'da en sık kullanılan ve iyi bakımı yapılan PDF kütüphanesi de jsPDF olarak adlandırılır. Node.js ve web tarayıcıları için kullanımı kolay modüller sağlar çünkü AMD modül standardıyla uyumlu olarak ihraç edilirler.

PDFKit'e gelince, API'leri buyurgan bir model izler, bu da karmaşık düzenler oluşturmayı zorlaştırabilir. JavaScript ile yazı tipi yerleştirme için gereken tek ek adım, yazı tiplerini TTF dosyalarına dönüştürmektir ki bu basit bir işlemdir. Aşağıdaki kod örneğinde, bir PDF dosyası oluşturuyoruz ve ardından oluşturulan PDF'yi web tarayıcısında ayrı bir sekmede açıyoruz.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // 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);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View 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 viewPDF() {
      // 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);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>

HTML

2.3 IronPDF

IronPDF for Node.js, PDF belgelerini programlı bir şekilde oluşturma ve özelleş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 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.
Kapsamlı Özellik Seti: PDF belgeleri oluşturma, biçimlendirme ve düzenleme için 50'den fazla özellik ile IronPDF, PDF ile ilgili tüm görevler için kapsamlı bir çözüm 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.

Aşağıdaki kod örneği, PDF belgesini JavaScript kullanarak oluşturur ve ardından doğrudan uygulamadan görüntüler:

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

JAVASCRIPT

Bu kodda:

HTML içeriğinden (pdf) PDF belgesini oluşturuyoruz.
PDF belgesini, saveAs kullanarak geçici bir dosyaya (html-with-assets.pdf) kaydediyoruz.
PDF dosyasını varsayılan sistem uygulaması ile açmak için open paketinden open fonksiyonunu kullanıyoruz. Bu genellikle PDF'yi sisteme yüklenen varsayılan PDF görüntüleyiciyle veya aksi halde varsayılan tarayıcıda açar.

PDF ile ilgili görevlerle ilgili daha fazla kod örneği için lütfen bu IronPDF Node.js Kod Örnekleri sayfasını ziyaret edin.

JavaScript'te PDF Dosyalarını Görüntüleme: Şekil 2

Çıktı yukarıdaki resimde olduğu gibi oluşturulacak ve gösterilecektir. IronPDF hakkında daha fazla bilgi edinmek için lütfen IronPDF .NET PDF Görüntüleyici Kılavuzuna bakınız.

3.0 Sonuc

Son olarak, yukarıdaki ilk sayfada gösterilen JavaScript kodunun kötüye kullanılma potansiyeline sahip olduğunu ve başkaları tarafından kullanıldığında güvenlik riskleri oluşturabileceğini belirtmek önemlidir. Bu tür bir kodu bir web sayfasına veya siteye entegre ederken, yetkisiz erişim ve veri güvenliği açıklarının risklerini göz önünde bulundurmak çok önemlidir. Ayrıca güncel olmayan tarayıcılar ve farklı işletim sistemleri ve tarayıcılarla uyumluluk sorunları dikkate alınmalı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. Lite paketi, $799 fiyatıyla, daimi lisans, bir yıllık ürün desteği ve yükseltme seçenekleri içerir, devam eden ücretler yoktur. Bu lisanslar geliştirme, hazırlık ve üretim ortamlarında kullanılabilir. Ayrıca, IronPDF, C# .NET, Java ve Python gibi diğer diller için de mevcuttur. Daha fazla bilgi için IronPDF web sitesini ziyaret edin.

Darrius Serrant

Mühendislik takımıyla şimdi sohbet edin

Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimleri lisans derecesine sahiptir ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışmaktadır. Küçük yaşlardan itibaren kodlamaya ilgi duyan Darrius, bilişimi hem gizemli hem de erişilebilir buldu ve onu yaratıcılık ve problem çö...

Daha Fazlasını Oku