1. IronPDF
  2. Tutoriais
  3. Elemento HTML para PDF

Como Converter Elementos HTML e Seções Parciais de Página em PDF em C

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

IronPDF não expõe um método embutido SelectElement ou SelectCss para direcionar elementos HTML específicos. O ChromePdfRenderer renderiza documentos HTML completos — uma página inteira, um URL completo, uma string HTML completa. Para produzir um PDF de uma seção específica de uma página, isolamos o elemento alvo antes de renderizar usando uma das quatro abordagens: manipulação do DOM com JavaScript, injeção de CSS, extração de fragmentos HTML no servidor, ou renderização de URL com direcionamento por JS.

Cada abordagem se adequa a uma restrição diferente. A isolação do DOM com JavaScript funciona ao renderizar URLs ou páginas completas onde precisamos remover tudo exceto o alvo. A injeção de CSS oculta o conteúdo indesejado sem alterar o DOM. A extração no servidor fornece o resultado mais limpo quando temos acesso ao HTML bruto. A renderização de URL com direcionamento por JS lida com dashboards ao vivo e páginas de terceiros onde o HTML de origem não está disponível.

Comece um teste gratuito de 30 dias para testar todas as quatro abordagens.

Guia Rápido: Extrair um Elemento HTML Específico como PDF

Direcione qualquer elemento por seletor CSS usando isolação DOM com JavaScript e WaitFor, em seguida, renderize apenas aquele fragmento para PDF.

  1. Instale IronPDF com o Gerenciador de Pacotes NuGet

    PM > Install-Package IronPdf

  2. Copie e execute este trecho de código.

    using IronPdf;

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.JavaScript = @"
    var target = document.querySelector('#invoice-summary');
    document.body.innerHTML = target.outerHTML;
";
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000);

var pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-summary.pdf");

  3. Implante para testar em seu ambiente de produção.

    Comece a usar IronPDF em seu projeto hoje com uma avaliação gratuita

    arrow pointer

Fluxo de Trabalho Mínimo (3 Passos)

  1. Instale o IronPDF via NuGet: Install-Package IronPdf
  2. Configure ChromePdfRenderOptions.JavaScript para isolar o elemento alvo e WaitFor para garantir que ele exista
  3. Chame RenderHtmlAsPdf() ou RenderUrlAsPdf() — o PDF contém apenas o conteúdo isolado

Como Isolar Elementos com Manipulação DOM em JavaScript?

A propriedade ChromePdfRenderOptions.JavaScript aceita uma string de JavaScript que executa após o carregamento do HTML, mas antes da renderização do PDF. Substituindo document.body.innerHTML pelo outerHTML do elemento alvo, removemos todo o resto da página renderizada. Esta é a abordagem mais versátil — funciona com ambos RenderHtmlAsPdf() e RenderUrlAsPdf().

O método WaitFor.HtmlQuerySelector() garante que o elemento alvo exista no DOM antes que o JavaScript seja executado. Isso é crítico para páginas com conteúdo assíncrono — componentes React, templates Angular, ou dados trazidos por API que se carregam após o carregamento inicial da página.

using IronPdf;

string fullPageHtml = @"
<html>
<body>
    <header><h1>Acme Corp Invoice</h1></header>
    <nav>Navigation links...</nav>
    <div id='invoice-summary'>
        <h2>Invoice #12345</h2>
        <table>
            <tr><td>Widget A</td><td>$49.99</td></tr>
            <tr><td>Widget B</td><td>$29.99</td></tr>
            <tr><td><strong>Total</strong></td><td><strong>$79.98</strong></td></tr>
        </table>
    </div>
    <footer>Footer content...</footer>
</body>
</html>";

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

// Replace the body with only the target element
renderer.RenderingOptions.JavaScript = @"
    var el = document.querySelector('#invoice-summary');
    if (el) {
        document.body.innerHTML = el.outerHTML;
    }
";

// Wait for the target element to exist before JS executes
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-summary-only.pdf");
using IronPdf;

