Direct print without going through the php dialog box

Asked

Viewed 3,558 times

0

I use java script to print only the contents of a div, but I need you not to use the browser print dialog box.

Reason: I created a formatting for the text, when it goes to print by the dialog box this losing my formatting.

How could I hit this ?

Follow below my codes:

DIV:

<style type="text/css">
  body {
    width:100px;

  }
  #div1{
    border:solid 1px;
    box-shadow: 10px 10px 10px 5px black;
    font-size: 8px;
    font-weight: bold;
    font-family: Arial;
  }
  </style>

JS:

<script>
function cont(){
   var conteudo = document.getElementById('print').innerHTML;
   tela_impressao = window.open('about:blank');
   tela_impressao.document.write(conteudo);
   tela_impressao.window.print();
   tela_impressao.window.close();
}
</script>

CONTENT:

<div class="container">
  <div class="row">
<div id="div1" style="width:400px; margin:0 auto;"> 
<?php
echo"<div id='print' class='conteudo'>";
      echo"<center><img src='logo.png' width='200';margin:0 auto;></center>";
      echo"<center><b>COMPROVANTE DE TROCA DE VASILHAME</center></b>";
      echo"<hr>";
      echo "<p>COMPROVANTE N°: $v_cupom   </p>";
      echo "<p>LOJA: $v_loja_num - $v_loja_desc </p>";
      echo "<p>VASILHAME: $v_cod_ean - $v_vasilhame </p>";
      echo "QUANTIDADE: $v_quantidade";
      echo"<hr>";
      echo"<center>DATA: $v_data HORA: $v_hora  </center>";
 echo "</div>";
?>
</div>
</div>
<br>
<center><a href="index.php" class="btn btn-danger" onclick="cont();" value="Imprimir">IMPRIMIR</a></center>
<br>
</div>
</div>

  • As you open a new window, the style is not assigned to it. Try to place the style inside the content.

  • @LF Ziron More the style is already inside the content.

  • No, the contents variable has only the innerHTML of div #print.

  • I got it, but there’s a way to pass the head in Java script ?

  • 1

    Yes, apply an id to your style tag, say you use myStyle and use it in the script: content = Document.getElementById("myStyle"). outerHTML; content += Document.getElementById('print'). innerHTML;

  • Perfect, it worked, Thank you.

Show 1 more comment

2 answers

4


Good night, Otácio.

First of all, it is not possible to print directly without appearing the dialog box, just imagine how many websites would print things on your printer without your permission! Would be a mess!

Secondly, the problem of printing is because it is opening a new window with the content, but the stylesheet is not going together. Make this modification in your javascript code and test again:

<script>
function cont(){
    window.print();
}
</script>

Hug.

  • putting only this way there is printing.

  • Right, Thanks for the help too. Hug.

0

Solution: So as indicated by our colleague @LF Ziron insert the css along with the print function. Follows code:

<script>
    function cont(){
       var conteudo = conteudo = document.getElementById("div1").outerHTML; 
                                 document.getElementById('print').innerHTML;
       tela_impressao = window.open('about:blank');
       tela_impressao.document.write(conteudo);
       tela_impressao.window.print();
       tela_impressao.window.close();

    }
</script>

Browser other questions tagged

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