1. IronPDF
  2. Tutoriais
  3. JavaScript (Atrasos de renderização personalizados)
Como usar JavaScript com HTML para gerar PDF usando C#

Como usar JavaScript com HTML para 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 permite a execução de JavaScript durante a conversão de HTML para PDF usando seu mecanismo de renderização Chromium. Converta conteúdo web dinâmico, incluindo JavaScript e jQuery, em documentos PDF em aplicações .NET C#, com suporte para elementos interativos e renderização dinâmica.

JavaScript é uma linguagem de programação versátil e de alto nível usada no desenvolvimento web. Isso possibilita recursos interativos e dinâmicos em sites. jQuery é uma biblioteca JavaScript que simplifica tarefas comuns como manipulação do DOM, tratamento de eventos e requisições AJAX.

O IronPDF oferece suporte a JavaScript por meio do mecanismo de renderização Chromium . Este artigo demonstra como usar JavaScript e jQuery na conversão de HTML para PDF em projetos .NET C#. A IronPDF oferece um período de teste IronPDF para experimentação. Para depurar HTML antes da conversão, consulte nosso guia sobre como depurar HTML com o Chrome .

Início rápido: Converter HTML com JavaScript para PDF em .NET

Converter páginas HTML que incluem JavaScript para PDF usando o IronPDF em projetos .NET . Com o suporte do mecanismo de renderização Chromium, todos os elementos JavaScript são processados ​​com precisão. Este exemplo mostra como renderizar uma página da web em PDF com conteúdo dinâmico. Uma única chamada de método renderiza e salva seu documento PDF.

  1. Instale IronPDF com o Gerenciador de Pacotes NuGet

    PM > Install-Package IronPdf

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

    new IronPdf.ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true, WaitFor = IronPdf.Rendering.WaitFor.JavaScript() } }
    .RenderHtmlAsPdf("<h1>Start</h1><script>document.write('<h1>Generated by JS</h1>');window.ironpdf.notifyRender();</script>")
    .SaveAs("js-rendered.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

Como configuro o fluxo de trabalho básico?

  1. Baixe a biblioteca C# : Converter HTML para PDF
  2. Habilitar a execução de JavaScript : Use a propriedade EnableJavaScript
  3. Renderizar de HTML para PDF : Garantir que o código JavaScript seja compatível.
  4. Execute JavaScript personalizado : Dentro do seu código .NET C#
  5. Capturar mensagens do console : usando um ouvinte de mensagens JavaScript

Como faço para renderizar o JavaScript ao converter HTML para PDF?

O JavaScript em HTML é suportado ao converter para PDF. Como a renderização ocorre imediatamente, o JavaScript pode não ser executado corretamente. Configure a classe WaitFor nas opções de renderização para permitir tempo de execução do JavaScript . O código a seguir usa WaitFor.JavaScript com um tempo máximo de espera de 500 ms. Para obter detalhes sobre tempos de espera e atrasos de renderização, consulte nosso guia sobre como usar WaitFor para atrasar a renderização de PDF .

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-javascript.cs
using IronPdf;

string htmlWithJavaScript = @"<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript);

// Export PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf");
Imports IronPdf

Private htmlWithJavaScript As String = "<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript)

' Export PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf")
$vbLabelText   $csharpLabel

Por que o WaitFor é importante para a execução do JavaScript ?

Frameworks JavaScript complexos podem exigir ajustes na alocação de memória devido à memória de execução JavaScript limitada no .NET. WaitFor oferece opções para garantir a execução completa do JavaScript antes da geração do PDF. Aguarde a execução do JavaScript , estados de ociosidade da rede, elementos HTML ou atrasos de renderização personalizados. Saiba mais sobre as opções de renderização disponíveis para otimizar a geração de PDFs.

Quando devo usar o método notifyRender?

O método window.ironpdf.notifyRender() sinaliza que a execução do JavaScript foi concluída, garantindo o tempo de renderização adequado para conteúdo dinâmico. Utilize-o para operações assíncronas ou animações que precisam ser concluídas antes da geração do PDF. O método funciona com as configurações WaitFor.JavaScript para um controle preciso de renderização.

Quais são os problemas comuns de renderização em JavaScript ?

Estruturas complexas podem exigir tempo de espera adicional ou alocação de memória. Os problemas comuns incluem:

  • Dados assíncronos não carregando antes da renderização
  • Animações CSS capturadas em plena transição
  • Erros de JavaScript impedem a renderização
  • Restrições de memória com frameworks pesados

Para solucionar problemas, habilite o registro personalizado para capturar detalhes do processo de renderização.

Como posso executar JavaScript personalizado antes da renderização do PDF?

Use a propriedade JavaScript nas opções de renderização para executar JavaScript personalizado antes da renderização. Isso é útil ao renderizar URLs onde a injeção de JavaScript não é possível. Atribua código JavaScript à propriedade JavaScript das opções de renderização. Combine com a geração assíncrona de PDFs para processar vários documentos.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-execute-javascript.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// JavaScript code
renderer.RenderingOptions.Javascript = @"
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>");

pdf.SaveAs("executed_js.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' JavaScript code
renderer.RenderingOptions.Javascript = "
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>")

pdf.SaveAs("executed_js.pdf")
$vbLabelText   $csharpLabel

Quando devo usar injeção de JavaScript personalizada?

A injeção personalizada de JavaScript funciona ao renderizar URLs onde a modificação do HTML de origem não é possível. Usos comuns:

  • Modificar páginas de terceiros antes da conversão
  • Adicionando marcas d'água ou cabeçalhos dinâmicos
  • Ocultar ou exibir elementos condicionalmente
  • Ajustando estilos para layouts de impressão
  • Extrair e reorganizar conteúdo

Que tipos de manipulação do DOM posso realizar?

Modifique estilos, adicione elementos, altere conteúdo ou execute operações DOM padrão antes da renderização. Exemplos:

  • Alterar propriedades CSS para formatação de impressão
  • Remover elementos de navegação ou anúncios
  • Adicione números de página ou cabeçalhos personalizados
  • Reestruturar o layout do conteúdo
  • Inserir dados ou metadados adicionais

Como capturar mensagens do console JavaScript durante a geração de PDFs?

O IronPDF captura mensagens do console JavaScript , incluindo registros de erros e mensagens personalizadas. Use a propriedade JavaScriptMessageListener para capturar mensagens. Este exemplo mostra o registro de texto personalizado e erros.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-message-listener.cs
using IronPdf;
using System;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = message => Console.WriteLine($"JS: {message}");
// Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");

//--------------------------------------------------//
// Error will be logged
// message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';";

// Render HTML to PDF
PdfDocument pdf2 = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");
Imports IronPdf
Imports System

Private renderer As New ChromePdfRenderer()

' Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = Sub(message) Console.WriteLine($"JS: {message}")
' Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")

'--------------------------------------------------//
' Error will be logged
' message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';"

' Render HTML to PDF
Dim pdf2 As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")
$vbLabelText   $csharpLabel

Console de depuração mostrando TypeError: Não é possível ler as propriedades de null (lendo 'style') com saída do console

Por que devo monitorar as mensagens do console JavaScript ?

O monitoramento do console ajuda a depurar erros de JavaScript e acompanhar a execução durante a geração de PDFs. Essencial para:

  • Identificar erros de JavaScript que impedem a renderização
  • Acompanhamento do progresso de operações complexas em JavaScript
  • Depuração de problemas de sincronização de código assíncrono
  • Validação da execução de JavaScript personalizado
  • Coletando métricas de desempenho do JavaScript

Que tipos de mensagens podem ser capturadas?

O ouvinte captura mensagens personalizadas do console.log e erros de JavaScript , incluindo:

  • Saídas do console: log(), info(), warn(), error()
  • Exceções não tratadas e erros de tempo de execução
  • Erros de rede devido a recursos com falha
  • Avisos de descontinuação do mecanismo do navegador
  • Informações de depuração personalizadas

Como criar gráficos com bibliotecas JavaScript como o D3.js?

O D3.js funciona bem com o IronPDF para criar gráficos ou imagens. D3.js ( Data-Driven Documents ) é uma biblioteca JavaScript para visualizações de dados dinâmicas e interativas usando SVG em HTML5 e CSS3. Consulte nosso guia sobre renderização de gráficos em PDFs para obter mais exemplos de bibliotecas de gráficos.

Para criar um gráfico em D3.js e convertê-lo em PDF:

  • Criar um objeto de renderização
  • Defina as propriedades JavaScript e CSS
  • Use RenderHTMLFileAsPdf para ler HTML
  • Salvar como PDF 
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-chart.cs
using IronPdf;

string html = @"
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(html);

// Export PDF
pdfJavaScript.SaveAs("renderChart.pdf");
Imports IronPdf

Private html As String = "
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(html)

' Export PDF
pdfJavaScript.SaveAs("renderChart.pdf")
$vbLabelText   $csharpLabel

Quais bibliotecas de gráficos funcionam melhor com o IronPDF?

Bibliotecas de gráficos JavaScript compatíveis com IronPDF:

  • Chart.js : Leve para gráficos básicos Highcharts : Gráficos profissionais com opções de personalização.
  • D3.js : Máxima flexibilidade para visualizações
  • C3.js : Gráficos reutilizáveis ​​baseados em D3
  • ApexCharts : Gráficos modernos com alto desempenho

Para obter sucesso, é necessário concluir a renderização do gráfico antes da geração do PDF, utilizando estratégias de espera adequadas.

Quando devo ajustar os tempos de espera para a renderização do gráfico?

Gráficos complexos com animações ou grandes conjuntos de dados exigem tempos de espera mais longos. Considerar:

  • O volume de dados afeta o tempo de processamento.
  • A duração da animação deve ser concluída
  • Solicitações de rede para dados assíncronos
  • A complexidade dos gráficos aumenta o processamento.

Como posso solucionar problemas de renderização de gráficos?

Consulte " Como usar a classe WaitFor para atrasar a renderização de PDFs em C# " para obter mais opções do WaitFor. Etapas de resolução de problemas:

  1. Aumentar o tempo de espera do JavaScript
  2. Use WaitFor.NetworkIdle() para carregamento assíncrono
  3. Desative as animações para a saída em PDF.
  4. Verifique o console em busca de erros de JavaScript.
  5. Teste o HTML primeiro no navegador.

Como faço para converter aplicativos AngularJS em PDF?

AngularJS é um framework front-end de código aberto baseado em JavaScript. Simplifica o desenvolvimento de aplicações de página única usando arquiteturas MVC e MVVM do lado do cliente. Veja nosso exemplo de código Angular para PDF para mais detalhes.

Para garantir a compatibilidade, utilize a renderização do lado do servidor (SSR) com o Angular Universal. Aplicações de página única (SPAs) exigem tratamento especial devido à geração de conteúdo dinâmico após o carregamento inicial.

Por que a renderização do lado do servidor é importante para PDFs em Angular?

O Angular do lado do cliente pode não renderizar corretamente sem SSR devido à dependência do JavaScript do navegador. Desafios:

  • HTML inicial mínimo com conteúdo dinâmico
  • Roteamento do lado do cliente não está presente em HTML estático
  • Vinculação de dados após o carregamento da página
  • Chamadas de API incompletas antes da geração do PDF

Quais são as limitações do Angular no lado do cliente?

O conteúdo dinâmico após o carregamento inicial pode não ser capturado sem uma configuração de espera adequada. Limitações:

  • Componentes carregados assincronamente
  • Módulos e rotas com carregamento lento
  • Animações e transições
  • Formas e interações dinâmicas
  • Atualizações de dados em tempo real

Use tempos de espera mais longos ou implemente window.ironpdf.notifyRender() em sua aplicação Angular.

Como funciona a renderização do lado do servidor com o Angular Universal?

Qual a diferença entre Angular e Angular Universal?

O Angular é executado no lado do cliente, no navegador, renderizando páginas no DOM com base nas ações do usuário. O Angular Universal é executado no servidor, gerando páginas estáticas que são inicializadas no cliente. Isso melhora o carregamento e permite a visualização do layout antes da interatividade completa.

Diferenças na geração de PDFs:

  • Angular : Requer execução de JavaScript
  • Angular Universal : Fornece HTML pré-renderizado
  • Desempenho : O Universal renderiza mais rápido
  • Confiabilidade : A Universal garante a disponibilidade do conteúdo.

Quando devo escolher o Angular Universal para geração de PDFs?

Use o Angular Universal para renderização de conteúdo dinâmico garantida, sem dependência de JavaScript no lado do cliente. Ideal para:

  • Relatórios com dados de API
  • Documentos que necessitam de formatação consistente
  • Geração de PDFs em grande volume
  • Aplicações Angular complexas
  • Problemas com o tempo limite de execução do JavaScript

O Angular Universal garante a renderização no servidor antes da conversão para IronPDF , eliminando problemas de sincronização e melhorando a confiabilidade.

Perguntas frequentes

Como habilitar o JavaScript ao converter HTML para PDF em C#?

Para habilitar o JavaScript no IronPDF, defina a propriedade `EnableJavaScript` como `true` nas opções de renderização: `new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true } }`. Isso permite que o mecanismo Chromium do IronPDF execute JavaScript durante o processo de conversão.

Quais bibliotecas JavaScript são suportadas para conversão de PDF?

O IronPDF é compatível com todas as bibliotecas JavaScript, incluindo jQuery, React, Vue.js e Angular, por meio de seu mecanismo de renderização Chromium. A biblioteca pode processar manipulação do DOM, requisições AJAX e geração de conteúdo dinâmico da mesma forma que um navegador web moderno.

Como posso controlar o tempo de execução do JavaScript na geração de PDFs?

Use a classe WaitFor nas opções de renderização do IronPDF para controlar o tempo de execução do JavaScript. Você pode usar WaitFor.JavaScript() com um tempo máximo de espera (por exemplo, 500 ms) para garantir que o JavaScript seja concluído antes da geração do PDF: WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500).

Posso executar código JavaScript personalizado durante a conversão de HTML para PDF?

Sim, o IronPDF permite executar código JavaScript personalizado em sua aplicação .NET C# durante o processo de conversão. Você pode inserir JavaScript diretamente na string HTML ou usar as opções de renderização para executar scripts personalizados.

Como faço para capturar mensagens do console JavaScript durante a renderização de um PDF?

O IronPDF oferece um recurso de ouvinte de mensagens JavaScript que permite capturar mensagens `console.log` e outras saídas JavaScript durante o processo de renderização do PDF. Isso é útil para depurar a execução de JavaScript.

Qual mecanismo de renderização a biblioteca usa para suporte a JavaScript?

O IronPDF utiliza o mecanismo de renderização Chromium, o mesmo que alimenta o Google Chrome. Isso garante total compatibilidade com JavaScript e renderização precisa das tecnologias web modernas em seus documentos PDF.

Existe algum período de teste gratuito disponível para a conversão de JavaScript para PDF?

Sim, o IronPDF oferece um período de avaliação gratuito que inclui suporte completo a JavaScript. Você pode testar todos os recursos, incluindo a execução de JavaScript, a renderização de jQuery e a geração de conteúdo dinâmico, antes de adquirir uma licença.

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,318,263 | 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.