string fullPageHtml = @"
<html>
<body>
    <header><h1>Acme Corp Invoice</h1></header>
    <nav>Navigation links...</nav>
    <div id='invoice-summary'>
        <h2>Invoice #12345</h2>
        <table>
            <tr><td>Widget A</td><td>$49.99</td></tr>
            <tr><td>Widget B</td><td>$29.99</td></tr>
            <tr><td><strong>Total</strong></td><td><strong>$79.98</strong></td></tr>
        </table>
    </div>
    <footer>Footer content...</footer>
</body>
</html>";

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

// Replace the body with only the target element
renderer.RenderingOptions.JavaScript = @"
    var el = document.querySelector('#invoice-summary');
    if (el) {
        document.body.innerHTML = el.outerHTML;
    }
";

// Wait for the target element to exist before JS executes
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-summary-only.pdf");
Imports IronPdf

Dim fullPageHtml As String = "
<html>
<body>
    <header><h1>Acme Corp Invoice</h1></header>
    <nav>Navigation links...</nav>
    <div id='invoice-summary'>
        <h2>Invoice #12345</h2>
        <table>
            <tr><td>Widget A</td><td>$49.99</td></tr>
            <tr><td>Widget B</td><td>$29.99</td></tr>
            <tr><td><strong>Total</strong></td><td><strong>$79.98</strong></td></tr>
        </table>
    </div>
    <footer>Footer content...</footer>
</body>
</html>"

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.EnableJavaScript = True

' Replace the body with only the target element
renderer.RenderingOptions.JavaScript = "
    var el = document.querySelector('#invoice-summary');
    if (el) {
        document.body.innerHTML = el.outerHTML;
    }
"

' Wait for the target element to exist before JS executes
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fullPageHtml)
pdf.SaveAs("invoice-summary-only.pdf")
$vbLabelText   $csharpLabel

O JavaScript substitui todo o corpo pelo #invoice-summary div's outerHTML. O PDF resultante contém apenas a tabela da fatura — sem cabeçalho, sem navegação, sem rodapé. O método WaitFor.HtmlElementById() fornece uma alternativa mais simples ao direcionar por ID:

// Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000);
// Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000);
' Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000)
$vbLabelText   $csharpLabel

Para seletores complexos (nomes de classe, atributos de dados, elementos aninhados), HtmlQuerySelector() aceita qualquer string de seletor CSS válida que document.querySelector() aceitaria. Métodos WaitFor adicionais incluem HtmlElementByClassName(), HtmlElementByName(), e HtmlElementByTagName() — cada um delega internamente para HtmlQuerySelector(), mas proporciona uma intenção mais clara no código.

Quando o elemento alvo depende de estilos herdados de contêineres pais, a substituição outerHTML pode perder regras CSS que dependem de seletores de ancestrais (e.g., .dashboard .widget table { ... }). Para preservar isso, copie as <style> e <link> tags relevantes do <head> para a isolação JS:

renderer.RenderingOptions.JavaScript = @"
    var el = document.querySelector('#invoice-summary');
    if (el) {
        var head = document.head.innerHTML;
        document.body.innerHTML = el.outerHTML;
        document.head.innerHTML = head;
    }
";
renderer.RenderingOptions.JavaScript = @"
    var el = document.querySelector('#invoice-summary');
    if (el) {
        var head = document.head.innerHTML;
        document.body.innerHTML = el.outerHTML;
        document.head.innerHTML = head;
    }
";
renderer.RenderingOptions.JavaScript = "
    var el = document.querySelector('#invoice-summary');
    if (el) {
        var head = document.head.innerHTML;
        document.body.innerHTML = el.outerHTML;
        document.head.innerHTML = head;
    }
"
$vbLabelText   $csharpLabel

Isso retém o conteúdo original <head> (folhas de estilo, fontes, meta tags) enquanto substitui apenas o corpo. O JavaScript para PDF como fazer e o Como fazer WaitFor cobrem opções de configuração adicionais, incluindo NetworkIdle0() para páginas com múltiplas fontes de dados assíncronos.

Como Isolar Elementos com Injeção de CSS?

