Question

I have made an invoice system for a website and i want to be able to print just the invoice (Non of the website graphics) so i set up a page that only has what i want to be printed and a button at the bottom of the page that says print now, it does what it says.

The problem is the printed page still has the print button on it obviously. I want to know if there is a way i can have a print button but be able to get rid of the button just for when it prints?

This is the code i am using the print the page:

<form>
    <input type="button" value=" Print this page" 
        onclick="window.print();return false;" />
</form>

So is there a way of doing this, a simple way?

Thanks for the time.

I just realised that i could put the “window.print();return false;” on the “onload” section in the body tag of my HTML, then i can delete the button and all is good.

Answer 1

You’ll need to use CSS to target print media:

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

Add some way to target your print button

<input type="button" value=" Print this page" class="button-print" onclick="window.print();return false;" />

And in print.css hide your button

.button-print {
    display:none;
}

You can do loads of other stuff to make your page more printable too. Here’s a good article about it

Alternatively you can use a print CSS media query in your main CSS file, but if you want to support earlier versions of IE (http://caniuse.com/#search=media) you’re best going with the first approach.