1. IronPDF
  2. Solução de problemas
  3. Formatação HTML perfeita em pixels

Formatação HTML perfeita em pixels no IronPDF

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

Para que seus PDFs fiquem perfeitos, você precisará desenvolver excelentes modelos HTML ou contratar um desenvolvedor web para fazer isso por você. Este artigo de resolução de problemas foi retirado de um tutorial completo sobre Depuração de HTML .

1. Depure e teste seu HTML

Você pode depurar seu HTML, CSS e JS no Chrome ou em um navegador de desktop similar. Depois de ter certeza de que está funcionando perfeitamente, conecte-o ao IronPDF e ele terá a mesma aparência que tem no Chrome.

Uso básico

Este exemplo de código renderizará PDFs com qualidade de imagem perfeita no navegador Chrome para desktop mais recente.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

Desenvolvimento HTML avançado

Usuários avançados do Chrome podem alcançar 100% de precisão usando as configurações padrão do IronPDF e ativando a opção ' Emular mídia CSS > Tela '. Mais informações podem ser encontradas aqui .

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

2. Compare os resultados

Para comparar o resultado, abra seu HTML no navegador Chrome para desktop.

Nota: Exporte qualquer string HTML e seus recursos para arquivos HTML independentes e edite-os manualmente, ou peça ajuda a um desenvolvedor web.

Comparação do resultado do PDF

3. Abra a janela de visualização de impressão (Ctrl+P no Windows)

Pode ser necessário alterar o tamanho do papel e ativar a impressão de imagens de fundo na caixa de diálogo Imprimir do Chrome.

Janela de Pré-visualização de Impressão

4. Selecione a opção 'Salvar como PDF'.

Quando a função Imprimir para PDF no Chrome estiver perfeita, o IronPDF irá igualá-la.

Opção Salvar como PDF

5. Execute o IronPDF

Agora que o HTML está perfeito, execute-o no IronPDF e ele ficará idêntico. Use {PlaceHolders} para mesclar dados do cliente. Os exemplos de código em IronPDF Examples serão de grande ajuda!

Se este tutorial não ajudar a resolver o seu problema, entre em contato com o Suporte de Engenharia e adaptaremos e melhoraremos nossa documentação para ajudá-lo(a) ainda mais.

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.