A propriedade ChromePdfRenderOptions.CustomCssUrl aceita um caminho de arquivo ou URL para uma folha de estilos que IronPDF aplica antes de renderizar. Em vez de manipular o DOM, ocultamos tudo exceto o elemento alvo usando display: none de CSS. Isso preserva a estrutura original do DOM e evita a execução de JavaScript inteiramente.

using IronPdf;

// Create a CSS file that hides everything except #invoice-summary
string cssContent = @"
body > *:not(#invoice-summary) {
    display: none !important;
}
#invoice-summary {
    display: block !important;
    margin: 0;
    padding: 20px;
}
";
File.WriteAllText("isolate-element.css", cssContent);

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CustomCssUrl = "isolate-element.css";

PdfDocument pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-css-isolated.pdf");
using IronPdf;

// Create a CSS file that hides everything except #invoice-summary
string cssContent = @"
body > *:not(#invoice-summary) {
    display: none !important;
}
#invoice-summary {
    display: block !important;
    margin: 0;
    padding: 20px;
}
";
File.WriteAllText("isolate-element.css", cssContent);

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CustomCssUrl = "isolate-element.css";

PdfDocument pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-css-isolated.pdf");
Imports IronPdf
Imports System.IO

' Create a CSS file that hides everything except #invoice-summary
Dim cssContent As String = "
body > *:not(#invoice-summary) {
    display: none !important;
}
#invoice-summary {
    display: block !important;
    margin: 0;
    padding: 20px;
}
"
File.WriteAllText("isolate-element.css", cssContent)

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.CustomCssUrl = "isolate-element.css"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fullPageHtml)
pdf.SaveAs("invoice-css-isolated.pdf")
$vbLabelText   $csharpLabel

Nota: A propriedade CustomCssUrl só funciona com RenderHtmlAsPdf() ao renderizar a partir de strings HTML. Para renderização de URLs, incorpore a injeção CSS na propriedade JavaScript em vez disso:

renderer.RenderingOptions.JavaScript = @"
    var style = document.createElement('style');
    style.textContent = 'body > *:not(#invoice-summary) { display: none !important; }';
    document.head.appendChild(style);
";
renderer.RenderingOptions.JavaScript = @"
    var style = document.createElement('style');
    style.textContent = 'body > *:not(#invoice-summary) { display: none !important; }';
    document.head.appendChild(style);
";
renderer.RenderingOptions.JavaScript = "
    var style = document.createElement('style');
    style.textContent = 'body > *:not(#invoice-summary) { display: none !important; }';
    document.head.appendChild(style);
"
$vbLabelText   $csharpLabel

Quando controlamos o HTML de origem, as regras @media print oferecem a alternativa mais leve — sem dependências externas, sem injeção em runtime:

@media print {
    header, nav, footer, .sidebar { display: none !important; }
    #invoice-summary { width: 100%; margin: 0; }
}

Defina CssMediaType para PdfCssMediaType.Print no renderizador para ativar essas regras:

renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print
$vbLabelText   $csharpLabel

Isso é ideal para cenários de impressão de seções de formulário onde o aplicativo já define layouts específicos para impressão. Formulários de sinistro de seguros, assistentes multi-etapas, e resumos de checkout comumente usam regras @media print para ocultar navegações e indicadores de progresso enquanto expandem a seção de conteúdo relevante para largura total.

A abordagem CSS tem uma limitação importante: elementos ocultos ainda ocupam espaço no fluxo do documento se display: none for usado no nível de especificidade errado. Sempre use !important para substituir estilos de frameworks (Bootstrap, Tailwind) que podem reexibir elementos em certos pontos de quebra. Para alvos profundamente aninhados, um seletor mais preciso evita ouclusão de forma colateral:

