Pages

Thursday, 11 September 2014

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

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

.Aspx File
 
 <html data-ng-app="myApp">
<head>
    <title>demo</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0Bw4NrxH2nTVqbmVOVkdOenhDU0U"></script>
<script type="text/javascript">
    $(function () {
        $("#hrefPrint").click(function () {
            $("#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>
        <div id="printdiv" class="printable">
<h2>
fantasyaspnet.blogspot.in
&nbsp;&nbsp;&nbsp;<a href="#" id="hrefPrint">Print DIV</a>
</h2>
<p>
Welcome to fantasyaspnet.blogspot.in. It will provide many articles relating asp.net, c#, sql server, jquery, json etc...
</p>
<p>
</p>
</div>
    </div>
</body>
</html>

Demo:

fantasyaspnet.blogspot.in    Print DIV

Welcome to fantasyaspnet.blogspot.in. It will provide many articles relating asp.net, c#, sql server, jquery, json etc...



No comments:

Post a Comment