Skip to main content
Melhoria de conteúdo
Fonte Link
José
  • 1,6mil
  • 9
  • 22

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 classe sheet. Cada folha é um sheet 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.

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 classe sheet. Cada folha é um sheet 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>

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 classe sheet. Cada folha é um sheet 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.

Fonte Link
José
  • 1,6mil
  • 9
  • 22

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 classe sheet. Cada folha é um sheet 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>