body > *:not(#target),
body > *:not(#target) ~ * {
    display: none !important;
}

Como Extrair Fragmentos HTML no Servidor?

Quando temos acesso ao HTML bruto — lendo de um arquivo, um banco de dados, um CMS, ou uma resposta HTTP — a abordagem mais limpa é extrair o elemento alvo no servidor usando um parser HTML, em seguida passar o fragmento para RenderHtmlAsPdf(). Sem JavaScript, sem injeção de CSS, sem manipulação DOM em runtime.

AngleSharp é o parser HTML padrão .NET para este padrão:

using IronPdf;
using AngleSharp;
using AngleSharp.Html.Parser;

string fullPageHtml = @"
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; }
        td, th { border: 1px solid #ddd; padding: 8px; text-align: left; }
    </style>
</head>
<body>
    <header><h1>Dashboard</h1></header>
    <div id='revenue-widget'>
        <h3>Q4 Revenue</h3>
        <table>
            <tr><th>Month</th><th>Revenue</th></tr>
            <tr><td>October</td><td>$1.2M</td></tr>
            <tr><td>November</td><td>$1.5M</td></tr>
            <tr><td>December</td><td>$1.8M</td></tr>
        </table>
    </div>
    <div id='other-content'>Other widgets...</div>
</body>
</html>";

// Parse and extract the target element
var parser = new HtmlParser();
var document = parser.ParseDocument(fullPageHtml);
var targetElement = document.QuerySelector("#revenue-widget");

if (targetElement is null)
{
    Console.WriteLine("Target element not found.");
    return;
}

// Wrap the fragment in a minimal HTML document to preserve styles
string fragmentHtml = $@"
<html>
<head>
    <style>
        table {{ border-collapse: collapse; width: 100%; }}
        td, th {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
    </style>
</head>
<body>
    {targetElement.OuterHtml}
</body>
</html>";

var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml);
pdf.SaveAs("revenue-widget.pdf");
using IronPdf;
using AngleSharp;
using AngleSharp.Html.Parser;

string fullPageHtml = @"
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; }
        td, th { border: 1px solid #ddd; padding: 8px; text-align: left; }
    </style>
</head>
<body>
    <header><h1>Dashboard</h1></header>
    <div id='revenue-widget'>
        <h3>Q4 Revenue</h3>
        <table>
            <tr><th>Month</th><th>Revenue</th></tr>
            <tr><td>October</td><td>$1.2M</td></tr>
            <tr><td>November</td><td>$1.5M</td></tr>
            <tr><td>December</td><td>$1.8M</td></tr>
        </table>
    </div>
    <div id='other-content'>Other widgets...</div>
</body>
</html>";

// Parse and extract the target element
var parser = new HtmlParser();
var document = parser.ParseDocument(fullPageHtml);
var targetElement = document.QuerySelector("#revenue-widget");

if (targetElement is null)
{
    Console.WriteLine("Target element not found.");
    return;
}

// Wrap the fragment in a minimal HTML document to preserve styles
string fragmentHtml = $@"
<html>
<head>
    <style>
        table {{ border-collapse: collapse; width: 100%; }}
        td, th {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
    </style>
</head>
<body>
    {targetElement.OuterHtml}
</body>
</html>";

var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml);
pdf.SaveAs("revenue-widget.pdf");
Imports IronPdf
Imports AngleSharp
Imports AngleSharp.Html.Parser

Dim fullPageHtml As String = "
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; }
        td, th { border: 1px solid #ddd; padding: 8px; text-align: left; }
    </style>
</head>
<body>
    <header><h1>Dashboard</h1></header>
    <div id='revenue-widget'>
        <h3>Q4 Revenue</h3>
        <table>
            <tr><th>Month</th><th>Revenue</th></tr>
            <tr><td>October</td><td>$1.2M</td></tr>
            <tr><td>November</td><td>$1.5M</td></tr>
            <tr><td>December</td><td>$1.8M</td></tr>
        </table>
    </div>
    <div id='other-content'>Other widgets...</div>
</body>
</html>"

' Parse and extract the target element
Dim parser As New HtmlParser()
Dim document = parser.ParseDocument(fullPageHtml)
Dim targetElement = document.QuerySelector("#revenue-widget")

If targetElement Is Nothing Then
    Console.WriteLine("Target element not found.")
    Return
End If

' Wrap the fragment in a minimal HTML document to preserve styles
Dim fragmentHtml As String = $"
<html>
<head>
    <style>
        table {{ border-collapse: collapse; width: 100%; }}
        td, th {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
    </style>
</head>
<body>
    {targetElement.OuterHtml}
</body>
</html>"

Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml)
pdf.SaveAs("revenue-widget.pdf")
$vbLabelText   $csharpLabel

O detalhe chave é envolver o fragmento extraído em um documento HTML completo com as tags <style> ou <link> relevantes. Sem esse invólucro, estilos inline são renderizados corretamente, mas folhas de estilo externas e regras CSS herdadas são perdidas. Para renderização de pré-visualização de templates de email — onde o HTML do template já está armazenado como uma string — esse padrão de extração dá resultados com precisão de pixel porque controlamos todos os aspectos do conteúdo renderizado.

O mesmo padrão funciona com HtmlAgilityPack como um parser alternativo:

using HtmlAgilityPack;
using IronPdf;

var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(fullPageHtml);

var targetNode = htmlDoc.DocumentNode.SelectSingleNode("//*[@id='revenue-widget']");
if (targetNode is null)
{
    Console.WriteLine("Target element not found.");
    return;
}

string fragmentHtml = $"<html><body>{targetNode.OuterHtml}</body></html>";

var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml);
pdf.SaveAs("revenue-widget-hap.pdf");
using HtmlAgilityPack;
using IronPdf;

