1. .NET
  2. Öğreticiler
  3. HTML'yi Chrome ile Hata Ayıklama
.NET 8'de C# ile HTML'den PDF'ye nasıl dönüştürülür | IronPDF

How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C

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

.NET'nin geliştiricileri olarak, .NET tarafından üretilen PDF belgelerinin sadece mükemmel görünmesi gerektiğini değil, müşterilerimizin beklediği gibi aynı görünmesi gerektiğini anlıyoruz. PDF'lerinizin piksel mükemmellikte görünmesini sağlamak için mükemmel HTML şablonları geliştirmeniz veya bunu sizin için yapacak bir Web Geliştiriciyle çalışmanız gerekecek. .NET, Chrome Tarayıcı sayesinde PDF'lerinizin HTML'ye piksel mükemmellikte olması ve Chrome'da nasıl görünüyorlarsa aynı şekilde görünmesi için seçenekler sunar.

Hızlı Başlangıç: .NET ile Piksel Mükemmellikte PDF'ler Oluşturun

.NET'nin güçlü Chrome Tarayıcı aracılığıyla HTML'nizi zahmetsizce piksel-mükemmel PDF'lere dönüştürün. Bu hızlı kılavuz, .NET'nin HTML5, CSS3 ve JavaScript için tam desteğinden yararlanarak hassas ve öngörülebilir PDF çıktıları elde etmenize yardımcı olur. Sadece birkaç satır kodla, HTML içeriğinizi Chrome'da göründüğü gibi tam olarak oluşturabilir ve web'den PDF'ye geçişin sorunsuz olmasını sağlayabilirsiniz. Kullanım kolaylığından ödün vermeden düzen doğruluğu sağlamayı amaçlayan geliştiriciler için mükemmel.

  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.

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Baskı;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.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

.NET'nin Chrome Tarayıcısı Nedir?

.NET'yi diğer .NET PDF Kütüphanelerinden Benzersiz Yapar

.NET, piyasada benzersizdir çünkü Google Chromium Tarayıcı kullanır, yani Chrome tarayıcılarda gördüğünüz HTML, PDF'lerimizde gördüğünüzle tam olarak aynı görünecektir. Bu öğreticide, bu hedefe ulaşmak için Chrome ve .NET'de uygulamanız gereken bazı ayarları size göstereceğiz.

Açıklığa kavuşturmak için, rakipler tarafından uygulanmış birçok iddia edilen "HTML'den PDF'ye" teknolojisi ne W3C standartlarıyla uyumludur ne de HTML5, CSS3 veya JavaScript'i destekler ve altında yatan wkhtmltopdf gibi tarayıcıları kullanır.

.NET Rakipleriyle Karşılaştırıldığında

.NET

.NET

PDF İndir

Düz Vanilla Chrome

Düz Vanilla Chrome

PDF İndir

Aspose.PDF

Aspose.PDF

PDF İndir

iText

iText

PDF İndir

wkhtmltopdf

wkhtmltopdf

PDF İndir

Diğer ürünlerle karşılaştırmaların tam listesini görmek için blogumuza bakın.

[pFeatures related to .NET Rakipleriyle Karşılaştırıldığında Özellikler] | .NET'nin Chrome Tarayıcısı | Aspose vs .NET| iText ve .NET

.NET'nin Optimize Edilmiş Chrome Tarayıcısı Chrome'dan Daha İyi

.NET'nin Chrome'un kendisini aştığı iki örnek. Chrome ile normalde iki sayfaya bölünecek olan Düğmeler ve Metin, .NET ile sağlam kalır.

Chrome'da Kesilen Düğmeler ve Metin Örneği

Chrome'da kesilen düğme, .NET'de kesilmiyor

Chrome'da Kesilen Metin Örneği

Metin Chrome'da kesiliyor ancak .NET'de kesilmiyor

Neden HTML'den PDF'ye Kullanmalı?

Geliştiriciler, web markalamasına uyan öngörülebilir sonuçlar sağladığı için HTML'i PDF'ye dönüştürmeyi seviyorlar. Tasarım, iyi belgelenmiş standartlaştırılmış HTML, CSS ve JavaScript teknolojileri kullanılarak uygulanır.

  • Çıktı düzeni ve tasarımı web sitesiyle tamamen eşleşir.
  • Web geliştiricileri tasarımı kesin bir şekilde tasarlamaya odaklanabilir.
  • .NET geliştiricileri düzen yerine uygulama mantığına odaklanabilir. Arka uç geliştiricileri tasarım ve düzen görevlerini web tasarımcılarına devredebilirler.

