Como criar uma página HTML em páginas de tamanho de papel A4?

É possível fazer uma página HTML se comportar, por exemplo, como uma página de tamanho A4 no MS Word?

Essencialmente, quero poder mostrar a página HTML no navegador e descrever o conteúdo nas dimensões de uma página de tamanho A4.

Por uma questão de simplicidade, suponho que a página HTML contenha apenas texto (sem imagens etc.) e não haverá <br>tags, por exemplo.

Além disso, quando a página HTML é impressa, ela sai como páginas de papel em tamanho A4.

Há tempos, em novembro de 2005, o AlistApart.com publicou um artigo sobre como eles publicaram um livro usando nada além de HTML e CSS. Veja: http://alistapart.com/article/boom

Aqui está um trecho desse artigo:

CSS2 tem uma noção de mídia paginada (pense em folhas de papel), em oposição a mídia contínua (pense em barras de rolagem). As folhas de estilo podem definir o tamanho das páginas e suas margens. Os modelos de página podem receber nomes e os elementos podem indicar em que página nomeada eles desejam imprimir. Além disso, os elementos no documento de origem podem forçar quebras de página. Aqui está um trecho da folha de estilos que usamos:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

Tendo uma editora sediada nos EUA, recebemos o tamanho da página em polegadas. Nós, europeus, continuamos com medições métricas. CSS aceita ambos.

Depois de configurar o tamanho e a margem da página, precisamos garantir que haja quebras de página nos lugares certos. O trecho a seguir mostra como as quebras de página são geradas após os capítulos e apêndices:

div.chapter, div.appendix {
    page-break-after: always;
}

Além disso, usamos CSS2 para declarar páginas nomeadas:

div.titlepage {
  page: blank;
}

Ou seja, a página de título deve ser impressa em páginas com o nome "em branco". O CSS2 descreveu o conceito de páginas nomeadas, mas seu valor só se torna aparente quando os cabeçalhos e rodapés estão disponíveis.

De qualquer forma…

Como você deseja imprimir A4, precisará de diferentes dimensões, é claro:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

O artigo divide-se em coisas como definir quebras de página etc. para que você possa ler isso completamente.

No seu caso, o truque é criar o CSS impresso primeiro. A maioria dos navegadores modernos (> 2005) suporta zoom e já poderá exibir um site com base no CSS impresso.

Agora, você quer fazer com que a exibição na Web pareça um pouco diferente e adaptar todo o design para caber na maioria dos navegadores (incluindo os antigos, anteriores a 2005). Para isso, você precisará criar um arquivo CSS da Web ou substituir algumas partes do seu CSS impresso. Ao criar CSS para exibição na Web, lembre-se de que um navegador pode ter QUALQUER tamanho (pense: "móvel" até "TVs de tela grande"). Significado: para o CSS da web, é melhor definir a largura da página e a largura da imagem usando uma largura variável (%) para suportar o maior número possível de dispositivos de exibição e clientes de navegação na web.

EDIT (26-02-2015)

Hoje, deparei-me com outro artigo mais recente na SmashingMagazine, que também se dedica ao design para impressão em HTML e CSS ... apenas no caso de você poder usar outro tutorial.

EDIT (30-10-2018)

Foi trazido a minha atenção em que sizenão é CSS3 válida, que é realmente correto - eu simplesmente repetiu o código citado no artigo, que (como observado) era bom CSS2 de idade (o que faz sentido quando você olha para o ano o artigo e esta resposta foi publicada pela primeira vez). De qualquer forma, aqui está o código CSS3 válido para sua conveniência de copiar e colar:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Caso você realmente precise de pixels ( você deve evitar o uso de pixels ), precisará escolher o DPI correto para impressão:

• 72 dpi (web) = 595 x 842 pixels
• 300 dpi (impressão) = 2480 x 3508 pixels
• 600 dpi (impressão de alta qualidade) = 4960 x 7016 pixels

No entanto, evitaria o aborrecimento e simplesmente usaria cm(centímetros) ou mm(milímetros) para dimensionar, pois isso evita falhas de renderização que podem surgir dependendo do cliente que você usa.

Seria bastante fácil forçar o navegador a exibir a página com as mesmas dimensões de pixel que A4. No entanto, pode haver algumas peculiaridades quando as coisas são renderizadas.

Supondo que seus monitores exibam 72 dpi, você pode adicionar algo como isto:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

O tamanho A4 é 210x297mm

Assim, você pode definir a página HTML para caber nesses tamanhos com CSS:

html,body{
    height:297mm;
    width:210mm;
}

Crie uma seção com cada página e use o código abaixo para ajustar margens, altura e largura.

Se você estiver imprimindo no tamanho A4.

Então usuário

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

em seguida, crie uma div com todo o seu conteúdo.

<div class="Section1"> 
    type your content here... 
</div>

ou

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

Eu usei o HTML para gerar relatórios que são impressos corretamente em tamanhos reais em papel real.

Se você usar com cuidado mm como suas unidades no arquivo CSS, deverá ficar bem, pelo menos para páginas únicas. As pessoas podem estragar tudo, alterando o zoom de impressão no navegador.

Parece que me lembro que tudo o que estava fazendo era uma página, então não precisei me preocupar com paginação - isso pode ser muito mais difícil.

Eu vi essa solução depois de pesquisar no google, procure "A4 CSS page template" (codepen.io). Ele mostra uma área de tamanho A4 (A3, A5, também em retrato) no navegador, usando a tag <page>. Dentro dessa tag, o conteúdo é mostrado, mas a posição absoluta ainda é em relação à área do navegador.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Isso funciona para mim sem nenhuma outra biblioteca css / js a ser incluída. Funciona para navegadores atuais (IE, FF, Chrome).

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

