Print HTML page content

Navigation
4

I would like to print a page of this format

ButwhenIgotoprintitisinthisformat

IhaveafunctioninJS,butIdonotknowhowtosolvethisformattingproblem

CODE

<!DOCTYPEhtml><htmllang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kode is a Premium Bootstrap Admin Template, It's responsive, clean coded and mobile friendly">
  <meta name="keywords" content="bootstrap, admin, dashboard, flat admin template, responsive," />
  <title>Imprimir Etiqueta</title>

  <!-- ========== Css Files ========== -->
  <link href="css/root.css" rel="stylesheet">   
  <!-- ================================================
jQuery Library
================================================ --> 
<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-2.0.0b2.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>


<script type="text/javascript" src="js/JsBarcode.js"></script>  


    <style>
    textarea {
        resize: none;
    }

@media print {
    body {
        height: 750px;
        width: 500px; /* Exemplo */
        margin: 0 auto;
    }
}
    </style>
  </head>
  <body  > 
    <div class="col-md-3" id="etiquetaPrint">
      <div class="panel panel-default"> 
        <div class="panel-title" style="text-align:center;">
          Material Novo
         <!-- <br/>
          Perecível/Controlado - APROVADO-->
        </div>

            <div class="panel-body">
              <form class="fieldset-form">
                <fieldset>

                    <legend>ROLO: <svg id="barcode"></svg>    <?php //echo $codigo;?></legend>

                    <div id="etiqueta_barcodes">
                        <label>Material:</label> 
                            <br/>
                            <div style="text-align:center;">
                                <svg id="barcodeMaterial"></svg>
                            </div>


                        <label>Lote :</label>
                            <br/>
                            <div style="text-align:center;">
                                <svg id="barcodeLotemb"></svg>
                            </div>
                    </div>  


                    <div class="col-sm-6">  

                      <div class="form-group">
                        <label for="example11" class="form-label">Text</label>
                        <input readonly type="text" value="teste co mnum" class="form-control font-w-800" id="example11"> 
                      </div>
                      <div class="form-group">
                        <label for="example11" class="form-label">Data Fab.</label>
                        <input readonly type="text" value="10/05/2017" class="form-control font-w-800" id="example11"> 
                      </div>


                    </div>  

                    <div class="col-sm-6">   

                      <div class="form-group">
                        <label for="example11" class="form-label">Quant</label>
                        <input readonly type="text" class="font-w-800 form-control" value="5"id="example11">
                      </div>
                      <div class="form-group">
                        <label for="example11" class="form-label">Data Val</label>
                        <input readonly type="text" class="font-w-800 form-control" value="10/05/2018"id="example11">
                      </div>



                    </div> 
                     <div class="form-group">
                        <label class="form-label">Descrição Material</label>
                        <textarea   class="form-control" cols="40" rows="3"><?=$desc?></textarea>
                      </div>

                </fieldset>
              </form>
                <button onclick="printDiv()"></button>
            </div>

      </div>

    </div> 

    <div id="print_area" class="print"></div>
<!-- ================================================
jQuery Library
================================================ -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- ================================================
Plugin.js - Some Specific JS codes for Plugin Settings
================================================ -->
<script type="text/javascript" src="js/plugins.js"></script>


<script>

JsBarcode("#barcode", "<?=$codigo?>",{height: 40});
JsBarcode("#barcodeMaterial", "BT<?=$material?>ER32",{height: 25, width: 1.45 });
JsBarcode("#barcodeLotemb", "AS1<?=$lote?>FF1",{height: 25, width: 1.45 });

 function printDiv() {
   var conteudo = document.getElementById("etiquetaPrint").innerHTML; 
   var page = document.getElementById("print_area").innerHTML = conteudo;
   tela_impressao = window.open();
   tela_impressao.document.write(page);
   tela_impressao.window.print();
   tela_impressao.window.close();
} 
</script>

</body>
</html>
    
asked by anonymous 26.05.2017 / 14:29

1 answer

4

You can work around limiting the width size of your body in Print Media Query. You can also set this margin to center. 

@media print {
    body {
        max-width: 500px; /* Exemplo */
        margin: 0 auto;
    }
}

EDIT:

Before you saw the code, you did not know the way your button was pulling your printout. In your case, I was able to resolve the width issue by modifying your JS as follows: 

function printDiv() {
   var conteudo = document.getElementById("etiquetaPrint").innerHTML; 
   var page = document.getElementById("print_area").innerHTML = conteudo;
   tela_impressao = window.open();
   tela_impressao.document.write('<div style="max-width: 500px; margin: 0 auto;">' + page  + '</div>');
   tela_impressao.window.print();
   tela_impressao.window.close();
}
    
26.05.2017 / 14:33
How to import multiple excel tabs at the same time? Concept of Angular