1. .NET
  2. Nasıl Yapılır
  3. JavaScript (Özel İşleme Gecikmeleri)
HTML'den PDF'ye Dönüşümde JavaScript Nasıl Kullanılır C#

C#'ta HTML ile PDF'ye JavaScript Nasıl Kullanılır?

Curtis Chau
Curtis Chau
Güncellendi:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF, Chromium görüntüleme moturunu kullanarak HTML'den PDF'ye dönüştürme işlemi sırasında JavaScript çalıştırmaya imkan tanır. Dinamik web içeriğini, JavaScript ve jQuery dahil olmak üzere, etkileşimli elemanlar ve dinamik görüntüleme desteği ile .NET C# uygulamalarında PDF belgelerine dönüştürün.

JavaScript, web geliştirmede kullanılan yüksek seviyeli, çok yönlü bir programlama dilidir. Web sitelerinde etkileşimli ve dinamik özellikler sağlar. jQuery, DOM manipülasyonu, olay işleme ve AJAX istekleri gibi ortak görevleri basitleştiren bir JavaScript kütüphanesidir.

IronPDF, JavaScript'i Chromium rendering engine aracılığıyla destekler. Bu makale, .NET C# projelerinde HTML'den PDF'ye dönüştürme işlemi sırasında JavaScript ve jQuery'yi nasıl kullanacağınızı gösteriyor. IronPDF, test için bir ücretsiz deneme sürümü sunar. Dönüştürme öncesi HTML'yi hata ayıklamak için, Chrome ile HTML hata ayıklaması kılavuzumuza bakın.

Hızlı Başlangıç: HTML'yi JavaScript ile .NET'te PDF'ye Dönüştür

JavaScript içeren HTML sayfalarını, .NET projelerinde IronPDF kullanarak PDF'ye dönüştürün. Chromium rendering engine desteğiyle, tüm JavaScript öğeleri doğru şekilde işlenir. Bu örnek, dinamik içeriğe sahip bir web sayfasının PDF'ye nasıl dönüştürüleceğini gösterir. Tek bir metot çağrısı, PDF belgenizi oluşturur ve kaydeder.

  1. IronPDF aşağıdaki NuGet Paket Yöneticisi ile yükleyin

    PM > Install-Package IronPdf

  2. Bu kod parçacığını kopyalayın ve çalıştırın.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true, WaitFor = IronPdf.Rendering.WaitFor.JavaScript() } }
    .RenderHtmlAsPdf("<h1>Start</h1><script>document.write('<h1>Generated by JS</h1>');window.ironpdf.notifyRender();</script>")
    .SaveAs("js-rendered.pdf");

  3. Canlı ortamınızda test için dağıtım yapın

    Ücretsiz deneme ile bugün projenizde IronPDF kullanmaya başlayın

    arrow pointer

Temel İş Akışını Nasıl Kurarım?

  1. C# kütüphanesini indirin: HTML'yi PDF'ye Dönüştür
  2. EnableJavaScript özelliği
  3. RenderFromHtmlToPdf: JavaScript kodunun desteklendiğinden emin olun
  4. Özel JavaScript yürütün: .NET C# kodunuzun içinde
  5. Konsol mesajlarını yakalayın: Bir JavaScript mesaj dinleyicisi kullanarak

HTML'den PDF'ye Dönüştürürken JavaScript'i Nasıl İşlerim?

HTML içerisindeki JavaScript, PDF'ye dönüştürürken desteklenir. Render işlemi anında gerçekleştiği için JavaScript düzgün çalışmayabilir. JavaScript yürütme süresine izin vermek için görüntüleme seçeneklerinde RenderingOptions sınıfını yapılandırın. Aşağıdaki kod, maksimum 500 ms bekleme süresiyle WaitFor kullanır. Bekleme süreleri ve görüntüleme gecikmeleri hakkında ayrıntılar için, PDF görüntülemeyi geciktirmek üzere WaitFor kullanma kılavuzumuza bakın.

WaitFor
WaitFor

JavaScript Çalıştırma için WaitFor Neden Önemlidir?

