Trick How To Print Report Without Open New Tab Page With Javascript

The simple trick to print reports without opening a new tab page or open a PDF file in a new tab in the browser. Usually for web applications if you want to print reports, web programmers make PDF reports using class libraries such as FPDF which are then displayed in a new tab. The problem is how do we display the print dialog without opening the report page. Of course using javascript. Okay, just follow the short tutorial below.

I am not the first person to invent this technique, I get this way from the site stackoverflow.com. The basic concept of this way is browser will load the report pages that will be printed into a hidden iframe. hen on page report, will add JQuery code to open the print dialog.

Please see the following video preview of how this script works:

Table of Contents

1 Tutorial print report without open new page with Javascript
- 1.1 Similarly, a brief article about how to print the report without open new page with javascript

Tutorial print report without open new page with Javascript

1. Create an index.php file and copy the following code :

<!DOCTYPE html>
<html>
<head>
	<title>How to print report without open new tab in browser</title>
</head>
<body>
	
<h1>How to print report without open new tab in browser</h1>
<h2>seegatesite.com</h2>
	<button id="btn1">Invoice 1</button>
	<button id="btn2">Invoice 2</button>
<h1>PRINT DIRECTLY REPORT PAGE FROM BROWSER</h1>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<script>

$("#btn1").click(function(){
    $("#printabel").remove();
    loadOtherPage1();
});
$("#btn2").click(function(){
    $("#printabel").remove();

    loadOtherPage2();
});

function loadOtherPage1() {
    $("<iframe id='printabel'>")    
        .hide()                     
        .attr("src", "invoice.php") 
        .appendTo("body");           
    }
    function loadOtherPage2() {
    $("<iframe id='printabel'>")     
        .hide()                      
        .attr("src", "invoice2.php") 
        .appendTo("body");           
    }

    </script>
</body>

    </html>

<!DOCTYPE html>

<html>

<head>

<title>How to print report without open new tab in browser</title>

</head>

<body>

<h1>How to print report without open new tab in browser</h1>

<h2>seegatesite.com</h2>

<button id="btn1">Invoice 1</button>

<button id="btn2">Invoice 2</button>

<h1>PRINT DIRECTLY REPORT PAGE FROM BROWSER</h1>

$("#btn1").click(function(){

$("#printabel").remove();

loadOtherPage1();

});

$("#btn2").click(function(){

$("#printabel").remove();

loadOtherPage2();

});

function loadOtherPage1() {

$("<iframe id='printabel'>")

.hide()

.attr("src", "invoice.php")

.appendTo("body");

}

function loadOtherPage2() {

$("<iframe id='printabel'>")

.hide()

.attr("src", "invoice2.php")

.appendTo("body");

}

</script>

</body>

</html>

2. Create 2 pieces of files with names invoice.php, invoice2.php

3. Copy the following code and copy to the invoice.php

<!DOCTYPE html>
<html>
<head>
    <style type="text/css" media="print">
  @page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */
    padding: 30px;
  }
  body{
    padding: 30px;
  }
  </style>
</head>
<body>
  <p>Hello world, print me please</p>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script>
  $(document).ready(function () {
    window.print();
  });
  </script>
</body>
</html>