1. CSS Ortam Türü Baskı veya Ekranı Kullanmayı Karar Verin

.NET'nin renderer'ı iki medya render seçeneğine sahiptir: Baskı (varsayılan) ve Ekran. Görsel bir yan yana karşılaştırma için bu öğreticinin sonunda "Ekran ve Baskı Örneği Karşılaştırması" bölümüne bakın.

  • CssMediaType.Baskı, HTML'nizi yazıcıda genel kullanım için optimize eden varsayılan görüntüleme seçeneğidir. Bu, sayfadaki bazı arka plan resimlerinin, ikonların ve diğer mürekkep ağır öğelerin farklı şekilde görünebileceği veya çıkarılabileceği anlamına gelir. Bu seçenek, arka plan resmi olmayan belgeler için iyidir ve varsayılan baskı önizleme seçeneğidir.
  • CssMediaType.Ekran, PDF'lerinizin ekranınızda Chrome'da göründüğü gibi görünmesini sağlayacak görüntüleme seçeneğidir. HTML hata ayıklama amacıyla .NET'nin nasıl oluşturulacağını belirlemek için Chrome tarayıcınızda print-preview'i tam olarak nasıl görünecek şekilde ayarlamanız gerekecek.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen
$vbLabelText   $csharpLabel

Tekrar Eden Tablo Başlıkları

Birden fazla sayfayı kapsayacak bir tablo içeren HTML'niz varsa, muhtemelen Tablo Başlıklarının her PDF sayfasında tekrarlanmasını istersiniz.

  • Bu durumda, yalnızca Baskı CssMediaType kullanabilirsiniz.
  • Ekran kullanımı, Chrome'a başlıkları yalnızca bir kez PRINT etmesini söyler.

Ekran ve Baskı Örneği Karşılaştırması

Baskı modunda birçok görüntü ve ikon yüklenmezken, Ekran modunda yüklenecektir:

PRINT 1 örneği
Ekran 1 Örneği

2. Chrome'u Ayarlayın

.NET, bir Chrome Tarayıcı motoru kullanmaktan gurur duyar. .NET'nin HTML'nizi Chrome'da göründüğü gibi tam oluşturarak işlemek için bu adımları izleyin. Bu hedefe ulaşmak için Chrome içinde önceden yapılması gereken birkaç adım:

PRINT formatında genellikle atlanan tüm resimleri, simgeleri ve arka planları içeren Pixel Perfect PDF'ler oluşturmak için Ekran CSS Media seçeneğini kullandığınızdan emin olun.

2a. DevTools'u açın ve Chrome'daki CSS medyasını Ekran/Baskıyı Taklit Et etkinleştirin

  1. Bunu yapmak için, Chrome içinde DevTools'u açın.

    Chrome'da Inspect'i kullanın

  2. Komut Menüsünü açmak için Command+Shift+P (Mac) veya Control+Shift+P (Windows, Linux, ChromeOS) tuşlarına basın. İşleme yazmaya başlayın, Göster İşleme'yi seçin ve Enter'a basın. DevTools, DevTools pencerenizin alt kısmında Renderleme sekmesini görüntüler. Daha fazla yardım

Görselleştirmeyi Göster'e gidin ve ardından CSS Medya Türünü Bul'u seçin

  1. Aşağı kaydırın ve Emulate CSS media için açılır menüyü bulun ve Ekran veya Baskı seçeneğini seçin. Bir web sayfasında iseniz, ayarların etkin olması için yeniden yüklemeniz (Ctrl+R) gerekebilir.
Switch to CSS Media Type Baskı

Baskı

Switch to CSS Media Type Ekran

Ekran

