IronSoftware

Posted on Dec 23

Chrome PDF Rendering Engine in C# (Guide)

#dotnet #csharp

HTML to PDF conversion quality depends on the rendering engine. Chrome's engine produces pixel-perfect results—the same output you'd get from Chrome's print-to-PDF feature, with full JavaScript and CSS3 support.

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1><p>Rendered with Chrome</p>");
pdf.SaveAs("chrome-rendered.pdf");

IronPDF uses a headless Chromium engine internally, ensuring your PDFs look exactly like they would in a browser.

Why Does the Rendering Engine Matter?

Different rendering engines produce different results:

WebKit-based: Older engines, inconsistent CSS support
wkhtmltopdf: Uses an outdated Qt WebKit, deprecated
Puppeteer/Playwright: Full Chrome but requires browser management
Chrome/Chromium: Modern standards, pixel-perfect output

Chrome's rendering engine handles complex layouts, web fonts, flexbox, grid, and JavaScript-generated content correctly.

How Do I Use the Chrome Renderer?

The ChromePdfRenderer class is your entry point:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// From HTML string
var pdf1 = renderer.RenderHtmlAsPdf("<h1>From String</h1>");

// From HTML file
var pdf2 = renderer.RenderHtmlFileAsPdf("report.html");

// From URL
var pdf3 = renderer.RenderUrlAsPdf("https://example.com");

pdf1.SaveAs("string.pdf");
pdf2.SaveAs("file.pdf");
pdf3.SaveAs("url.pdf");

All three methods use the same Chrome engine under the hood.

How Do I Configure Rendering Options?

Customize the output through RenderingOptions:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// Paper settings
renderer.RenderingOptions.PaperSize = PdfPaperSize.A4;
renderer.RenderingOptions.PaperOrientation = PdfPaperOrientation.Portrait;

// Margins in millimeters
renderer.RenderingOptions.MarginTop = 20;
renderer.RenderingOptions.MarginBottom = 20;
renderer.RenderingOptions.MarginLeft = 15;
renderer.RenderingOptions.MarginRight = 15;

// Print background colors and images
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

var pdf = renderer.RenderHtmlAsPdf(html);

How Do I Handle JavaScript Content?

Chrome executes JavaScript before rendering:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;

// Wait for JavaScript to complete
renderer.RenderingOptions.WaitFor.RenderDelay(500); // milliseconds

var html = @"
<div id='content'></div>
<script>
    document.getElementById('content').innerHTML = '<h1>Dynamic Content</h1>';
</script>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("javascript-content.pdf");

For complex SPAs, use longer delays or wait for specific elements.

How Do I Wait for Specific Elements?

Wait for elements to appear before rendering:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;

// Wait for a specific element
renderer.RenderingOptions.WaitFor.HtmlElementById("chart-loaded");

// Or wait for any element matching a selector
renderer.RenderingOptions.WaitFor.HtmlQuerySelector(".data-table");

var pdf = renderer.RenderUrlAsPdf("https://dashboard.example.com");

This ensures charts, tables, and async-loaded content are fully rendered.

How Do I Use Async Rendering?

For batch processing, use async methods:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

public async Task<PdfDocument> GeneratePdfAsync(string html)
{
    var renderer = new ChromePdfRenderer();
    return await renderer.RenderHtmlAsPdfAsync(html);
}

// Process multiple documents concurrently
var tasks = htmlDocuments.Select(html => GeneratePdfAsync(html));
var pdfs = await Task.WhenAll(tasks);

Async rendering is non-blocking and scales well for web applications.

How Do I Handle Web Fonts?

Chrome loads web fonts automatically:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<html>
<head>
    <link href='https://fonts.googleapis.com/css2?family=Roboto&display=swap' rel='stylesheet'>
    <style>
        body { font-family: 'Roboto', sans-serif; }
    </style>
</head>
<body>
    <h1>Custom Web Fonts</h1>
    <p>This text uses Roboto from Google Fonts.</p>
</body>
</html>";

// Allow time for fonts to load
renderer.RenderingOptions.WaitFor.RenderDelay(300);

var pdf = renderer.RenderHtmlAsPdf(html);

How Do I Match Chrome's Print Preview?

Get output identical to Chrome's print dialog:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// Use Chrome's default print settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Respect @page CSS rules
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = true;

var pdf = renderer.RenderHtmlAsPdf(html);

The Print media type applies print stylesheets, hiding navigation and other screen-only elements.

How Do I Set the Viewport?

Control the rendering viewport:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// Desktop viewport
renderer.RenderingOptions.ViewPortWidth = 1280;

// Mobile viewport
renderer.RenderingOptions.ViewPortWidth = 375;

// Tablet viewport
renderer.RenderingOptions.ViewPortWidth = 768;

var pdf = renderer.RenderHtmlAsPdf(responsiveHtml);

This affects responsive CSS breakpoints and layout calculations.

How Do I Handle CSS3 Features?

Chrome supports modern CSS:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .flex-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card {
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
</style>

<div class='grid-container'>
    <div class='card'>Grid Item 1</div>
    <div class='card'>Grid Item 2</div>
    <div class='card'>Grid Item 3</div>
</div>";

var pdf = renderer.RenderHtmlAsPdf(html);

Flexbox, Grid, gradients, shadows, transforms—all work as expected.

How Do I Render Charts and Graphs?

JavaScript charting libraries work with Chrome:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.RenderDelay(1000); // Wait for chart animation

var html = @"
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<canvas id='myChart' width='400' height='200'></canvas>
<script>
    new Chart(document.getElementById('myChart'), {
        type: 'bar',
        data: {
            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
            datasets: [{
                label: 'Revenue',
                data: [12, 19, 3, 5]
            }]
        }
    });
</script>";

var pdf = renderer.RenderHtmlAsPdf(html);

How Do I Troubleshoot Rendering Issues?

Debug rendering problems:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// Enable logging
renderer.RenderingOptions.EnableJavaScript = true;

// Take a screenshot instead of PDF for debugging
renderer.RenderingOptions.ViewPortWidth = 1920;
renderer.RenderingOptions.ViewPortHeight = 1080;

// Render and check console output
var pdf = renderer.RenderHtmlAsPdf(html);

// Save for visual inspection
pdf.SaveAs("debug-output.pdf");

Check that JavaScript errors aren't preventing content from loading.

Quick Reference

Method	Source
`RenderHtmlAsPdf()`	HTML string
`RenderHtmlFileAsPdf()`	Local HTML file
`RenderUrlAsPdf()`	Web URL
`RenderHtmlAsPdfAsync()`	Async HTML string

Rendering Option	Purpose
`EnableJavaScript`	Execute JS before rendering
`WaitFor.RenderDelay()`	Wait milliseconds
`WaitFor.HtmlElementById()`	Wait for element
`ViewPortWidth`	Set browser width
`CssMediaType`	Print or Screen styles
`PrintHtmlBackgrounds`	Include background colors

The Chrome engine handles everything a modern browser can—from simple static pages to complex JavaScript applications.

For more rendering options, see the IronPDF Chrome rendering engine documentation.

*Written by Jacob Mellor, CTO at Iron Software. Jacob created

DEV Community