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

Como Converter Elementos HTML e Seções de Página Parcial 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

O IronPDF não expõe um método SelectElement ou SelectCss integrado para direcionar elementos HTML específicos. O ChromePdfRenderer renderiza documentos HTML completos — uma página inteira, uma URL completa, 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 DOM em JavaScript, injeção CSS, extração de fragmento HTML do lado do servidor ou renderização de URL com direcionamento via JS.

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

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

Início rápido: Extrair um Elemento HTML Específico como PDF

Selecione qualquer elemento por meio de um seletor CSS usando isolamento DOM em JavaScript e WaitFor, e então renderize apenas esse fragmento em 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 Etapas)

  1. Instale IronPdf via NuGet: Install-Package IronPdf
  2. Configure ChromePdfRenderOptions.JavaScript para isolar o elemento alvo e WaitFor para garantir que ele exista.
  3. Ligue para 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 é executada após o carregamento do HTML, mas antes da renderização do PDF. Ao substituir document.body.innerHTML por outerHTML do elemento alvo, removemos todo o resto da página renderizada. Esta é a abordagem mais versátil — funciona tanto com RenderHtmlAsPdf() quanto com RenderUrlAsPdf().

O método WaitFor.HtmlQuerySelector() garante que o elemento alvo exista no DOM antes da execução do JavaScript . Isso é crítico para páginas com conteúdo assíncrono — componentes React, templates Angular ou dados guiados por API que populam 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 conteúdo da div #invoice-summary outerHTML. O PDF resultante contém apenas a tabela de fatura — sem cabeçalho, sem navegação, sem rodapé. O método WaitFor.HtmlElementById() oferece uma alternativa mais simples ao segmentar 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 de conveniência adicionais WaitFor incluem HtmlElementByClassName(), HtmlElementByName() e HtmlElementByTagName() — cada um delega internamente para HtmlQuerySelector(), mas fornece uma intenção mais clara no código.

Quando o elemento de destino depende de estilos herdados de contêineres pai, a substituição outerHTML pode perder regras CSS que dependem de seletores ancestrais (por exemplo, .dashboard .widget table { ... }). Para preservar esses elementos, copie as tags relevantes

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.