zwwcn

Just another WordPress.com site

print css example

I had a task to print a dashboard page.  The print review looks quite different from the web page, so I have to create a print css to customize the display.

Create a print link on the page to call the below function.

		function printDiv() {					    
                     //backup dom
		     var originalContents = document.body.innerHTML;
		     
                     //make whatever change you want, remove unnecessary elements	
	             $("li").removeClass("gs-w");
		
                     //print the modified page
		     window.print();

                     //reset page 	
	             document.body.innerHTML = originalContents;
		}

Include the css on the page,  apply the page break only in print mode.

@media all {
	.page-break {
		display: none !important;
	}
}

@media print {
	html, body, ul {
		float: none !important;
	}
	.page-break {
		display: block;
		page-break-after: always;
	}
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: