Você pode partir para qualquer uma das alternativas abaixo. Depende de quão preciso precise ser.
Método 1
O que eu costumo fazer em projetos pessoais e que não requerem muita precisão, é definir a o tamanho da fonte em 12pt
para o html
em meu CSS por valer 100% do tamanho. Converto então o tamanho de uma folha A4 comum de milímetros (210 x 297) para pixels (793 x 1122, aproximadamente). Assim, defino um <div>
com as dimensões da folha e outro <div>
para servir de isolador e colocar o conteúdo: cada informação poderá ter seu tamanho de fonte que não irá modificar as dimensões do <div>
que representaria o papel A4 comum (não o A4 ofício). Adicione margem conforme necessário.
Devo dizer que funciona para mim, principalmente com fonte mono-espaçada. Veja um exemplo:
html { font-size: 12pt; }
.folha { background-color: #ccc; padding: 0.5em; }
.a4_vertical { width: 793px; height: 1122px; }
.a4_horizontal { width: 1122px; height: 793px; }
<div id="folha-a4" class="folha a4_vertical">
<div id="conteudo">
Folha A4
</div>
</div>
Método 2
Se quer mais precisão, recomendo utilizar o Paper CSS que tem a licença MIT. Para usar, basicamente você precisa...
... No <header>
- Carrega o estilo:
<link rel="stylesheet" href="dist/paper.css">
- Define o tamanho do papel:
<style>@page { size: A5 }</style>
... No <body>
- Adiciona a classe do tamanho do papel (
A4
) - Adiciona se quer em formato paisagem (
landscape
) - retrato é padrão - Na tag (
<div>
,<section>
, et cetera) que terá todo o conteúdo de uma folha, adicione a classesheet
. Cada folha é umsheet
diferente!
Existem outros pormenores que podem ser aprendidos conforme a necessidade. Também existem vários exemplos no site. Segue um adaptado:
<link href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css" rel="stylesheet" />
<style>
@page {
size: A4
}
</style>
<body class="A4">
<section class="sheet padding-10mm">
<article>Exemplo de folha A4</article>
</section>
</body>
Vale ressaltar que é possível gerar PDF com o electron-pdf, conforme a página do projeto informa. Acredito que use menos recursos.