Karmaşık JavaScript çerçeveler, .NET'teki sınırlı JavaScript işlem bellek nedeniyle bellek tahsisi ayarlamalarına ihtiyaç duyabilir. RenderingOptions, PDF oluşturma işleminden önce JavaScript'in tamamen çalıştırılmasını sağlayan seçenekler sunar. JavaScript çalıştırması, ağ boş durumu, HTML öğeleri veya özel render gecikmeleri için bekleyin. Görüntüleme seçeneklerini öğrenin ve PDF oluşturmayı optimize etmek için kullanın.

notifyRender Yöntemini Ne Zaman Kullanmalıyım?

notifyRender yöntemi, JavaScript yürütmesinin tamamlandığını bildirir ve dinamik içerik için uygun görüntüleme zamanlamasını sağlar. PDF oluşturulmadan önce tamamlanması gereken zaman uyumsuz işlemler veya animasyonlar için kullanın. Bu yöntem, hassas görüntüleme kontrolü için notifySettings ayarlarıyla çalışır.

CustomJavaScript
InjectJavaScript
CaptureConsoleMessages

Sık Rastlanan JavaScript Render Sorunları Nelerdir?

Karmaşık çerçeveler ek bekleme süresine veya bellek tahsisine ihtiyaç duyabilir. Yaygın sorunlar arasında:

  • Render öncesi yüklenmeyen zaman uyumsuz veriler
  • CSS animasyonları geçiş ortasında yakalanır
  • Render işlemini engelleyen JavaScript hataları
  • Ağır çerçevelerle birlikte bellek kısıtlamaları

Sorun giderme için, görüntüleme işlemi ayrıntılarını kaydetmek amacıyla özel günlük kaydı etkinleştirin.

PDF Görüntüleme Öncesi Özel JavaScript Nasıl Çalıştırırım?

Render seçeneklerinde CustomJavaScript özelliğini kullanarak render işleminden önce özel JavaScript kodunu çalıştırın. Bu, JavaScript enjeksiyonunun mümkün olmadığı URL'lerin işlenmesi sırasında yardımcı olur. JavaScript kodunu, görüntüleme seçeneklerinin BeforeRendering özelliğine atayın. Birden fazla doküman işlemek için zaman uyumsuz PDF oluşturma ile birleştirin.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-execute-javascript.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// JavaScript code
renderer.RenderingOptions.Javascript = @"
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>");

