Dahili panolar, bir web tarayıcısında görüntülenmek üzere oluşturulmuştur. Biri bunu dışarıda paylaşmaya ihtiyaç duyduğunda: bir kurul toplantısı destesi, liderlik ekibi için haftalık KPI anlık görüntüsü veya bir uyum denetim raporu, işler hızla dağılır.
Tarayıcıdan PDF'ye yazdırmak, insanların denediği şeydir ve başarısız olan ilk şeydir. Sayfalar kırılır ve grafiklerin arasında kesilir, gezinme kenar çubukları düzenlere sızar ve ortaya çıkan PDF, canlı panoya hiç benzemez. Ekran görüntüleri daha da kötüdür: çözünürlük A4 boyutuna ölçeklendirildiğinde düşer, metin aranamaz ve çok bölümlü bir KPI görünümü, verilerin yarısını kaybetmeden tek bir görüntüye sığmaz.
Daha derin bir sorun JavaScript ile render edilen grafiklerdir. Chart.js, ApexCharts ve Highcharts, bir HTML <canvas> ögesine eşzamansız olarak çizim yaptığından, bir yerel HTML'den PDF anlık görüntüsü genellikle boş bir kanvas yakalar. HTML içeriği DOM'da mevcutken, görselleştirme yoktur. Burası, IronPDF'in yardım edebileceği yer.
Sonuç, bir geliştiricinin her Pazartesi elle bir rapor çekip formatlamasını isteyen bir mesaj simgesi almasıdır. Bu, ölçeklenebilir bir iş akışı değildir. Bugün, HTML içeriğinden PDF belgeleri oluşturabilen bir IronPDF örneğine bakacağız.
IronPDF, panonuzu çalıştıran aynı HTML'yi pikselleri mükemmel bir PDF belgesine dönüştürür. Kullanıcı, "PDF Olarak Dışa Aktar" düğmesine tıklar (belki mavi bir daire içinde bir anahtarla veya daire içinde mavi bir anahtarla işaretlenmiştir), bir API son noktası HTML'yi dönüştürme mantığını yönetir ve tarayıcı PDF içeriğini indirir.
Yönetilecek bir Puppeteer yardımcı programı, yönetilecek bir wkhtmltopdf ikili dosyası ve ödeme ve izleme yapılacak üçüncü taraf bir dışa aktarma API'si yoktur. IronPDF, var olan ASP.NET uygulamanız içinde bir C# NuGet kütüphanesi olarak çalışır. Bir Chromium motoru gömülüdür ve JavaScript'i gerçek bir tarayıcı gibi çalıştırır, bu da Chart.js ve ApexCharts'ın doğru şekilde render edilmesini sağlar, çünkü aslında sayfa yakalanmadan önce çalıştırılır.
Dışa aktarma düğmesi, herhangi bir iş kullanıcısının kullanabileceği bir self-servis özelliği haline gelir, bir geliştiriciyi döngüye dahil etmeden.
Pano sayfasında standart bir JavaScript getirme çağrısı, kullanıcı tarafından aktif olarak filtrelenen ve tarih aralığıyla bir PDF belgesi oluşturulmasına yardımcı olmak için bir API son noktasına gönderir:
document.getElementById('export-btn').addEventListener('click', async () => {
const params = new URLSearchParams({ from: dateFrom, to: dateTo, region: selectedRegion });
const response = await fetch(`/api/reports/export?${params}`);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'dashboard-report.pdf';
a.click();
});
Sayfa yenileme yok, yönlendirme yok, sadece mevcut pano görünümünden tetiklenen bir dosya indirme.
Denetleyici veya hizmet katmanı, kullanıcının ekranda gördüğü aynı verileri sorgulayarak, KPI kartları, veri tabloları ve Chart.js veya ApexCharts'ın çalıştıracağı grafik yapılandırma JSON'u ile bir HTML şablonu – ya render edilmiş bir Razor görünümü ya da oluşturulmuş bir HTML dizesi – doldurur.
HTML, markanızın stil sayfasına referans verebilir, Iron Software logosunu içerebilir veya Iron Software'in müşteri logolarını kullanabilir. Ayrıca, yazıcı medya CSS kurallarını, gezinme öğelerini bastırmak ve sayfa kesimlerini kontrol etmek için dahil edebilir.
Burada IronPDF zorlu kısmı ele alır. EnableJavaScript = true, render'ın yakalama öncesi betikleri çalıştırmasını söyler. WaitFor.NetworkIdle0(), grafik verileri yüklenmiş olan tüm asenkron kaynaklar dahil, anlık görüntüyü tutar.
C# PDF DLL'si ile IronPDF'i kurduğunuzda, aşağıdaki kodu kullanabilirsiniz:
using IronPdf;
using IronPdf.Rendering;
var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.NetworkIdle0();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.MarginTop = 15;
renderer.RenderingOptions.MarginBottom = 15;
var pdf = renderer.RenderHtmlAsPdf(dashboardHtml);Imports IronPdf
Imports IronPdf.Rendering
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.NetworkIdle0()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print
renderer.RenderingOptions.MarginTop = 15
renderer.RenderingOptions.MarginBottom = 15
Dim pdf = renderer.RenderHtmlAsPdf(dashboardHtml)Grafiklerin bir ağ isteği yerine bir zamanlayıcıda başlatıldığı panolar için, NetworkIdle0()'u WaitFor.JavaScript() ile değiştirin ve grafiğinizin onComplete geri çağrısından hazır durumu sinyalini gönderin. Her iki strateji de C# PDF kütüphanesinin grafiği çizmeyi bitirdikten sonra yakalamasını, önce değil, garanti eder.
API son noktası, PDF içeriğini bir FileContentResult içinde sarar. Bir PDF association üyesi veya bir AWS ortak ağ kullanıcısı olsanız da, teslimat sorunsuzdur:
[HttpGet("api/reports/export")]
public IActionResult ExportDashboard([FromQuery] ReportFilters filters)
{
var dashboardHtml = _reportService.BuildDashboardHtml(filters);
var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.NetworkIdle0();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
PdfDocument report = renderer.RenderHtmlAsPdf(dashboardHtml);
return File(
report.BinaryData,
"application/pdf",
$"KPI-Report-{filters.From:yyyyMMdd}.pdf"
);
}Imports Microsoft.AspNetCore.Mvc
Imports IronPdf
<HttpGet("api/reports/export")>
Public Function ExportDashboard(<FromQuery> filters As ReportFilters) As IActionResult
Dim dashboardHtml = _reportService.BuildDashboardHtml(filters)
Dim renderer = New ChromePdfRenderer()
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.NetworkIdle0()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print
Dim report As PdfDocument = renderer.RenderHtmlAsPdf(dashboardHtml)
Return File(report.BinaryData, "application/pdf", $"KPI-Report-{filters.From:yyyyMMdd}.pdf")
End FunctionContent-Disposition: attachment, File() tarafından otomatik olarak bir dosya adı ile ayarlanır, böylece tarayıcı yeni bir sekmede PDF'yi açmak yerine bir indirme başlatır.
Aynı render çağrısı, haftalık KPI PDF'sini her Pazartesi sabahı oluşturan ve liderlik dağıtım listesine e-posta gönderen bir arka plan işi, tekrarlayan bir Hangfire görevi veya barındırılan bir IHostedService içinde çalıştırılabilir. Kullanıcı etkileşimi gerekmez.
İş kullanıcıları için self-servis. Dışa aktarma düğmesi canlı hale geldiğinde, "Benim için bir rapor çekebilir misiniz?" Slack mesajları durur. Pano erişimi olan herhangi bir kullanıcı, bir istek oluşturmadan kendi PDF'sini indirebilir.
Grafik sadakati. Çünkü Chromium, JavaScript'i içinde IronPDF çalıştırır, Chart.js, ApexCharts ve Highcharts grafikler, ekranında göründüğü gibi PDF'de render edilir — renkler, statik etiketler olarak render edilen ipuçları ve duyarlı boyutlandırma dahil.
Marka tutarlılığı. Her dışa aktarılan rapor, şirket logosunu, renk paletini ve panonun stil sheet'inde tanımlanan tipografiyi taşır. Dışa aktarma ve dağıtım arasında yeniden biçimlendirme yoktur.
Zamanlanmış oluşturma. Arka plan işi ile eşleştirilen render çağrısı, haftalık veya aylık PDF'leri paydaşlara otomatik olarak e-posta ile göndermek için. Liderlik, kimse tarafından elle oluşturulmadan cilalı bir rapor alır.
Harici bağımlılıklar yoktur. IronPDF, işlem içinde çalışır. Canlı tutulan bir Puppeteer Node.js iş süreci yok, her platform için paketlenecek bir wkhtmltopdf ikili dosyası yok ve hız sınırlamaları veya belge başına fiyatlandırma ile bir SaaS dışa aktarma API'si yok.
Baskı için optimize edilmiş düzen. CssMediaType.Print, render sırasında medya yazıcı kurallarınızı uygular, bu sayede ayrı bir HTML şablonu sürdürmeden CSS'de temiz, dışa aktarma özel bir düzen tanımlamanıza olanak tanır.
Yönetici dashboard'una bir "PDF olarak Dışa Aktar" düğmesi eklemek küçük bir özellik gibi görünebilir. Pratikte, bir tekrarlanan manuel görevi ortadan kaldırır, teknik olmayan kullanıcılara yıllardır etrafında çalıştıkları bir yeteneği verir ve verilerin aslında nasıl göründüğünü yansıtan bir belge üretir, bozuk bir yazdırma diyaloğu yaklaşık değil.
IronPDF, render karmaşıklığını — JavaScript çalıştırma, CSS medya türleri, grafik yakalama — ele alır, bu yüzden uygulama tarafınızda bir denetleyici eylemi ve bir HTML şablonu bulunur. Kendi dashboard'ınıza karşı test etmek isterseniz, tüm özellikleri ve watermark'sız bir ironpdf.com adresinden 30 günlük ücretsiz deneme mevcuttur.
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ılandırılmış, görsel olarak çekici kılavuzlar oluşturmayı seviyor.
IronPDF, IRONSUITE'in bir parçasıdır
Ofis belgeleriniz için 10 .NET API ürünü
PDF'nizin HTML gibi görünmesine ihtiyaç duyduğunuzda, hızlı.
