aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Print DIV Content with CSS using jQuery Print Plugin in JavaScript

Aug 1, 2013

Here I will explain how to use
jQuery or JavaScript to print div content with css using jQuery print plugin or jQuery Print particular div without opening new window with JavaScript.

In previous articles I explained
disable right click on image using JQuery, jQuery Disable right click on webpage, Refresh or reload page using jQuery, jQuery expand textbox on focus and many articles relating to JQuery, JavaScript, css. Now I will explain how to print particular div content with css using jQuery print plugin.

To implement this one we need to write code as shown below in your page

<title>jQuery Print Particular DIV using jQuery Print Plugin</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery.print.js"></script>
<script type="text/javascript">
$(function() {
$("#hrefPrint").click(function() {
// Print the DIV.
return (false);
<style type="text/css">
body {
font-family: verdana ;
font-size: 14px ;
h1 {
font-size: 180% ;
h2 {
border-bottom: 1px solid #999999 ;
.printable {
border: 1px dotted #CCCCCC ;
padding: 10px 10px 10px 10px ;
img {
background-color: #E0E0E0 ;
border: 1px solid #666666 ;
padding: 5px 5px 5px 5px ;
a {
color: red ;
<div id="printdiv" class="printable">
&nbsp;&nbsp;&nbsp;<a href="#" id="hrefPrint">Print DIV</a>
Welcome to It will provide many articles relating, c#, sql server, jquery, json etc...
<img src="AS.jpg" />
If you observe above code in header section I added script file jquery.print.js by using this plugin we can print the div content whatever we want including css. If you want to get download it from attached folder. 


Once we run above code our screen will be like this


Once we click on Print DIV we will get output like this

Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Rakesh chaubey said...


gopesh porwal said...

hello i hav a problem related to xml.
but i didnt find any result in your websit or nay other website so pls help me, my problems is
i hav a xml file deals.xml in which i hav to select some values like select * from deals.xml where id=5; (in sql)
i need a xml code for c# in which if some one enter value the he can able to find all value of that node.

gopesh porwal said...


Anonymous said...

Please also add date wise as earlier it was easier for me to search post from previous posts

Anonymous said...

Sir Plz Tell Me the method for implement that control(Facebook) which you used in your website in right side...
sir plz give me the answer bcoz this is my 4th request....

Anonymous said...

Thanks a lot it worked for me :) :) :) :) :)

Anonymous said...

The Plugin does not support css,
I have updated the js. a bit .

Anonymous said...

Its not working in IE....

Anonymous said...


Anonymous said...

really nice. It's working great for me...

Emma said...

It's fantastic! Very helpful!

Can you please share, how can we change the "Title"/"Header"/"Footer" while printing the page.

Anonymous said...

Hi Suresh,

May know how to print two different div in a single click and single page one by one...

Anonymous said...

Hi Suresh,

Thanks for sharing the code, the functionality is working perfectly.
The only problem I'm facing is that am not getting a print preview in Firefox and IE like it appears in Google Chrome.

Muhammad said...

Why is it such a big rocket science to provide a working demo instead of images?

satya said...


I need to print one design which I am not able to figure out.

Please see this

Please help

Thank you

Anonymous said...

Hi ,

I am already havind a CSS file in the application How to include that ?

also When i print in IE , it is printing entire page not the content of DIV

Please help me on this

Thanks & regards

Anonymous said...


Ezhil Selvan said...


I have an issue while using this code in my page. It shows
TypeError: $(...).print is not a function


Will u kindly help me.

Ezhil Selvan said...


While clik the cancel button i got this error

TypeError: $(...).dialog is not a function

"Cancel": function() {$(this).dialog("close");},

Anonymous said...

Thanks a lot!

sushil rai said...

It's not showing Print Preview on IE please do it something

Lakhpat Singh said...

Dear Sir,

Thanks for sharing this article, the functionality is working perfectly for full page.
I want to print a single line on Dot-Matrix-Printer with Roll-Paper. Could you help me.
Thanks in advance.
Lakhpat Singh (Jagadhri) Haryana

Anonymous said...

Hello sir,

please help me

How to convert div as a image jquery in c#

Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.