Printing Specific Part of HTML document

Question

I know this question has an Already been asked but I am using Different and Short Approach.

I have print button for printing Invoice in my web page

<button class="print" onclick="window.print()">Print</button>

The Problem is it prints the whole document including print button is their any way to exclude print button from printing in document

You can set custom CSS for when the user is printing to hide different parts of the page just google "css print style" https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/ — Clay, Sep 06 '18 at 16:27

score 2 · Accepted Answer · answered Sep 06 '18 at 16:49

I just have to add

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

in my head part of the page

print.css is as below

body {visibility:hidden;}

.print {visibility:visible;}

Also we had to assign class="print" to to html element which we want to print

Thanks to @Clay

score 0 · Answer 2 · answered Sep 06 '18 at 16:38

0

change onclick function like this

<button class="print" onclick="this.style.visibility='hidden';window.print();">Print</button>

answered Sep 06 '18 at 16:38

Mark Salvania

2 Answers2