We often need to print our output so that we can take a hard copy of that by printing it. To achieve this, we need to allow users to print a page or a section, div, span of HTML page. JQuery has a great plugin which is very easy to use and even allow us to tweak/configure printing. Here we are talking about JQuery.print.jswhich you can download from HERE.
Using this plugin we can print any Text content in a div or a span as shown below:
Usage is quiet simple:
<script type="text/JavaScript" src="path/to/jquery.print.js" />
And use below in document.ready() function
$("#myElementId").print(/*options*/);
or
$.print("#myElementId" /*, options*/);
Advance parameters are below:
$("#myElementId").print({
addGlobalStyles : true,
stylesheet : null,
rejectWindow : true,
noPrintSelector : ".no-print",
iframe : true,
append : null,
prepend : null
});
Sample Code:
Download JQuery.print.js and Put below code in your tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jQuery.print.js"></script>
<script>
$(document).ready(function() {
$(".print_div").find('button').on('click', function() {
var dv_id = $(this).parents(".print_div").attr('id');
//Print ele4 with custom options
$('#' + dv_id).print({
//Use Global styles
globalStyles: false,
//Add link with attrbute media=print
mediaPrint: false,
//Custom stylesheet
stylesheet: "http://fonts.googleapis.com/css?family=Inconsolata",
//Print in a hidden iframe
iframe: true,
//Don't print this
noPrintSelector: ".avoid-this"
});
});
});
</script>
<div class="content">
<div class="heading">
Print Page or Section of Page using JQuery
</div>
<div id='dv1'>
<div id='print-div1' class="print_div"><b>Print Text</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,<button class="print-link avoid-this"> Print this </button></div>
<div id='print-div2' class="print_div"><b>Print Text with Image </b><img src="jquery-devzone.co.in.png" height="100" width="150"/>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,<button class="print-link avoid-this"> Print this </button></div>
<div id='print-div3' class="print_div">
<b>Print Table </b>
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<table class="gridtable">
<tr>
<th>Header 1</th><th>Header 2</th><th>Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>
<button class="print-link avoid-this"> Print this</button>
</div>
</div>
<div style="clear:both;"></div>
<button class="print-link avoid-this" onclick="$('body').print({noPrintSelector: '.avoid-this'});"> Print Page </button> </div></div>
Download Code Sample:
https://drive.google.com/file/d/0B-CQMvJeiunsS3BTcGhraVlVMlU/view?usp=sharing
No comments:
Post a Comment