pdf.SaveAs("executed_js.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' JavaScript code
renderer.RenderingOptions.Javascript = "
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>")

pdf.SaveAs("executed_js.pdf")
$vbLabelText   $csharpLabel

Özel JavaScript Enjeksiyonunu Ne Zaman Kullanmalıyım?

Özel JavaScript enjeksiyonu, kaynak HTML değişikliğinin mümkün olmadığı URL'leri görüntülerken işe yarar. Yaygın kullanımlar:

  • Dönüşüm öncesi üçüncü taraf sayfaların değiştirilmesi
  • Dinamik filigranlar veya başlıklar ekleme
  • Elementleri koşullu olarak gizleme veya gösterme
  • Baskı düzenleri için stilleri ayarlama
  • İçeriği çıkarma ve yeniden düzenleme

Ne Tür DOM Manipülasyonları Yapabilirim?

Tarayıcıda işleme yapmadan önce stilleri değiştirme, element ekleme, içerik değiştirme veya standart DOM işlemleri gerçekleştirme. Örnekler:

  • Baskı formatlaması için CSS özelliklerini değiştirme
  • Gezinti elemanlarını veya reklamları kaldırma
  • Sayfa numaraları veya özel başlıklar ekleme
  • İçerik yerleşimini yeniden yapılandırma
  • Ek veri veya meta veri ekleme

PDF Oluşturma Esnasında JavaScript Konsol Mesajlarını Nasıl Yakalayabilirim?

IronPDF, hata günlükleri ve özel mesajlar da dahil olmak üzere JavaScript konsol mesajlarını yakalar. Mesajları yakalamak için ConsoleListener özelliğini kullanın. Bu örnek, özel metin ve hataları günlüğe kaydetmeyi gösterir.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-message-listener.cs
using IronPdf;
using System;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = message => Console.WriteLine($"JS: {message}");
// Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");

//--------------------------------------------------//
// Error will be logged
// message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';";

// Render HTML to PDF
PdfDocument pdf2 = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");
Imports IronPdf
Imports System

Private renderer As New ChromePdfRenderer()

' Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = Sub(message) Console.WriteLine($"JS: {message}")
' Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")

'--------------------------------------------------//
' Error will be logged
' message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';"

' Render HTML to PDF
Dim pdf2 As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")
$vbLabelText   $csharpLabel

TypeError: Cannot read properties of null (reading 'style') hatasını gösteren hata ayıklama konsolu ve konsol çıktısı

JavaScript Konsol Mesajlarını Neden İzlemeliyim?

Konsol izleme, PDF oluşturma sırasında JavaScript hatalarını ayıklamanıza ve yürütmeyi takip etmenize yardımcı olur. Özellikle:

  • Oluşturmayı önleyen JavaScript hatalarını tanımlama
  • Karmaşık JavaScript işlemi ilerlemesini izleme
  • Asenkron kod zamanlama sorunlarını hata ayıklama
  • Özel JavaScript yürütmesini doğrulama
  • JavaScript performans metriklerini toplama

Hangi Tür Mesajlar Yakalanabilir?

Dinleyici, aşağıdakiler dahil olmak üzere özel console.log mesajlarını ve JavaScript hatalarını yakalar:

  • Konsol çıktıları: log(), info(), warn(), error()
  • Yakalanmamış istisnalar ve çalışma zamanı hataları
  • Başarısız kaynaklardan ağ hataları
  • Tarayıcı motoru kullanım bırakma uyarıları
  • Özel hata ayıklama bilgileri

JavaScript Kütüphaneleri ile Grafik Nasıl Oluşturabilirim?

D3.js, grafik veya görüntü oluşturmada IronPDF ile iyi çalışır. D3.js (Veri Odaklı Belgeler), SVG kullanarak dinamik, etkileşimli veri görselleştirmeleri için HTML5 ve CSS3'te bir JavaScript kütüphanesidir. Daha fazla grafik kütüphanesi örneği için PDF'de grafik oluşturma rehberimizi inceleyin.

Bir D3.js grafik oluşturmak ve PDF'ye dönüştürmek için:

  • renderer nesnesi oluşturun
  • JavaScript ve CSS özelliklerini ayarlayın
  • HTML okumak için HtmlToPdf kullanın
  • PDF olarak kaydedin
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-chart.cs
using IronPdf;

string html = @"
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(html);

// Export PDF
pdfJavaScript.SaveAs("renderChart.pdf");
Imports IronPdf

Private html As String = "
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(html)

' Export PDF
pdfJavaScript.SaveAs("renderChart.pdf")
$vbLabelText   $csharpLabel

EnableJavaScript
WaitFor
WaitFor.JavaScript
window.ironpdf.notifyRender()
WaitFor.JavaScript
JavaScript
JavaScript
JavaScriptMessageListener
RenderHTMLFileAsPdf
WaitFor.NetworkIdle()
window.ironpdf.notifyRender()

IronPDF ile Hangi Grafik Kütüphaneleri En İyi Çalışır?

IronPDF ile uyumlu JavaScript grafik kütüphaneleri:

  • Chart.js: Temel grafikler için hafif
  • Highcharts: Özelleştirilebilir profesyonel grafikler
  • D3.js: Görselleştirmeler için maksimum esneklik
  • C3.js: D3 tabanlı yeniden kullanılabilir grafikler
  • ApexCharts: Performanslı modern grafikler

Başarı, PDF oluşturma öncesinde grafik işleme tamamlanmasını sağlama için uygun bekleme stratejilerine bağlıdır.

Grafik İşleme İçin Bekleme Sürelerini Ne Zaman Ayarlamalıyım?

Animasyonlar veya büyük veri setleriyle karmaşık grafiklerin daha uzun bekleme sürelerine ihtiyacı vardır. Değerlendirin:

  • Veri hacmi işleme süresini etkiler
  • Animasyon süresi tamamlanmalıdır
  • Asenkron veri için ağ istekleri
  • Grafik karmaşıklığı işlemleri artırır

Grafik İşleme Sorunlarını Nasıl Çözebilirim?

Daha fazla WaitFor seçeneği için "C# PDF Oluşturmayı Geciktirmek için WaitFor Sınıfını Kullanma" bölümüne bakın. Sorun giderme adımları:

  1. JavaScript bekleme süresini artırın
  2. Asenkron yükleme için HtmlToPdfAsync kullanın
  3. PDF çıktısı için animasyonları devre dışı bırakın
  4. JavaScript hataları için konsolu kontrol edin
  5. HTML'yi önce tarayıcıda test edin

AngularJS Uygulamaları PDF'ye Nasıl Dönüştürülür?

AngularJS, JavaScript tabanlı açık kaynak bir ön uç çerçevesidir. Bu, istemci taraflı MVC ve MVVM mimarilerini kullanarak tek sayfa uygulaması geliştirmeyi basitleştirir. Ayrıntılar için Angular'dan PDF'ye kod örneğimizi inceleyin.

Uyumluluk için Angular Universal ile sunucu tarafı işleme (SSR) kullanın. Tek sayfa uygulamaları (SPA'lar), dinamik içerik oluşturma nedeniyle özel işlemler gerektirir.

Angular PDF'leri İçin Sunucu Tarafı İşleme Neden Önemlidir?

Tarayıcı JavaScript bağımlılığı nedeniyle sunucu tarafı işleme olmadan istemci tarafı Angular düzgün şekilde işleyemeyebilir. Zorluklar:

  • Dinamik içerikle minimal başlangıç HTML'si
  • Statik HTML'de istemci tarafı yönlendirme yok
  • Sayfa yüklendikten sonra veri bağlama
  • API çağrıları PDF oluşturma öncesi tamamlanmıyor

İstemci Tarafı Angular ile Sınırlamalar Nelerdir?

Başlangıç yüklemesinden sonra dinamik içerik doğru bekleme yapılandırması olmadan yakalanmayabilir. Sınırlamalar:

  • Asenkron yüklenen bileşenler
  • Tembel yüklenen modüller ve yönlendirme
  • Animasyonlar ve geçişler
  • Dinamik formlar ve etkileşimler
  • Gerçek zamanlı veri güncellemeleri

Angular uygulamanızda daha uzun bekleme süreleri kullanın veya NotifyRender öğesini uygulayın.

Angular Universal ile Sunucu Tarafı İşleme Nasıl Çalışır?

Angular ve Angular Universal Arasındaki Farklar Nelerdir?

Angular, tarayıcıda istemci tarafında çalışır ve kullanıcı eylemlerine göre DOM'da sayfalar oluşturur. Angular Universal sunucu tarafında çalışır, istemcide başlatılan statik sayfalar oluşturur. Bu, yüklemeyi iyileştirir ve tam etkileşimden önce yerleşim görüntüleme imkanı sağlar.

PDF oluşturma farkları:

  • Angular: JavaScript yürütme gerektirir
  • Angular Universal: Önceden render edilmiş HTML sağlar
  • Performans: Universal daha hızlı render eder
  • Güvenilirlik: Universal içerik kullanılabilirliğini garanti eder

PDF Oluşturma İçin Angular Universal'i Ne Zaman Seçmeliyim?

Angular Universal'i, istemci tarafı JavaScript bağımlılığı olmadan garanti dinamik içerik oluşturma için kullanın. İdeal olan:

  • API verileriyle raporlar
  • Tutarlı biçimlendirme gerektiren belgeler
  • Yüksek hacimli PDF oluşturma
  • Karmaşık Angular uygulamalar
  • JavaScript yürütme zaman aşımı endişeleri

Angular Universal, zamanlama sorunlarını ortadan kaldırarak ve güvenilirliği artırarak IronPDF dönüşümünden önce sunucu tarafı işleme sağlar.

Sıkça Sorulan Sorular

HTML'yi PDF'ye dönüştürürken C#'ta JavaScript'i nasıl etkinleştiririm?

IronPDF'de JavaScript'i etkinleştirmek için, işleme seçeneklerinde EnableJavaScript özelliğini true olarak ayarlayın: new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true } }. Bu, IronPDF'nin Chromium motorunun dönüşüm işlemi sırasında JavaScript'i çalıştırmasına olanak tanır.

PDF dönüşümü için hangi JavaScript kütüphaneleri desteklenmektedir?

IronPDF, jQuery, React, Vue.js ve Angular dahil olmak üzere tüm JavaScript kütüphanelerini Chromium işleme motoru aracılığıyla destekler. Kütüphane, modern bir web tarayıcısı gibi DOM manipulasyonu, AJAX istekleri ve dinamik içerik oluşturmayı işleyebilir.

PDF oluşturma sırasında JavaScript çalıştırma süresini nasıl yönetirim?

JavaScript çalıştırma süresini kontrol etmek için IronPDF'nin işleme seçeneklerinde WaitFor sınıfını kullanın. PDF oluşturma öncesinde JavaScript'in tamamlanmasını sağlamak için maksimum bekleme süresi ile birlikte WaitFor.JavaScript() (örneğin, 500 ms) kullanabilirsiniz: WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500).

HTML'yi PDF'ye dönüştürme sırasında özel JavaScript kodu çalıştırabilir miyim?

Evet, IronPDF dönüşüm işlemi sırasında .NET C# uygulamanız içinde özel JavaScript kodunu çalıştırmanıza izin verir. JavaScript'i doğrudan HTML dizesine enjekte edebilir veya özel betikleri çalıştırmak için işleme seçeneklerini kullanabilirsiniz.

