Um tempo atrás fiz um apanhado de várias coisas úteis para preparar páginas para impressão: Preparando páginas para impressão com CSS, Paged.js ou outras ferramentas. Recomendo ler a publicação. Talvez o básico com CSS já te sirva. Além de usar size
, margin
, @page
e @media print
, tem essas dicas mais específicas:
h1,h2,h3,h4,h5,h6 {break-after: avoid-page;}
: Evita imprimir cabeçalhos de seção na parte inferior de uma página, deixando o conteúdo da seção sem cabeçalho na parte superior da página seguinte.img, svg, table, canvas {break-inside: avoid;}
: Dá preferência à imprimir gráficos e figuras em páginas inteiras em vez de dividi-las em páginas.a::after {content: " (" attr(href) ")";}
: Imprime a URL de cada link em vez de ter links apenas como texto sublinhado.footer {page-break-inside: avoid;}
: Não quebrar o footer em páginas separadas.summary {page-break-after: avoid;}
: Não quebrar após o elementosummary
(para o elementodetails
). Se os elementos dedetails
nunca forem maiores que a página,details {break-inside: prevent;}
pode ser útil.body {min-width: 992px;}
: Evita renderizar a versão mobile de uma página.