var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(fullPageHtml);

var targetNode = htmlDoc.DocumentNode.SelectSingleNode("//*[@id='revenue-widget']");
if (targetNode is null)
{
    Console.WriteLine("Target element not found.");
    return;
}

string fragmentHtml = $"<html><body>{targetNode.OuterHtml}</body></html>";

var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml);
pdf.SaveAs("revenue-widget-hap.pdf");
Imports HtmlAgilityPack
Imports IronPdf

Dim htmlDoc As New HtmlDocument()
htmlDoc.LoadHtml(fullPageHtml)

Dim targetNode = htmlDoc.DocumentNode.SelectSingleNode("//*[@id='revenue-widget']")
If targetNode Is Nothing Then
    Console.WriteLine("Target element not found.")
    Return
End If

Dim fragmentHtml As String = $"<html><body>{targetNode.OuterHtml}</body></html>"

Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml)
pdf.SaveAs("revenue-widget-hap.pdf")
$vbLabelText   $csharpLabel

A escolha entre AngleSharp e HtmlAgilityPack é principalmente uma questão de preferência. AngleSharp usa seletores CSS (QuerySelector), o que se alinha com modelos mentais de desenvolvedores frontend. HtmlAgilityPack usa XPath (SelectSingleNode), o que é mais familiar em bases de código .NET pesadas em XML.

Para renderização de pré-visualização de templates de email — onde HTML do template é armazenado como string em um banco de dados ou CMS — a extração no servidor fornece resultados com precisão de pixel porque controlamos todos os aspectos do conteúdo renderizado. Também podemos usar RenderHtmlAsPdf(string Html, string BaseUrlOrPath) com o segundo parâmetro apontando para um diretório de ativos local, garantindo que imagens e folhas de estilo referenciadas por caminhos relativos sejam resolvidas corretamente:

PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml, "C:\templates\assets\")
$vbLabelText   $csharpLabel

O compensação em relação à isolação DOM com JavaScript é que a extração no servidor não consegue lidar com conteúdo que requer renderização do lado do cliente (elementos gerados por JavaScript, componentes SPA, dados buscados por API). Se o HTML contiver <div id="app"></div> que uma aplicação React ou Vue preenche em tempo de execução, o fragmento extraído ficará vazio. Para esses casos, use a Abordagem 1 ou 4.

Como Direcionar Elementos ao Renderizar URLs ao Vivo?

Para URLs ao vivo onde não podemos acessar o HTML de origem — dashboards de terceiros, relatórios externos, aplicativos hospedados — combinamos RenderUrlAsPdf() com a propriedade JavaScript e WaitFor para isolar uma seção específica após o carregamento da página.

Este é o cenário de exportação de widget de dashboard: uma ferramenta BI renderiza gráficos e tabelas em uma página web, e precisamos exportar um único widget como PDF para distribuição entre stakeholders.

