Print contents of the HTML page

Asked

Viewed 3,003 times

4

I would like to print a page of this format inserir a descrição da imagem aqui

But when I print it is in this format inserir a descrição da imagem aqui

I have a function in JS, but do not know how to solve this formatting problem

CODE

    <!DOCTYPE html>
<html lang="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>
javascript html css printer

1 answer

4


You can solve by limiting the size of your width body in Print Media Query. You can put this margin also to center.

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

EDIT:

Before seeing the code, I didn’t know the way your button was pulling your print. In your case, I was able to solve 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();
}

  • Unfortunately it didn’t work

  • @Mattdavm Hmmm... Should. Has how to show your code?

  • @Mattdavm Have you at least changed something? Has it had any effect? Because from what I’m seeing in the further analysis, there are other differences between your photos. The ideal would be to see your code to try to solve.

  • It had no effect, I edited and inserted the code

  • @Mattdavm and Leon exchange width for max-width, or create a div that will be the container and fix the width on it.

  • @Mattdavm Czech Edition.

Show 1 more comment

Browser other questions tagged javascript html css printer

You are not signed in. Login or sign up in order to post.