<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="WebApplication1.Test1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.print.js" type="text/javascript"></script>
<script type="text/javascript">
// 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")
.attr("href", "javascript:void( 0 )")
.click(
function () {
// Print the DIV.
$(".printable").print();
// Cancel click event.
return (false);
}
);
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>
Print Part of a Page With jQuery
</h1>
<p>
<a>Print Bio</a>
</p>
<div class="printable">
<h2>
Jen Rish
</h2>
<p>
Jen Rish, upcoming fitness and figure model has some crazy developed legs!
</p>
<p>
<img src="Form2.png" width="380" height="570" alt="Jen Rish Has Amazing Legs!" />
</p>
<p>
I bet she does some <strong>serious squatting</strong>!
</p>
</div>
</form>
</body>
</html>
=====================jQuery.print.js===========
// Create a jquery plugin that prints the given element.
jQuery.fn.print = function(){
// 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
// tags into IE.
var jStyleDiv = $( "<div>" ).append(
$( "style" ).clone()
);
// 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( document.title );
objDoc.write( "</title>" );
objDoc.write( jStyleDiv.html() );
objDoc.write("<style type=\"text/css\"> @import url(\"./CSS.css\") </style>");
//console.log(this.html());
objDoc.write( "</head>" );
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)
);
}
======================
No comments:
Post a Comment