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:Nisan 23, 2026

Adobe, çok miktarda metin ve grafik içeren belgelerin paylaşımına olanak tanımak için Taşınabilir Belge Formatını (PDF) oluşturdu. Çevrimiçi bir PDF dosyasını açmak için farklı bir program gereklidir. PDF dosyaları, günümüz ortamında önemli yayımcılıklar için vazgeçilmezdir. Belgeler ve faturalar üretmek için iş dünyasında sıkça kullanılırlar. Geliştiriciler, müşteri taleplerini karşılamak için PDF dosyaları üretirler. Modern kütüphaneler sayesinde PDF oluşturmak her zamankinden daha kolay hale geldi. Kendi oluşturulmuş PDF dosyalarını üreten bir proje için uygun kütüphaneyi seçerken, inşa etme, okuma ve dönüştürme yetenekleri dahil olmak üzere çeşitli hususlar dikkate alınmalıdır.

2.0 JavaScript Kütüphaneleri

Örneğin, müşterinin faturamızın bir kopyasını indirip görüntüleyebilmesini istediğimiz bir senaryoyu düşünün. Bu faturanın doğru düzeni, yazdırılması ve sayfa sayısı da bizim için eşit derecede önemlidir. 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, web sayfalarını ve şablonları tam PDF belge dosyalarına dönüştürmek için jsPDF ve Html2Canvas'ın özelliklerini tek bir modülde birleştirir.

Web sitenizden PDF oluşturmak 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.
Hedeflenen web sayfası bölümünü bir PDF'e dönüştürmek için kullanılacak olan viewPDF adı verilen bir fonksiyon oluşturun. İstenilen segmenti seçmek için getElementById fonksiyonunu kullanın.
Onu html2pdf'a iletmeden ö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 tıklandığında viewPDF fonksiyonunu tetikleyen bir buton ekleyin. Bu fonksiyon PDF'yi oluşturup 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 adlı açık kaynaklı yazılım, yalnızca JavaScript kullanarak PDF dosyaları oluşturur. Sağlanan formatlamaya dayalı olarak bir sayfa nesnesi oluşturur ve bir PDF sayfası olarak biçimlendirir. GitHub üzerinde en sık kullanılan ve iyi korunan PDF kütüphanesi jsPDF olarak da adlandırılır. Hem Node.js hem de web tarayıcıları için kullanımı kolay modüller sağlar çünkü AMD modül standardına uygun olarak dışa aktarılırlar.

PDFKit konusunda, API'ları bir imperatif modeli takip eder, 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, bu basit bir prosedürdür. Aşağıdaki kod örneğinde, bir PDF dosyası oluşturup ardından oluşturulan PDF'yi bir 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 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 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 belgeleri 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.

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

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:

PDF belgesini (pdf) HTML içeriğinden oluştururuz.
PDF belgesini geçici bir dosyaya (html-with-assets.pdf) saveAs kullanarak kaydederiz.
PDF dosyasını varsayılan sistem uygulaması ile açmak için open paketinden open fonksiyonunu kullanırız. Bu genellikle PDF'yi sistemde yüklü olan varsayılan PDF görüntüleyicide veya varsayılan tarayıcıda açacaktır.

PDF ile 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 üretilecek ve gösterilecektir. IronPDF hakkında daha fazla bilgi edinmek için lütfen IronPDF .NET PDF Görüntüleyici Kılavuzu'na bakın.

3.0 Sonuç

Son olarak, yukarıda birinci sayfada gösterilen JavaScript kodunun başkaları tarafından kullanılabileceği ve güvenlik riskleri oluşturabileceği dikkate alınmalıdır. Böyle bir kodu bir web sayfasına veya web sitesine eklerken, yetkisiz erişim ve veri güvenliği açıkları risklerini dikkate almak önemlidir. Ayrıca, eski tarayıcılarla ve farklı işletim sistemleri ve tarayıcılarla uyumluluk sorunları da dikkate alınmalıdır.

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ına göre çeşitli lisans seçenekleri sunar, geliştiriciler için ücretsiz bir deneme lisansı ve ek satın alma için lisanslar. Lite paketi, $999 fiyatıyla, süresiz lisans, bir yıl ürün desteği ve yükseltme seçenekleri içerir, tekrarlayan ücret yoktur. Bu lisanslar geliştirme, test ve üretim ortamlarında kullanılabilir. Ayrıca, IronPDF, C# .NET, Java ve Python gibi diğer diller için de mevcuttur. Daha fazla ayrıntı için IronPDF web sitesini ziyaret edin.

Darrius Serrant

Mühendislik ekibiyle şimdi sohbet edin

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

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimi alanında Lisans Derecesine sahip ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışıyor. Genç yaşlardan itibaren kodlamaya çekildi, bilgisayar bilimi hem gizemli hem de erişilebilir olarak görüldü ve bu özellik, yaratıcılık ...

Daha Fazla Oku