2

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.

1
  • Create a print-specific style sheet.
    – j08691
    Oct 17, 2012 at 16:19

3 Answers 3

3

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.

1
  • Awesome, i have no idea CSS could do this. Thanks a lot.
    – ragebunny
    Oct 17, 2012 at 16:20
2

Use css @media print. See css media types http://www.w3schools.com/css/css_mediatypes.asp.

-1

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.

This now loads the print preview page in chrome when i click the print link on the previous page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.