No seu normal style.css:

table.tableclassname {
  width: 400px;
}

No seu print.css:

table.tableclassname {
  width: 16 cm;
}

PPI e DPI não fazem absolutamente nenhuma diferença em como um documento será impresso em um navegador. a impressora não obtém informações sobre a inclinação dos pontos da tela ou o DPI das imagens, etc. o processador de impressão do navegador aumentaria o DPI das imagens de algo bastante baixo, como 72 dpi, para qualquer DPI do restante do documento. digamos que a imagem é exibida com meia página de largura e, então, cerca de 4 "de largura fisicamente. a largura de pixel da imagem seria de aproximadamente 300px para ser exibida corretamente no navegador. no momento em que é impressa em uma 300DPI nominal, o processador adicionou pixels e a imagem aumentará para cerca de 1200 px, que a 300 DPI é de 4 ".

quando se trata de elementos vetoriais ou não baseados em pixels, como texto, a impressora escolhe seu próprio DPI no driver, que não se relaciona à altura dos pontos da tela ou à largura do navegador, etc. Se o navegador tiver 3000px de largura, o processador de impressão quebrará o texto conforme apropriado.

eis o que dificulta a criação de displays de impressão: cada navegador e impressora interpretam o tamanho do texto (pt, em, px) e o espaçamento à sua maneira. dependendo de qual impressora, navegador e talvez até o sistema operacional usado, você terá uma quantidade diferente de linhas e caracteres por página. portanto, mesmo que você teste no seu computador usando o navegador e a impressora e descubra que pode exibir o texto em uma caixa de 640 x 900 pixels e que seja perfeito para impressão, o próximo usuário que tentar imprimir poderá imprimir de maneira diferente. não há realmente nenhuma maneira de forçar cada impressora e navegador a obter o mesmo sempre.

esqueça os pixels e muito mais o DPI, a única coisa em que você pode usar os pixels é definir uma largura de tabela que simule a largura de uma área imprimível na impressora. Nesse caso, descobri que 640px de largura está próximo.

Procurando por um problema semelhante, achei isso - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 é um formato de documento, como uma imagem de tela que depende da resolução da imagem, por exemplo, um documento A4 redimensionado para:

• 72 dpi (web) = 595 x 842 pixels
• 300 dpi (impressão) = 2480 x 3508 pixels (este é "A4" como eu o conheço, ou seja, "210 mm x 297 mm a 300 dpi")
• 600 dpi (impressão) = 4960 x 7016 pixels

Sei que esse assunto é bastante antigo, mas quero compartilhar minha experiência sobre esse tópico. Na verdade, eu estava pesquisando um módulo que pode me ajudar com meus relatórios diários. Estou escrevendo algumas documentações e alguns relatórios em HTML + CSS (em vez de Word, Latex, OO, ...). O objetivo seria imprimi-los em papel A4 para compartilhá-lo com amigos, ... Em vez de pesquisar, decidi fazer uma pequena e divertida sessão de codificação para implementar uma biblioteca simples que pudesse lidar com "páginas", número de página, resumo, cabeçalho , rodapé, .... Finalmente, eu fiz isso em ~~ 2h e sei que essa não é a melhor ferramenta de todos os tempos, mas está quase ok para o meu propósito. Você pode dar uma olhada neste projeto no meu repositório e não hesite em compartilhar suas idéias. Talvez não seja o que você está procurando em 100%, mas acho que este módulo pode ajudá-lo.

Basicamente, crio uma página do corpo "width: 200mm;" e recipiente de altura: 290mm (menor que A4). Então eu usei quebra de página: sempre; para que a opção "imprimir" do navegador saiba quando dividir as páginas.

repo: https://github.com/kursion/jsprint

Tecnicamente, você poderia, mas seria preciso muito trabalho para que todos os navegadores imprimissem a página exatamente como ela é exibida na tela. Além disso, a maioria dos navegadores força o URL, a data de impressão e a numeração das páginas na impressão, o que nem sempre é desejado. Isso não pode ser alterado ou desativado.

Em vez disso, aconselho a criar um PDF com base no conteúdo da tela e servir o PDF para download e / ou impressão. Embora a maioria das bibliotecas disponíveis em PDF seja paga, existem algumas alternativas gratuitas disponíveis para criar PDFs básicos.

Eu usei 680px em relatórios comerciais para imprimir em páginas A4 desde 1998. Os 700px não cabem corretamente, dependendo do tamanho das margens. Os navegadores modernos podem reduzir a página para caber na página da impressora, mas se você usar 680 pixels, imprimirá corretamente em quase todos os navegadores.

Isso é HTML para você Execute o snippet de código e veja o resultado:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Muitas maneiras de fazer:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

É perfeitamente possível definir seu layout para assumir as proporções de uma página a4. Você só precisa definir a largura e a altura de acordo (possivelmente verifique com window.innerHeightewindow.innerWidth embora não tenha certeza se isso é confiável).

A parte complicada é com a impressão de A4. Javascript, por exemplo, suporta apenas a impressão de páginas rudimentares com o window.printmétodo Como o @Prutswonder sugeriu, criar um PDF a partir da página da web provavelmente é a maneira mais sofisticada de fazer isso (além de fornecer documentação em PDF em primeiro lugar). No entanto, isso não é tão trivial quanto se poderia pensar. Aqui está um link que contém uma descrição de uma classe Java de código aberto para criar PDFs em HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Obviamente, depois de criar um PDF com proporções A4, ele resultará em uma impressão A4 limpa da sua página. Se vale a pena investir tempo é outra questão.