Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 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
Introduction

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.

Description:
  
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


<html>
<head>
<title>jQuery Print Particular DIV using jQuery Print Plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.print.js"></script>
<script type="text/javascript">
$(function() {
$("#hrefPrint").click(function() {
// Print the DIV.
$("#printdiv").print();
return (false);
});
});
</script>
<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 ;
font-weight:bold;
}
</style>
</head>
<body>
<div id="printdiv" class="printable">
<h2>
Aspdotnet-Suresh.com
&nbsp;&nbsp;&nbsp;<a href="#" id="hrefPrint">Print DIV</a>
</h2>
<p>
Welcome to Aspdotnet-Suresh.com. It will provide many articles relating asp.net, c#, sql server, jquery, json etc...
</p>
<p>
<img src="AS.jpg" />
</p>
</div>
</body>
</html>
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. 

Demo

Once we run above code our screen will be like this


Output

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 Asp.net, C#.net, 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

25 comments :

Rakesh chaubey said...

Thanks

Anonymous 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@gmail.com
gporwal

Anonymous said...

9329159889

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 .

http://yourjavascript.com/93120381210/jquery-print.js

Anonymous said...

Its not working in IE....

Anonymous said...

NOT WORKING IN IE. CHECK IN ALL BROWSERS BEFORE PASTING THE CODE.

Anonymous said...

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

$N€ 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...

Hi,

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

Please see this http://uidevil.com/design/

Please help

Thank you
Satya

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
manoj

Anonymous said...

Thanks...

Unknown said...

Hi,

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


$("#dialog").print();

Will u kindly help me.

Unknown said...

Hi,

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!

Unknown said...

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

Unknown 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.
From:
Lakhpat Singh (Jagadhri) Haryana

Anonymous said...

Hello sir,

please help me

How to convert div as a image jquery in asp.net c#

Unknown said...

i have also this type error
TypeError: $(...).print is not a function

Unknown said...

not working

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

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