2

I want to print my table data onclick. I use the following JavaScript code: 

<input type="button" name="print" id="print" value="Print" onclick="myFunction()"/>

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

But the code prints the entire web page.
I want to print only my table like printing a receipt how to do it?

Dakkaron
  • 5,930
  • 2
  • 36
  • 51
Smit Saraiya
  • 391
  • 1
  • 5
  • 26
  • 1
    Why not just use an `@media print` stylesheet set everything you don't want to print to `display: none;` ? – CD001 Aug 22 '16 at 12:54
  • Add [print media CSS rules](https://developer.mozilla.org/en/docs/Web/CSS/@media) that hide all the unnecessary/unwanted elements. – Phylogenesis Aug 22 '16 at 12:55
  • You can use css and media queries to hide content you don't want to be printed. Like this question: http://stackoverflow.com/questions/3463796/how-to-only-show-certain-parts-with-css-for-print – Muriano Aug 22 '16 at 12:55

2 Answers2

1

Solution is to use print CSS styles. In your existing CSS stylesheet, add the following section.

@media print {

}

Within @media block hide everything you don't want to show on print. Like this,

@media print {
    .classTOHide {
        display: none;
    }
}

@media print denotes the CSS styles which get applies while printing page only.

You can also attach entire stylesheet to be used while printing by using media attribute of link tag. Like this,

<link rel="stylesheet" type="text/css" media="print" href="styles.css">
Alok Patel
  • 7,842
  • 5
  • 31
  • 47
0

I have done this using JavaScript it is so easy

<td align="center" colspan="2">
       <input type="button" name="print" id="print" value="Print" onclick="myFunction()"/>
    </td>

and in script tag:-

<script>
function myFunction() 
{
    document.form1.print.hidden="true";
    window.print();

}
</script>

It will display header and footer but when browser show print preview option uncheck header-footer

Smit Saraiya
  • 391
  • 1
  • 5
  • 26