HTML responsivo para PDF

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

(async () => {
    const options = {
        // Choose Screen or Print CSS media
        cssMediaType: CssMediaType.Screen,
        
        // Set paper mode to automatic fit to physical paper
        fitToPaperMode: FitToPaperModes.FitToPage,
    };

    // Render an HTML file
const pdf = await PdfDocument.fromHtml("Responsive.html", {renderOptions: options});

await pdf.saveAs("pdf-from-html.pdf");
})();

HTML responsivo para PDF

Em termos de configurações de viewport, existem os modos CSS Media e Paper Mode.

A opção de mídia CSS no IronPDF permite especificar como os estilos devem ser aplicados ao conteúdo HTML ao renderizá-lo em um documento PDF. Os dois valores para esta opção são CSS media "screen" e "print":

Screen : Indica que as regras CSS destinam-se à visualização em tela. Os estilos são otimizados para telas digitais, o que normalmente inclui considerações como cores e layouts que ficam bem em monitores de computador.
Imprimir : Instrui o navegador a aplicar estilos específicos para documentos impressos. Isso significa que as regras CSS são otimizadas para impressão, garantindo legibilidade e formatação adequada quando o conteúdo HTML é impresso em mídias físicas, como papel.

A opção "Modo de papel" nas Opções de dimensionamento de papel do IronPDF determina como o conteúdo renderizado deve se ajustar às páginas do PDF. Existem vários valores possíveis para esta opção:

ContinuousFeed: Este modo é adequado para impressoras de alimentação contínua, onde o conteúdo é impresso em um rolo de papel. É normalmente utilizado para impressões especializadas, como em ambientes industriais.
FitToHeight: Neste modo, o conteúdo é dimensionado para caber na altura especificada do papel, mantendo a proporção. Isso garante que todo o conteúdo fique visível sem transbordar.
FitToWidth: Neste modo, o conteúdo é dimensionado para caber na largura especificada do papel, mantendo a proporção. Isso é útil quando você deseja garantir que o conteúdo caiba dentro de uma restrição de largura específica.
FitToPage: Neste modo, o conteúdo é dimensionado para caber em toda a página, tanto em altura quanto em largura, mantendo a proporção. Isso garante que todo o conteúdo caiba em uma única página.

Explore o exemplo de viewport para renderização responsiva de PDF.