using IronPdf;

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

// Wait for the dashboard widget to render (async content)
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("[data-widget='revenue-chart']", 15000);

// Isolate the widget after it renders
renderer.RenderingOptions.JavaScript = @"
    var widget = document.querySelector('[data-widget=""revenue-chart""]');
    if (widget) {
        // Preserve computed styles by cloning into a clean body
        document.body.innerHTML = '';
        document.body.appendChild(widget);
    }
";

PdfDocument pdf = renderer.RenderUrlAsPdf("https://dashboard.example.com/q4-report");
pdf.SaveAs("revenue-chart-export.pdf");
using IronPdf;

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

// Wait for the dashboard widget to render (async content)
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("[data-widget='revenue-chart']", 15000);

// Isolate the widget after it renders
renderer.RenderingOptions.JavaScript = @"
    var widget = document.querySelector('[data-widget=""revenue-chart""]');
    if (widget) {
        // Preserve computed styles by cloning into a clean body
        document.body.innerHTML = '';
        document.body.appendChild(widget);
    }
";

PdfDocument pdf = renderer.RenderUrlAsPdf("https://dashboard.example.com/q4-report");
pdf.SaveAs("revenue-chart-export.pdf");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.EnableJavaScript = True

' Wait for the dashboard widget to render (async content)
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("[data-widget='revenue-chart']", 15000)