2b. Baskı Önizleme penceresini açın (Windows'ta Ctrl+P)

Doğru bir görüntüleme elde etmek için kağıt boyutunu değiştirmeniz ve Chrome Baskı diyaloğunda 'arka plan görüntülerini yazdırmayı' etkinleştirmeniz gerekebilir.

2c. Doğru Baskı Önizleme ayarlarını kurun

  • Lütfen .NET projenizde kullandığınız Kağıt Boyutunu seçin, örneğin A4 veya Letter.
  • Margins açılır menüsünden Custom seçeneğini seçin ve dört kenarı da (1") bir inç kenar boşluğu olarak ayarlayın.
  • Background Graphics onay kutusunu etkinleştirin.
  • Yatay bir belge çıkarmak istiyorsanız, Layout değerini Landscape olarak ayarladığınızdan emin olun.

Ve hepsi bu. Artık HTML'nizi hata ayıklayabilir ve .NET'nin düzeninizi nasıl oluşturacağını görmek için baskı önizlemesini kullanabilirsiniz.

3. .NET'yi Ayarlayın

3a. .NET'de CSS Medya Türünü Ayarlama

Web sayfası tasarımını %100 doğrulukla eşleştirmek için, Chrome'da kodumuzda ayarladığımız aynı CSS Medya Türünü seçmemiz gerekmektedir.

PdfCssMediaType.Ekran öğesinin arka planları ve daha büyük resimleri içerdiğini, bunların ise yazıcıların mürekkep tasarrufu yapması için tasarlanmış ve varsayılan olan PdfCssMediaType.Baskı biçiminde atlanabileceğini unutmayın.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

3b. Render Delay ve Render Timeout'u uygun şekilde ayarlama

.NET'nin varsayılan işleme zaman aşımı 60 saniyedir. Bundan daha uzun süren bir işlem ayarları düzenlemeden render edilmeyecektir. Varsayılan ayarları geçersiz kılmak için RenderingOptions.Timeout seçeneğini ayarlamanız gerekir.

Zaman aşımı ayarlanmamışsa veya render gecikmesi ayarlanan zaman aşımından uzun sürerse Unable to Render PDF istisnası oluşacağını unutmayın. Bu hata ile karşılaşıyorsanız, bu değerleri artırmanız gerekebilir.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs
// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds
$vbLabelText   $csharpLabel

Başka neler yapabileceğinizi görmek için hazır mısınız? Öğretici sayfamızdan daha fazla özelliği burada kontrol edin: Ek Özellikler

Sıkça Sorulan Sorular

HTML'den piksel mükemmel PDF işlemeyi nasıl başarabilirim?

HTML'den piksel mükemmel PDF işlemeyi başarmak için, HTML içeriğinin Chrome tarayıcılarında göründüğü gibi PDF'lerin de aynı olduğu IronPDF'in Chrome Renderer'ını kullanabilirsiniz.

HTML'den PDF'ye dönüşümde IronPDF kullanmanın avantajları nelerdir?

IronPDF, HTML içeriğinin web tarayıcılarında görsel görünümünü eşleştiren PDF'ler oluşturmanıza olanak tanır, birçok diğer kütüphaneden farklı olarak HTML5, CSS3 ve JavaScript'i destekler.

IronPDF'te CSS Medya Türlerini nasıl yapılandırırım?

IronPDF'te CSS Medya Türlerini, arka planları olmayan belgeler için 'Baskı' veya ekran görünümüne uymak için 'Ekran' olarak seçerek yapılandırabilirsiniz; PDF çıktısının ihtiyaçlarınıza uygun olmasını sağlar.

PDF işleme için Chrome'u kurarken hangi adımları izlemeliyim?

PDF işlemleri için Chrome'u kurarken, DevTools'u açın, 'CSS medya taklidi'ni 'Screen/Print' olarak etkinleştirin ve PDF'nin istenen düzenle eşleşmesini sağlamak için baskı önizleme ayarlarını ayarlayın.

IronPDF ile işleme sorunlarını nasıl çözerim?

Bir 'Unable to Render PDF' istisnası gibi işleme sorunlarıyla karşılaşırsanız, daha iyi sonuçlar için IronPDF'in seçeneklerinde İşleme Gecikmesi veya İşleme Zaman Aşımı ayarlarını artırmayı deneyin.

IronPDF, web tasarımına eş uygun PDF'leri işleyebilir mi?

Evet, IronPDF, Google Chromium Renderer kullanarak tüm modern web teknolojilerine destek sağlayarak web tasarımınızı tam anlamıyla eşleyen PDF'ler işleyebilmenizi sağlar.

IronPDF neden Google Chromium Renderer kullanıyor?

IronPDF, HTML'nin Chrome tarayıcılarında göründüğü gibi PDF'lerin de aynı olmasını sağlamak ve tutarlı ve yüksek kaliteli bir çıktı sağlamak için Google Chromium Renderer kullanır.

IronPDF .NET 10 ile uyumlu mu ve yeni .NET 10 projelerinde kullanabilir miyim?

Evet. IronPDF açıkça .NET 10 (ve .NET 9, .NET 8 ve daha önceki sürümleri) destekler ve kutudan çıktığı anda uyumludur. Projelerinizde .NET 10'u hedefleyebilir ve IronPDF'in HTML'yi PDF'ye dönüştürme, işleme, düzenleme ve imzalama API'lerini kullanabilirsiniz.

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.