Home CSS Template html per stampa in A4

Template html per stampa in A4

289
0

Mini tutorial per avere margini di stampa con formato A4, per avere i margini perfetti di stampa basta come vedete dichiarare i margini con if media print:

body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #FAFAFA;
        font: 12pt "Tahoma";
    }
* {
       box-sizing: border-box;
       -moz-box-sizing: border-box;
 }
.page {
      width: 210mm;
      min-height: 297mm;
      padding: 20mm;
      margin: 10mm auto;
      border: 1px #D3D3D3 solid;
      border-radius: 5px;
      background: white;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
      padding: 1cm;
      border: 5px red solid;
      height: 257mm;
      outline: 2cm #FFEAEA solid;
   }
    
@page {
      size: A4;
      margin: 0;
    }
 @media print {
      html, body {
      width: 210mm;
      height: 297mm;        
    }
.page {
       margin: 0;
       border: initial;
       border-radius: initial;
       width: initial;
       min-height: initial;
       box-shadow: initial;
       background: initial;
      page-break-after: always;
     }
    }

Riportiamo nei div i tag sviluppati nel css:

<div class="book">
    <div class="page">
        <div class="subpage">Page 1/2</div>    
    </div>
    <div class="page">
        <div class="subpage">Page 2/2</div>    
    </div>
</div>

Ora laciamo il la stampa al caricamento della pagina

window.print();
Previous articlePHPMailer per php 5.x
Next articleCome utilizzare la funzione wp_nav_menu() in WordPress

LEAVE A REPLY

Please enter your comment!
Please enter your name here