' Isolate the widget after it renders
renderer.RenderingOptions.JavaScript = "
    var widget = document.querySelector('[data-widget=""revenue-chart""]);
    if (widget) {
        // Preserve computed styles by cloning into a clean body
        document.body.innerHTML = '';
        document.body.appendChild(widget);
    }
"

Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://dashboard.example.com/q4-report")
pdf.SaveAs("revenue-chart-export.pdf")
$vbLabelText   $csharpLabel

A chamada WaitFor.HtmlQuerySelector() garante que o widget exista no DOM antes da execução do JavaScript. O timeout de 15 segundos acomoda chamadas de API mais lentas que populam dados do dashboard. O JavaScript então reduz a página apenas ao widget.

Para páginas com dependências complexas de CSS, a abordagem appendChild (movendo o nó em vez de copiar seu outerHTML) preserva mais estilos computados porque o elemento retém sua posição no CSSOM. A abordagem de substituição innerHTML da Abordagem 1 é mais simples, mas pode perder estilos que dependem de seletores de ancestrais.

Quando a página alvo requer autenticação, configure cookies no renderizador antes de chamar RenderUrlAsPdf():

renderer.RenderingOptions.CustomCookies = new Dictionary<string, string>
{
    { "session_id", "abc123" },
    { "auth_token", "bearer-xyz" }
};
renderer.RenderingOptions.CustomCookies = new Dictionary<string, string>
{
    { "session_id", "abc123" },
    { "auth_token", "bearer-xyz" }
};
Imports System.Collections.Generic

renderer.RenderingOptions.CustomCookies = New Dictionary(Of String, String) From {
    {"session_id", "abc123"},
    {"auth_token", "bearer-xyz"}
}
$vbLabelText   $csharpLabel

A classe WaitFor oferece estratégias adicionais de espera além de HtmlQuerySelector(). NetworkIdle0() espera até que todas as requisições de rede sejam concluídas com zero conexões pendentes — útil para dashboards que carregam dados de múltiplos endpoints de API. NetworkIdle2() tolera até duas conexões pendentes, que lida com páginas com conexões WebSocket persistentes ou long-polling. JavaScript() espera que a página chame window.ironpdf.notifyRender() — a opção mais precisa quando controlamos a página alvo e podemos sinalizar prontidão para renderização explicitamente após todos os dados carregarem e animações completarem.

Para exportações recorrentes de dashboard (e.g., geração de PDF noturna para distribuição por email para stakeholders), envolva a renderização em um loop de tentativa que captura exceções de timeout. Se WaitFor exceder seu maxWaitTime, o IronPDF procede com a renderização de qualquer conteúdo disponível — que pode estar incompleto. Aumentar o timeout ou mudar para NetworkIdle0() tipicamente resolve falhas intermitentes em redes mais lentas.

Comparação de Todas as Quatro Abordagens

Abordagem Ideal para Requer HTML de Fonte Dependência de JS Complexidade
Isolação DOM com JavaScript Extração de elementos de uso geral de qualquer fonte Não Sim Médio
Injeção de CSS Ocultando seções sem mudanças no DOM; Layouts @media print Parcial (CustomCssUrl precisa de RenderHtmlAsPdf) Não (a menos que injete via JS para URLs) Baixo
Extração de Fragmentos no Servidor Conteúdo CMS, templates armazenados, pré-visualizações de email Sim Não Baixo–Médio
Renderização de URL com Direcionamento por JS Dashboards ao vivo, páginas de terceiros, widgets SPA Não Sim Médio–Alto

Escolhendo a Abordagem Certa

A decisão depende de dois fatores: se temos acesso ao HTML bruto, e se o conteúdo alvo requer JavaScript para renderizar.

Extração de itens de linha de fatura é o caso de uso mais comum. Quando o HTML da fatura é gerado no servidor (visões Razor, templates Handlebars, strings HTML armazenadas), a Abordagem 3 (extração no servidor) dá o resultado mais limpo com zero de sobrecarga em runtime. Extraia a tabela #line-items, envolva-a em um invólucro HTML estilizado e renderize.

Exportação de widget de dashboard requer execução de JavaScript porque o conteúdo do widget é populado por chamadas de API após o carregamento inicial da página. A Abordagem 1 (isolação DOM com JS) lida com isso quando o dashboard roda localmente ou atrás de autenticação. A Abordagem 4 (renderização de URL com direcionamento por JS) é necessária quando o dashboard é um aplicativo hospedado por terceiros onde só temos o URL.

Impressão de seções de formulário — extraindo uma seção específica de um formulário de várias etapas para revisão do usuário ou arquivamento de conformidade — mapeia naturalmente para a Abordagem 2 (injeção de CSS) quando o aplicativo já define regras @media print, ou a Abordagem 3 quando o HTML do formulário é montado no servidor.

Renderização de pré-visualização de template de email — gerando uma pré-visualização em PDF de um template de email HTML antes de enviar — é um cenário puramente da Abordagem 3. O HTML do template é uma string armazenada, recursos externos (imagens, fontes) estão hospedados em URLs conhecidos, e o parâmetro BaseUrlOrPath no RenderHtmlAsPdf() resolve todos os caminhos relativos.

Para aplicativos que precisam suportar múltiplos cenários, encapsule a lógica de renderização por trás de uma interface de serviço que aceita um parâmetro de estratégia:

public enum ElementExtractionStrategy
{
    JavaScriptIsolation,
    CssInjection,
    ServerSideExtraction,
    UrlWithJsTargeting
}
public enum ElementExtractionStrategy
{
    JavaScriptIsolation,
    CssInjection,
    ServerSideExtraction,
    UrlWithJsTargeting
}
Public Enum ElementExtractionStrategy
    JavaScriptIsolation
    CssInjection
    ServerSideExtraction
    UrlWithJsTargeting
End Enum
$vbLabelText   $csharpLabel

Isso permite que o código chamador selecione a abordagem adequada com base no tipo de entrada sem duplicar a configuração do renderizador.

Próximos passos

A isolação de elemento HTML no IronPDF é uma preocupação em tempo de renderização, não um recurso de API embutido. As quatro abordagens acima cobrem o espectro completo — de extração de templates no servidor (zero JS, saída mais limpa) para direcionamento de URL ao vivo (execução completa de JS, lida com SPAs e conteúdo assíncrono). A tabela de comparação fornece uma referência rápida, e os cenários do mundo real mapeiam requisitos de negócios comuns para a estratégia apropriada.

Algumas considerações adicionais para implantações em produção:

Desempenho: A extração no servidor (Abordagem 3) é a mais rápida porque ignora completamente a execução de JavaScript. As abordagens baseadas em JavaScript (1 e 4) adicionam sobrecarga proporcional à complexidade da página e ao timeout WaitFor. Para processamento em lote (e.g., gerando 500 PDFs de fatura), a extração no servidor com Parallel.ForEach e várias instâncias ChromePdfRenderer fornece a melhor taxa de transferência.

Depuração: Quando a saída do PDF está em branco ou faltando conteúdo, habilite EnableJavaScript = true e aumente o timeout WaitFor. Se o elemento alvo depende de dados assíncronos, WaitFor.NetworkIdle0() é mais confiável do que um RenderDelay fixo. O guia de opções de renderização cobre largura da viewport e configurações de ajuste de papel que afetam o layout.

Combinando abordagens: Nada impede a mistura de estratégias. Podemos usar extração no servidor para construir um documento HTML composto a partir de múltiplos fragmentos (cabeçalho de uma fonte, tabela de dados de outra, SVG de gráfico de uma terceira), em seguida, renderizar o documento montado como um único PDF. O método RenderHtmlAsPdf(string Html, string BaseUrlOrPath) resolve caminhos relativos de ativos a partir do URL base, tornando simples a composição de documentos de fontes heterogêneas.

Explore o como fazer JavaScript para PDF para padrões avançados de execução de JS, a documentação do WaitFor para todas as estratégias de espera disponíveis, o guia de opções de renderização para a superfície ChromePdfRenderOptions completa, e o exemplo de código JavaScript customizado para snippets prontos para execução.

Veja opções de licenciamento começando em $749. A referência de API ChromePdfRenderOptions e a referência de API WaitFor documentam todas as propriedades e métodos.

Perguntas frequentes

Quais são as principais abordagens para converter elementos HTML em PDF em C#?

As principais abordagens incluem isolamento de JS, ocultação de CSS, extração no lado do servidor e direcionamento de URL em tempo real, todas as quais podem ser implementadas usando o IronPDF.

Como funciona o isolamento de JS no contexto da conversão de HTML para PDF?

O isolamento de JS envolve a execução de JavaScript para manipular dinamicamente o documento HTML antes de convertê-lo em PDF. Isso pode ser feito usando o IronPDF para garantir que apenas elementos específicos sejam renderizados.

O que é ocultação CSS e como ela é usada na conversão de PDF?

O recurso de ocultação com CSS envolve o uso de estilos CSS para ocultar elementos que não devem aparecer no PDF. O IronPDF oferece suporte a essa funcionalidade, permitindo que os desenvolvedores especifiquem folhas de estilo ou regras de estilo durante o processo de conversão.

O IronPDF consegue extrair elementos HTML específicos no servidor para geração de PDFs?

Sim, o IronPDF pode extrair elementos HTML específicos no servidor, permitindo um controle preciso sobre quais partes de uma página da web serão convertidas em PDF.

Qual a vantagem de usar URLs em tempo real na conversão de HTML para PDF?

O recurso de direcionamento por URL em tempo real permite que o IronPDF converta elementos de uma URL de página da web diretamente para PDF, garantindo que o conteúdo mais atualizado seja capturado sem a necessidade de arquivos HTML locais.

É possível converter apenas uma seção de uma página da web para PDF usando o IronPDF?

Sim, o IronPDF oferece a funcionalidade de converter seções ou elementos específicos de uma página da web em PDF, facilitando o foco no conteúdo relevante.

Como o IronPDF lida com conteúdo dinâmico durante a conversão de HTML para PDF?

O IronPDF consegue renderizar conteúdo dinâmico executando JavaScript durante a conversão, garantindo que os elementos que dependem de scripts do lado do cliente sejam representados com precisão no PDF.

Curtis Chau
Curtis Chau
  Converse agora mesmo com a equipe de engenharia.
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...

Leia mais
Pronto para começar?
Nuget Downloads 18,135,201 | Versão: 2026.4 acaba de ser lançado
Still Scrolling Icon

Ainda está rolando a tela?

Quer provas rápidas? PM > Install-Package IronPdf
executar um exemplo Veja seu HTML se transformar em um PDF.