How to print some specific part of a page via window.print()

Question

i'm working on a form in php mysql. so in my page there is a form and below that i shown the data of that form in table format.now i want to print only the table structure thats why i just made a PRINT button as:

<span style="float:right;"><a href="javascript:window.print()" type="button" class="btn">PRINT</a></span>

but it will print the whole page with form field and table and i just want the tableto print. Here is the design of my whole page with form and table:

<html>
<head></head>
<body>
 <div class="container">
 <form class="form-horizontal" action="" method="post" name="userform1" id="company-form" enctype="multipart/form-data">
     <?php if($_GET[id]){?>


<fieldset>
     <legend>Add Company</legend>
    <div class="control-group">
    <label class="control-label">Company Name</label>
    <div class="controls">
    <input type="text" name="company" id="company" value="<?php echo $selup['company']?>">
    </div>
    </div>
<div class="control-group">another field</div>
<div class="control-group">another field</div>
<div class="control-group">
    <div class="controls">
    <button type="submit" class="btn" name="submit" id="submit" value="Submit">Submit</button>
    </div>
    </div>
<table class="table table-bordered">
           <tbody>
            <tr>
                <td>S.No.</td>
                <td>Company Name</td>
                <td>Type</td>
                <td>Action</td>
          </tr>
                 <?php 
                 // to print the records
                $select = "select * from company where type='Miscellaneous'";
                $query1 = mysql_query($select);  
                 while($value = mysql_fetch_array($query1)){ ?>

                <tr>
                <td><?php echo $value[id];?></td>
                <td><?php echo $value[company ];?></td>
                <td><?php echo $value[type];?></td>
                <!--<td>&nbsp;</td>-->
                <?php /*?><td><?php echo $value[amount];?></td>               
                <td><?php echo $value[date];?></td><?php */?>
                <td><a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=<?php echo $value[id];?>&cmd=edit"><i class="icon-edit"></i></a>
               <a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=<?php  echo $value[id];?>&cmd=delete" onclick="return confirm('Are you sure you want to delete <?php  echo $value[customer];?>?')"><i class="icon-trash"></i></a></td>


                </tr><?php }?>
        </tbody>
       </table>
</fieldset>
<form>
</div>
</body>

so i just want to print the table not whole page.

Possible Duplicate: http://stackoverflow.com/questions/11738380/why-does-it-print-only-one-time-please-give-me-solution/11738592#11738592 — Ahsan Khurshid, Jul 31 '13 at 08:13
Try this answer: http://stackoverflow.com/a/26114555/3944217 — Edwin Thomas, Aug 14 '15 at 08:58

score 12 · Accepted Answer · answered Jul 31 '13 at 08:09

12

Use css to hide elements you don't want to print:

@media print {
    .control-group {
      display: none;
    }
}

answered Jul 31 '13 at 08:09

Marek

7,337
1
22
33

i have done it but some reasons its not working for me..:( as i mentioned i have aal the things on same page. – Montiyago Jul 31 '13 at 09:31

score 6 · Answer 2 · answered Apr 06 '16 at 06:23

function printContent(el){
    var restorepage = document.body.innerHTML;
    var printcontent = document.getElementById(el).innerHTML;
    document.body.innerHTML = printcontent;
    window.print();
    document.body.innerHTML = restorepage;
}

<!DOCTYPE html>
<html>
<head>

</head> 
<body> 
<h1>My page</h1>
<div id="div1">DIV 1 content...</div>
<button onclick="printContent('div1')">Print Content</button>
<div id="div2">DIV 2 content...</div>
<button onclick="printContent('div2')">Print Content</button>
<p id="p1">Paragraph 1 content...</p>
<button onclick="printContent('p1')">Print Content</button>
</body> 
</html>

tobspr · Answer 3 · 2013-07-31T08:38:05.373

4

You could make a print-css (which does the same as @media print, but I think it is cleaner, and you can disable the css include via javascript, if you need it):

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

In that css, you hide all elements which should not get printed, for example:

.wrapper, .header {display: none;}

edited Jul 31 '13 at 08:38

answered Jul 31 '13 at 08:09

tobspr

8,200
5
33
46

thanks for ur precious help but for some reason its not working for me. – Montiyago Jul 31 '13 at 10:00

score 3 · Answer 4 · answered Jul 31 '13 at 08:07

3

One posible solution, perhaps not the best option:

1. Open a new window with JS
2. Copy the whole table into the new window (with jQuery for example)
3. Print the new window
4. Close the window

Sure it has a blink effect but It will work.

answered Jul 31 '13 at 08:07

m4t1t0

5,669
3
22
30

How to print some specific part of a page via window.print()

4 Answers4

Linked