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.
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
<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 Email
|
|||
25 comments :
Thanks
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
9329159889
Please also add date wise as earlier it was easier for me to search post from previous posts
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....
Thanks a lot it worked for me :) :) :) :) :)
The Plugin does not support css,
I have updated the js. a bit .
http://yourjavascript.com/93120381210/jquery-print.js
Its not working in IE....
NOT WORKING IN IE. CHECK IN ALL BROWSERS BEFORE PASTING THE CODE.
really nice. It's working great for me...
It's fantastic! Very helpful!
Can you please share, how can we change the "Title"/"Header"/"Footer" while printing the page.
Hi Suresh,
May know how to print two different div in a single click and single page one by one...
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.
Why is it such a big rocket science to provide a working demo instead of images?
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
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
Thanks...
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.
Hi,
While clik the cancel button i got this error
TypeError: $(...).dialog is not a function
"Cancel": function() {$(this).dialog("close");},
Thanks a lot!
It's not showing Print Preview on IE please do it something
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
Hello sir,
please help me
How to convert div as a image jquery in asp.net c#
i have also this type error
TypeError: $(...).print is not a function
not working
Note: Only a member of this blog may post a comment.