| 9 |
lars |
1 |
// <--- --------------------------------------------------------------------------------------- ----
|
|
|
2 |
|
|
|
3 |
// Blog Entry:
|
|
|
4 |
// Ask Ben: Print Part Of A Web Page With jQuery
|
|
|
5 |
|
|
|
6 |
// Author:
|
|
|
7 |
// Ben Nadel / Kinky Solutions
|
|
|
8 |
|
|
|
9 |
// Link:
|
|
|
10 |
// http://www.bennadel.com/index.cfm?event=blog.view&id=1591
|
|
|
11 |
|
|
|
12 |
// Date Posted:
|
|
|
13 |
// May 21, 2009 at 9:10 PM
|
|
|
14 |
|
|
|
15 |
// ---- --------------------------------------------------------------------------------------- --->
|
|
|
16 |
|
|
|
17 |
|
|
|
18 |
// Create a jquery plugin that prints the given element.
|
|
|
19 |
jQuery.fn.print = function(){
|
|
|
20 |
// NOTE: We are trimming the jQuery collection down to the
|
|
|
21 |
// first element in the collection.
|
|
|
22 |
if (this.size() > 1){
|
|
|
23 |
this.eq( 0 ).print();
|
|
|
24 |
return;
|
|
|
25 |
} else if (!this.size()){
|
|
|
26 |
return;
|
|
|
27 |
}
|
|
|
28 |
|
|
|
29 |
var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');
|
|
|
30 |
// var imgelem = chart.jqplotToImageElem();
|
|
|
31 |
var imageElemStr = chart.jqplotToImageElemStr();
|
|
|
32 |
// var statsrows = $(this).closest('div.quintile-outer-container').find('table.stats-table tr');
|
|
|
33 |
var statsTable = $('<div></div>').append($(this).closest('div.quintile-outer-container').find('table.stats-table').clone());
|
|
|
34 |
// var rowstyles = window.getComputedStyle(statsrows.get(0), '');
|
|
|
35 |
|
|
|
36 |
// ASSERT: At this point, we know that the current jQuery
|
|
|
37 |
// collection (as defined by THIS), contains only one
|
|
|
38 |
// printable element.
|
|
|
39 |
|
|
|
40 |
// Create a random name for the print frame.
|
|
|
41 |
var strFrameName = ("printer-" + (new Date()).getTime());
|
|
|
42 |
|
|
|
43 |
// Create an iFrame with the new name.
|
|
|
44 |
var jFrame = $( "<iframe name='" + strFrameName + "'>" );
|
|
|
45 |
|
|
|
46 |
// Hide the frame (sort of) and attach to the body.
|
|
|
47 |
jFrame
|
|
|
48 |
.css( "width", "1px" )
|
|
|
49 |
.css( "height", "1px" )
|
|
|
50 |
.css( "position", "absolute" )
|
|
|
51 |
.css( "left", "-9999px" )
|
|
|
52 |
.appendTo( $( "body:first" ) )
|
|
|
53 |
;
|
|
|
54 |
|
|
|
55 |
// Get a FRAMES reference to the new frame.
|
|
|
56 |
var objFrame = window.frames[ strFrameName ];
|
|
|
57 |
|
|
|
58 |
// Get a reference to the DOM in the new frame.
|
|
|
59 |
var objDoc = objFrame.document;
|
|
|
60 |
|
|
|
61 |
// Grab all the style tags and copy to the new
|
|
|
62 |
// document so that we capture look and feel of
|
|
|
63 |
// the current document.
|
|
|
64 |
|
|
|
65 |
// Create a temp document DIV to hold the style tags.
|
|
|
66 |
// This is the only way I could find to get the style
|
|
|
67 |
// tags into IE.
|
|
|
68 |
var jStyleDiv = $( "<div>" ).append(
|
|
|
69 |
$( "style" ).clone()
|
|
|
70 |
);
|
|
|
71 |
|
|
|
72 |
// Write the HTML for the document. In this, we will
|
|
|
73 |
// write out the HTML of the current element.
|
|
|
74 |
objDoc.open();
|
|
|
75 |
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
|
|
|
76 |
objDoc.write( "<html>" );
|
|
|
77 |
objDoc.write( "<body>" );
|
|
|
78 |
objDoc.write( "<head>" );
|
|
|
79 |
objDoc.write( "<title>" );
|
|
|
80 |
objDoc.write( document.title );
|
|
|
81 |
objDoc.write( "</title>" );
|
|
|
82 |
objDoc.write( jStyleDiv.html() );
|
|
|
83 |
objDoc.write( "</head>" );
|
|
|
84 |
|
|
|
85 |
// Typically, would just write out the html.
|
|
|
86 |
// objDoc.write( this.html() );
|
|
|
87 |
|
|
|
88 |
// We need to do specific manipulation for kcp quintiles.
|
|
|
89 |
objDoc.write( '<div class="quintile-outer-container ui-widget ui-corner-all"> \
|
|
|
90 |
<div class="quintile-content ui-widget-content ui-corner-bottom"> \
|
|
|
91 |
<table class="quintile-display"> \
|
|
|
92 |
<tr> \
|
|
|
93 |
<td class="chart-cell">');
|
|
|
94 |
|
|
|
95 |
objDoc.write(imageElemStr);
|
|
|
96 |
|
|
|
97 |
objDoc.write('</td> <td class="stats-cell">');
|
|
|
98 |
|
|
|
99 |
objDoc.write(statsTable.html());
|
|
|
100 |
|
|
|
101 |
objDoc.write('</td></tr></table></div></div>');
|
|
|
102 |
|
|
|
103 |
objDoc.write( "</body>" );
|
|
|
104 |
objDoc.write( "</html>" );
|
|
|
105 |
objDoc.close();
|
|
|
106 |
|
|
|
107 |
//
|
|
|
108 |
// When the iframe is completely loaded, print it.
|
|
|
109 |
// This seemed worked in IE 9, but caused problems in FF.
|
|
|
110 |
//
|
|
|
111 |
// $(objFrame).load(function() {
|
|
|
112 |
// objFrame.focus();
|
|
|
113 |
// objFrame.print();
|
|
|
114 |
// });
|
|
|
115 |
|
|
|
116 |
//
|
|
|
117 |
// This works in all supported browsers.
|
|
|
118 |
// Note, might have to adjust time.
|
|
|
119 |
//
|
|
|
120 |
setTimeout(
|
|
|
121 |
function() {
|
|
|
122 |
objFrame.focus();
|
|
|
123 |
objFrame.print();
|
|
|
124 |
}, 750);
|
|
|
125 |
|
|
|
126 |
|
|
|
127 |
// Have the frame remove itself in about a minute so that
|
|
|
128 |
// we don't build up too many of these frames.
|
|
|
129 |
setTimeout(
|
|
|
130 |
function(){
|
|
|
131 |
jFrame.empty();
|
|
|
132 |
jFrame.remove();
|
|
|
133 |
},
|
|
|
134 |
(60 * 1000)
|
|
|
135 |
);
|
|
|
136 |
}
|