• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Trick How To Print Report Without Open New Tab Page With Javascript

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

By Sigit Prasetya Nugroho ∙ January 18, 2017 ∙ Javascript ∙ 1 Comment

Share : TwitterFacebookTelegramWhatsapp

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.

How To Print Report Without Open New Tab In Browser

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:

Related Articles :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • How To Use JQuery Input File / Upload File Change Event
  • An Easy Way To Remove Attribute In HTML Element Using JQuery

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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>

5. Please copy the invoice template from https://github.com/WesCossick and paste to the invoice2.php

6. Put index.php, invoice.php, invoice2.php in one folder

7. Open a browser and run index.php

Finished , please run it on your browser

References:
http://stackoverflow.com/questions/8240472/printing-a-web-page-using-just-url-and-without-opening-new-window

http://stackoverflow.com/questions/585254/how-to-remove-the-url-from-the-printing-page

Similarly, a brief article about how to print the report without open new page with javascript

Another Javascript Related Post :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for IRSHADIRSHAD says

    February 18, 2019 at 10:57 am

    THIS IS WORK FINE, BUT WITH CLEAN URL NOT WORKING PLEASE SUGGEST ME SOME GUIDELINES, THANKS

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for IRSHADThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com