Print another page with javascript

Asked

Viewed 1,412 times

1

I have a system that shows the result of a consultation. On this page you have the print button, but I need to make sure that when you click the print button, print another page formatted without having to open it, or if that’s the case, do not even happen to download, open and close automatically. I have the following code on the main page ( index.php ): 

    <script>
               $(function(){ 
                   //evnto que deve carregar a janela a ser impressa 
                   $('#imprimir').click(function(){ 
                      newWindow = window.open('imprimir.php'); 
                       //imprime e fecha a nova janela quando estiver carregada 
                       $(newWindow).ready(function() { 
                           newWindow.print(); 
                           newWindow.close(); 
                       }); 
                   }); 
               }); 
            </script>
<a href="#" style="color: #666666; font-weight: bold" id="imprimir"><i class="fa fa-print"></i> Imprimir Orçamento</a>
javascript jquery

  • instead of using the window.open you could use an iframe for the job.

  • Sorry Tobymosque, I don’t understand

  • You want it to print automatically?

  • Yes. After clicking the print button, he will read the page that will be printed and then close the page. Type what occurs in file download, where it opens, sends the file and the page closes automatically.

1 answer

1

look, in this case you better create an iframe for the content you want, up to the window.open may be blocked by Browser.

var iFrame = document.createElement("iframe");
iFrame.addEventListener("load", function () { 
  iFrame.contentWindow.focus();
  iFrame.contentWindow.print();
  window.setTimeout(function () {
    document.body.removeChild(iFrame);
  }, 0);
});        
iFrame.style.display = "none";
iFrame.src = "imprimir.php";
document.body.appendChild(iFrame);

below follows a functional example with an HTML snippet which you want inserted by the user.

var taRawHtml = document.getElementById("taRawHtml");
var btImprimir = document.getElementById("btImprimir");

btImprimir.addEventListener("click", function (event) {
  var html = taRawHtml.value.trim();
  if (html) {       
    var blob = new Blob([html], { type: "text/html" });        
    var iFrame = document.createElement("iframe");
    iFrame.addEventListener("load", function () { 

      iFrame.contentWindow.focus();
      iFrame.contentWindow.print();
      window.setTimeout(function () {
        document.body.removeChild(iFrame);
        URL.revokeObjectURL(iFrame.src);
      }, 0);
    });        
    iFrame.style.display = "none";
    iFrame.src = URL.createObjectURL(blob);
    document.body.appendChild(iFrame);
  }
});
html, body, div, input, textarea {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;    
}

body {
  padding: 5px;
}

textarea {
  width: 100%;
  height: 240px;
}
Insira um trecho de HTML dentro do input abaixo:
<textarea id="taRawHtml">
  <h1>Hello Wolrd</h1>
</textarea>
<input id="btImprimir" type="button" value="Imprimir" />

Unfortunately the above example will not run here in the OS due to a policy applied to the Snippet iframe, but you can see it in action in the following Jsfiddle

Browser other questions tagged javascript jquery

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