Como usar CSS com HTML em C# para PDFs responsivos

Por que escolher o tipo de mídia CSS correto é importante?

O IronPDF gera PDFs a partir de HTML em C# e, por padrão, pode renderizar uma folha de estilo da tela em PDF. Isso é conveniente porque as folhas de estilo para impressão costumam ser menos documentadas, usadas ou desenvolvidas em comparação com suas contrapartes para tela. No entanto, entender a distinção entre esses tipos de mídia é crucial para produzir PDFs de qualidade profissional.

Ao trabalhar com CSS (Tela e Impressão) no IronPDF, a escolha entre os tipos de mídia de tela e impressão impacta significativamente o resultado final em PDF. Os formatos de mídia para tela preservam elementos interativos e designs visuais ricos, enquanto os formatos de mídia impressa otimizam o conteúdo para legibilidade e consumo em papel.

O CSS3 permite que certos estilos CSS sejam renderizados exclusivamente em documentos impressos, enquanto outros são destinados a navegadores da web. O IronPDF é compatível com ambos, oferecendo controle total sobre como o conteúdo HTML é renderizado em PDF . Essa flexibilidade garante que, seja para criar relatórios digitais, faturas para impressão ou documentos híbridos, seus PDFs atendam aos requisitos específicos do uso pretendido.

Quando devo usar o tipo de mídia CSS Print em vez de Screen?

Crie e aplique uma folha de estilo de impressão ao seu HTML: Aprenda como criar e aplicar uma folha de estilo de impressão perfeita.

Cada tipo de mídia CSS se destina a diferentes casos de uso. Experimente cada um para ver qual se adapta melhor às suas necessidades. Considere estas diretrizes:

Use o tipo de mídia CSS Print quando:

• Criar documentos destinados à impressão física.
• Geração de faturas, relatórios ou documentos formais
• Você precisa de cabeçalhos de tabela repetidos em todas as páginas.
• Economizar tinta é uma prioridade
• Trabalhando com requisitos de tamanho de papel personalizado

Use o tipo de mídia CSS Screen quando:

• Criação de PDFs interativos com elementos visuais ricos
• Preservar a estética do design web no PDF
• Incluindo imagens e cores de fundo
• O PDF será visualizado principalmente em telas.
• Trabalhando com conversões responsivas de HTML para PDF

Quais são as diferenças visuais entre os modos de tela e impressão?

Os exemplos acima demonstram como o mesmo conteúdo HTML é renderizado de forma diferente com base na seleção do tipo de mídia CSS. Observe como a versão impressa remove imagens e ícones decorativos para criar um documento mais limpo e adequado para impressão, enquanto a versão para tela mantém todos os elementos visuais para visualização digital.

Por que os cabeçalhos das tabelas aparecem apenas uma vez no modo de tela?

Ao lidar com tabelas HTML que abrangem várias páginas, defina a propriedade CssMediaType para PdfCssMediaType.Print . Isso garante que o cabeçalho da tabela se repita no topo de cada página estendida. Em contraste, PdfCssMediaType.Screen instrui o Chrome a imprimir os cabeçalhos apenas uma vez. Esse comportamento é particularmente importante ao criar relatórios em PDF com tabelas de dados extensas.

O tipo de mídia impressa ativa regras CSS específicas que os navegadores usam para paginação, incluindo a propriedade thead {display: table-header-group;} que permite a repetição do cabeçalho. Essa funcionalidade é essencial para manter o contexto quando os leitores folheiam documentos com várias páginas.

Qual a estrutura HTML necessária para cabeçalhos repetidos?

Para garantir que o Chrome detecte o cabeçalho da tabela, coloque-o dentro de uma tag <thead>. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

Eis a estrutura HTML recomendada:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

Como implementar a repetição do cabeçalho de uma tabela em C#?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Para opções mais avançadas de formatação de tabelas, explore as Margens Personalizadas para controlar o espaçamento ao redor das suas tabelas ou implemente Quebras de Página para garantir que as tabelas comecem em novas páginas quando necessário.

Qual será a aparência do arquivo PDF final?