PDF işleme sırasında JavaScript konsol mesajlarını nasıl yakalarım?

IronPDF, PDF işleme sürecinde console.log mesajlarını ve diğer JavaScript çıktılarını yakalamanıza olanak tanıyan bir JavaScript mesaj dinleyici özelliği sağlar. Bu, JavaScript çalıştırmasını hata ayıklamak için kullanışlıdır.

Kitaplık, JavaScript desteği için hangi işleme motorunu kullanıyor?

IronPDF, Google Chrome'a güç veren Chromium işleme motorunu kullanır. Bu, PDF belgelerinizde modern web teknolojilerini doğru bir şekilde işlemek ve tam JavaScript uyumluluğunu garanti eder.

JavaScript'ten PDF'ye dönüşüm test etme imkanı sağlayan bir ücretsiz deneme süresi mevcut mu?

Evet, IronPDF, tam JavaScript desteğini içeren bir ücretsiz deneme sunar. JavaScript çalıştırma, jQuery işleme ve dinamik içerik oluşturma gibi tüm özellikleri deneme lisansını satın almadan önce test edebilirsiniz.

Curtis Chau
Curtis Chau
  Mühendislik ekibiyle şimdi sohbet edin
Teknik Yazar

Curtis Chau, Bilgisayar Bilimleri alanında Lisans Derecesine (Carleton Üniversitesi) sahip ve Node.js, TypeScript, JavaScript ve React konularında uzmanlaşmış ön uç geliştirmeyle ilgileniyor. Sezgisel ve estetik açıdan hoş kullanıcı arayüzleri oluşturma tutkunu, Curtis modern çerçevelerle çalışmayı ve iyi yapı...

Daha Fazla Oku
Başlamaya Hazır mısınız?
Nuget İndirmeler 19,014,616 | Sürüm: 2026.5 just released
Still Scrolling Icon

Hâlâ Kaydırıyor Musunuz?

Hızlıca kanıt ister misiniz? PM > Install-Package IronPdf
bir örnek çalıştır HTML'nizi bir PDF'ye dönüştüğünü izleyin.