How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C
Como desenvolvedores do IronPDF, entendemos que os documentos PDF criados com o IronPDF não só precisam ter uma aparência perfeita, como também precisam corresponder exatamente às expectativas dos nossos clientes. Para que seus PDFs tenham uma aparência perfeita em termos de pixels ao converter PDF a partir de HTML, você precisará desenvolver excelentes modelos HTML ou contratar um desenvolvedor web para fazer isso por você. O IronPDF oferece opções para renderizar seus PDFs com perfeição de pixels em relação ao seu HTML, garantindo que apareçam idênticos à forma como são exibidos no Chrome, graças ao nosso renderizador para Chrome.
Guia rápido: Crie PDFs perfeitos em pixels com o IronPDF
Converta facilmente seu HTML em PDFs com qualidade impecável usando o poderoso renderizador para Chrome do IronPDF. Este guia rápido ajuda você a obter resultados em PDF precisos e previsíveis, aproveitando o suporte completo do IronPDF para HTML5, CSS3 e JavaScript. Com apenas algumas linhas de código, você pode renderizar seu conteúdo HTML exatamente como ele aparece no Chrome, garantindo uma transição perfeita da web para o PDF. Ideal para desenvolvedores que buscam manter a precisão do layout sem comprometer a facilidade de uso.
-
Instale IronPDF com o Gerenciador de Pacotes NuGet
PM > Install-Package IronPdf -
Copie e execute este trecho de código.
var Renderer = new IronPdf.ChromePdfRenderer(); Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Imprimir; Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf"); -
Implante para testar em seu ambiente de produção.
Comece a usar IronPDF em seu projeto hoje com uma avaliação gratuita
O que é o Chrome Renderer do IronPDF?
Isso torna o IronPDF único em relação a outras bibliotecas PDF for .NET.
O IronPDF se destaca no mercado por utilizar o renderizador Google Chromium, o que significa que o HTML que você vê nos navegadores Chrome será exatamente igual ao que você vê em nossos PDFs. Neste tutorial, vamos mostrar algumas configurações que você precisará aplicar no Chrome e no IronPDF para conseguir isso.
Para sermos claros, muitas das tecnologias que afirmam "converter HTML para PDF" implementadas por concorrentes não estão em conformidade com os padrões da W3C, nem sequer suportam HTML5, CSS3 ou JavaScript, e utilizam renderizadores subjacentes como o wkhtmltopdf .
IronPDF comparado com seus concorrentes
Para ver uma lista completa de comparações com outros produtos, consulte nosso blog .
[p Recursos] | Renderizador Chrome do IronPDF | Aspose vs IronPDF |iText vs IronPDF
O renderizador otimizado para Chrome do IronPDF é melhor que o Chrome.
Dois exemplos de como o IronPDF supera o próprio Chrome. Botões e textos que seriam divididos em duas páginas no Chrome permanecem intactos com o IronPDF.
Exemplo de botões e texto cortados no Chrome
Outro exemplo de texto cortado no Chrome
Por que usar HTML para PDF?
Os desenvolvedores adoram a conversão de HTML para PDF porque ela oferece resultados previsíveis que correspondem à identidade visual existente na web. O design é implementado utilizando tecnologias HTML, CSS e JavaScript padronizadas e bem documentadas.
- O layout e o design da saída correspondem exatamente ao site.
- Os desenvolvedores web podem se concentrar em projetar com precisão absoluta.
- Os desenvolvedores .NET podem se concentrar na lógica do aplicativo em vez do layout. Os desenvolvedores de back-end podem delegar tarefas de layout e design aos web designers.
1. Decida se o tipo de mídia CSS a ser usado é Impressão ou Tela.
O renderizador do IronPDF tem duas opções de renderização de mídia: Imprimir (padrão) e Tela. Para uma comparação visual lado a lado, consulte o final deste tutorial na seção "Comparação entre o exemplo de tela e o de impressão".
CssMediaType.Imprimiré a opção de renderização padrão que otimiza seu HTML para uso geral com uma impressora. Isso significa que algumas imagens de fundo, ícones e outros elementos que consomem muita tinta na página podem ser renderizados de forma diferente ou serem omitidos. Essa opção é adequada para documentos sem imagens de fundo e é a visualização de impressão padrão.CssMediaType.Telaé a opção de renderização que permitirá que seus PDFs apareçam exatamente como aparecem no Chrome na sua tela. Você precisará configurar algumas opções no seu navegador Chrome para que a pré-visualização de impressão mostre exatamente como o IronPDF será renderizado, para fins de depuração de HTML.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or ScreenCabeçalhos de tabela repetidos
Se você tiver um código HTML contendo uma tabela que se estenderá por mais de uma página, provavelmente desejará que os cabeçalhos da tabela se repitam em cada página do PDF.
- Neste caso, você pode somente usar o
ImprimirCssMediaType. - Usar
Telainstrui o Chrome a imprimir os cabeçalhos apenas uma vez.
Comparação entre exemplos em tela e impressão
Muitas imagens e ícones não serão carregados no modo de impressão, embora sejam carregados no modo de tela:
2. Configure o Chrome
O IronPDF utiliza com orgulho um mecanismo de renderização do Chrome. Siga estes passos para que o IronPDF renderize seu HTML exatamente como você o vê no Chrome. Esses são os poucos passos que precisam ser seguidos previamente no Chrome para conseguir isso.
Para renderizar PDFs Perfeitamente Visuais que incluam todas as imagens, ícones e fundos que geralmente são omitidos no formato de impressão, certifique-se de usar a opção CSS Media Tela.
2a. Abra as Ferramentas de Desenvolvedor e defina "Ativar emulação de mídia CSS" para "Tela/Impressão" no Chrome.
-
Para fazer isso, abra as Ferramentas de Desenvolvedor no Chrome.
- Pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, ChromeOS) para abrir o Menu de Comandos. Comece a digitar "renderização", selecione "Mostrar renderização" e pressione Enter. O DevTools exibe a guia Renderização na parte inferior da janela do DevTools. Mais ajuda
- Navegue para baixo e encontre o menu suspenso para
Emulate CSS mediae escolha a opçãoTelaouImprimir. Se você estiver em uma página da web, talvez seja necessário recarregar a página (Ctrl+R) para que as configurações entrem em vigor.
Imprimir
Tela
2b. Abra a janela de visualização de impressão (Ctrl+P no Windows)
Para obter uma visualização precisa, talvez seja necessário alterar o tamanho do papel e ativar a opção "imprimir imagens de fundo" na caixa de diálogo Imprimir do Chrome.
2c. Defina as configurações corretas de visualização de impressão.
- Por favor, escolha o Tamanho do Papel que você está usando em seu projeto IronPDF, como
A4, ouLetter. - No menu suspenso de
MarginsselecioneCustome defina todas as quatro margens para 1" (uma polegada). - Ative a caixa de seleção
Background Graphics. - Certifique-se de configurar seu
LayoutparaLandscapese você pretende produzir um documento em paisagem.
E isso é tudo. Agora você pode depurar seu HTML e usar a pré-visualização de impressão para ver exatamente como o IronPDF renderizará seu layout.
3. Configure o IronPDF
3a. Defina o tipo de mídia CSS no IronPDF.
Para que o design da página web corresponda com 100% de precisão, devemos escolher o mesmo tipo de mídia CSS que definimos no Chrome em nosso código.
Lembre-se de que PdfCssMediaType.Tela inclui fundos e imagens maiores que podem ser omitidas no formato PdfCssMediaType.Imprimir, que é o padrão e foi projetado para impressoras economizarem tinta.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True3b. Defina o Atraso de Renderização e o Tempo Limite de Renderização adequadamente.
O tempo limite de renderização padrão do IronPDF é de 60 segundos. Qualquer coisa que demore mais do que isso para processar não será renderizada sem editar as opções de renderização. Para substituir as configurações padrão, você precisará ajustar a opção RenderingOptions.Timeout.
Lembre-se de que não definir um tempo limite ou ter um atraso de renderização maior do que o seu tempo limite definido produzirá uma Exceção Unable to Render PDF. Portanto, se você estiver encontrando esse erro, talvez precise aumentar esses valores.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds- RenderDelay e JavaScript (Exemplo de código)
- RenderDelay (Referência da API)
- Tempo limite (Referência da API)
Pronto para ver o que mais você pode fazer? Confira nossa página de tutoriais aqui: Recursos adicionais
Perguntas frequentes
Como posso obter uma renderização de PDF perfeita em pixels a partir de HTML?
Para obter uma renderização de PDF perfeita em pixels a partir de HTML, você pode usar o Chrome Renderer do IronPDF, que garante que o conteúdo HTML exibido nos navegadores Chrome seja idêntico aos PDFs gerados.
Quais são os benefícios de usar o IronPDF para conversão de HTML em PDF?
O IronPDF permite que os desenvolvedores gerem PDFs que correspondam à aparência visual do conteúdo HTML nos navegadores da web, oferecendo suporte a HTML5, CSS3 e JavaScript, diferentemente de muitas outras bibliotecas.
Como posso configurar os tipos de mídia CSS no IronPDF?
Você pode configurar os tipos de mídia CSS no IronPDF selecionando 'Imprimir' para documentos sem fundo ou 'Tela' para corresponder à aparência na tela, garantindo que a saída em PDF esteja de acordo com suas necessidades.
Quais são os passos que devo seguir para configurar o Chrome para renderização de PDFs?
Para configurar o Chrome para renderização de PDF, abra as Ferramentas de Desenvolvedor, ative a opção "Emular mídia CSS" para "Tela/Impressão" e ajuste as configurações de visualização de impressão para garantir que o PDF corresponda ao layout desejado.
Como posso resolver problemas de renderização com o IronPDF?
Se você encontrar problemas de renderização, como uma exceção "Não foi possível renderizar o PDF", tente aumentar as configurações de Atraso de Renderização ou Tempo Limite de Renderização nas opções do IronPDF para obter melhores resultados.
Posso usar o IronPDF para gerar PDFs que correspondam ao design da web?
Sim, o IronPDF permite renderizar PDFs que correspondem precisamente ao seu design web, utilizando o renderizador Google Chromium, oferecendo suporte a todas as tecnologias web modernas.
Por que o IronPDF usa o renderizador Chromium do Google?
O IronPDF utiliza o renderizador Google Chromium para garantir que o HTML exibido nos navegadores Chrome seja idêntico aos PDFs criados, proporcionando uma saída consistente e de alta qualidade.
O IronPDF é compatível com o .NET 10 e posso usá-lo em novos projetos .NET 10?
Sim. O IronPDF oferece suporte explícito ao .NET 10 (assim como ao .NET 9, .NET 8 e versões anteriores) e é compatível imediatamente. Você pode direcionar seus projetos para o .NET 10 e usar as APIs de HTML para PDF, renderização, edição e assinatura do IronPDF sem precisar de soluções alternativas.
Ainda está rolando a tela?
Quer provas rápidas? PM > Install-Package IronPdf
executar um exemplo Veja seu HTML se transformar em um PDF.
Comece GRATUITAMENTE
Comece GRATUITAMENTE
Agende uma demonstração ao vivo gratuita
Não é necessário cartão de crédito nem criação de conta.
