Jquery plugin:
// Create a jquery plugin that prints the given element.
jQuery.fn.print = function(sitePath,titleUsed){
// NOTE: We are trimming the jQuery collection down to the
// first element in the collection.
if (this.size() > 1){
this.eq( 0 ).print();
return;
} else if (!this.size()){
return;
}
// ASSERT: At this point, we know that the current jQuery
// collection (as defined by THIS), contains only one
// printable element.
// Create a random name for the print frame.
var strFrameName = ("printer-" + (new Date()).getTime());
// Create an iFrame with the new name.
var jFrame = $( "<iframe name='" + strFrameName + "'>" );
// Hide the frame (sort of) and attach to the body.
jFrame
.css( "width", "1px" )
.css( "height", "1px" )
.css( "position", "absolute" )
.css( "left", "-9999px" )
.appendTo( $( "body:first" ) )
;
// Get a FRAMES reference to the new frame.
var objFrame = window.frames[ strFrameName ];
// Get a reference to the DOM in the new frame.
var objDoc = objFrame.document;
// Grab all the style tags and copy to the new
// document so that we capture look and feel of
// the current document.
// Create a temp document DIV to hold the style tags.
// This is the only way I could find to get the style
var cssLink = '<link rel="stylesheet" type="text/css" href="'+sitePath+'jprint.css" media="print"/>';
// Write the HTML for the document. In this, we will
// write out the HTML of the current element.
objDoc.open();
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
objDoc.write( "<html>" );
objDoc.write( "<body>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write(titleUsed);
objDoc.write( "</title>" );
objDoc.write(cssLink);
objDoc.write( "</head>" );
alert(this.html());
objDoc.write( this.html() );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
objDoc.close();
// Print the document.
objFrame.focus();
objFrame.print();
// Have the frame remove itself in about a minute so that
// we don't build up too many of these frames.
setTimeout(
function(){
jFrame.remove();
},
(60 * 1000)
);
}
/********************************************************************/
jprint.css
body{
padding:0px;
margin:0px;
font:normal 12pt Arial, Helvetica, sans-serif;
background: #FFFFFF;
color: #000000;
}
.printable {
padding: 10px 10px 10px 10px ;
}
img{
background-color: #E0E0E0 ;
border: 1px solid #666666 ;
padding: 5px 5px 5px 5px ;
}
table{
width:99%;
border:#9e9e9e solid 1px;
margin:0 0 5px 0;
font:normal 13px Arial, Helvetica, sans-serif;
}
table th{
padding:10px 8px 12px 8px;
text-align:left;
background-color:#FAFAFA;
}
table td{
padding:8px;
text-align:left;
}
table tr{
background-color:#f2f2f2;
}
table tr.alternet{
background-color:#e0e0e0;
}
table td.Heading{
height:35px;
padding:0px 0 0 10px;
border-bottom:#9e9e9e solid 1px;
font:normal 15px Arial, Helvetica, sans-serif;
color:#fff;
}
a:link, a:visited {
color: #000000;
background: transparent;
font-weight: bold;
text-decoration: none;
}
/****************************************************************/
Usage
$(document).ready(function(){
// When the document is ready, initialize the link so
// that when it is clicked, the printable area of the
// page will print.
$(function(){
// Hook up the print link.
$( "a#print_icon" )
.attr( "href", "javascript:void( 0 )" )
.click(
function(){
// Print the DIV.
//@param1 - site URL
//@param2 - Title of the page
$( ".printable" ).print('<?php echo SITE_HTTP_URL;?>','Invoices');
// Cancel click event.
return( false );
}
);
});
});
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment