Configurações de renderização HTML

import {PdfDocument, WaitForType, CssMediaType, FitToPaperModes, PdfPaperOrientation, PaperSizeUnit} from "@ironsoftware/ironpdf";

(async () => {
    // Many rendering options to use to customize!
    const options = {
        paperSize: {
            unit: PaperSizeUnit.Inch,
            width: 12.5,
            height: 20,
        },
        printHtmlBackgrounds: true,
        paperOrientation: PdfPaperOrientation.Landscape,
        title: "My PDF Document Name",
        waitFor: {
            type: WaitForType.RenderDelay,
            maxWaitTime: 50, // in milliseconds
        },
        cssMediaType: CssMediaType.Screen,
        fitToPaperMode: FitToPaperModes.FitToPage,
        createPdfFormsFromHtml: true,

        // Supports margin customization
        margin: {
            top: 40, // millimeters
            left: 20, // millimeters
            right: 20, // millimeters
            bottom: 40, // millimeters
        },

        // Can set FirstPageNumber if you have a cover page
        firstPageNumber: 1, // use 2 if a cover page will be appended
    };

    // Render HTML page to PDF
    const pdf = await PdfDocument.fromUrl("https://angular.io/", { renderOptions: options });
    
    // Save the PDF
    await pdf.saveAs("my-content.pdf");
})();

Configurações de renderização HTML

É possível configurar diversas opções de renderização ao renderizar a partir de strings HTML, arquivos ou URLs da web. As configurações mostradas acima incluem tamanho de papel personalizado com unidades de medida configuráveis, ativação de fundo HTML, orientação da página, título do documento, atraso no processo de renderização, especificação do tipo de mídia CSS, seleção do modo de papel, criação de campos de formulário editáveis, personalização de margens e adição de números de página.

Os tipos de mídia CSS "screen" e "print" são diretivas usadas para especificar como os estilos devem ser aplicados a documentos HTML com base no meio de exibição ou saída. Quando "screen" é escolhido como o tipo de mídia, isso indica que as regras CSS são destinadas à visualização na tela, otimizando fatores como cores e layouts para telas digitais. Por outro lado, quando a opção "imprimir" é selecionada, o navegador é instruído a aplicar estilos específicos para documentos impressos, garantindo legibilidade e formatação adequada quando o conteúdo HTML for impresso em mídia física. Às vezes, é necessário definir o tipo de mídia CSS como "screen" para exibir determinadas imagens de fundo.

O atraso no processo de renderização fornece tempo suficiente para que o JavaScript ou as fontes sejam carregados.

Explicação:

HTML Structure: The code is structured in a standard HTML5 format with a <head> and <body> section.
Metadata: The <meta> tags define the character set and viewport for responsive design.
Folha de estilo:
- Estilo de corpo padrão: Define a família da fonte e a margem aplicáveis a todas as mídias.
- Media Query para telas: Aplica um fundo cinza claro e texto mais escuro para telas digitais.
- Print Media Query: Aplica um fundo branco e texto preto, típico para impressão.
Exemplo de uso: A estrutura HTML e CSS fornecida ajuda a demonstrar como diferentes estilos podem ser aplicados dependendo se o conteúdo é visualizado em uma tela ou impresso.