kcp.print.js
4.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// <--- --------------------------------------------------------------------------------------- ----
// Blog Entry:
// Ask Ben: Print Part Of A Web Page With jQuery
// Author:
// Ben Nadel / Kinky Solutions
// Link:
// http://www.bennadel.com/index.cfm?event=blog.view&id=1591
// Date Posted:
// May 21, 2009 at 9:10 PM
// ---- --------------------------------------------------------------------------------------- --->
// 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;
}
var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');
// var imgelem = chart.jqplotToImageElem();
var imageElemStr = chart.jqplotToImageElemStr();
// var statsrows = $(this).closest('div.quintile-outer-container').find('table.stats-table tr');
var statsTable = $('<div></div>').append($(this).closest('div.quintile-outer-container').find('table.stats-table').clone());
// var rowstyles = window.getComputedStyle(statsrows.get(0), '');
// 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( "</head>" );
// Typically, would just write out the html.
// objDoc.write( this.html() );
// We need to do specific manipulation for kcp quintiles.
objDoc.write( '<div class="quintile-outer-container ui-widget ui-corner-all"> \
<div class="quintile-content ui-widget-content ui-corner-bottom"> \
<table class="quintile-display"> \
<tr> \
<td class="chart-cell">');
objDoc.write(imageElemStr);
objDoc.write('</td> <td class="stats-cell">');
objDoc.write(statsTable.html());
objDoc.write('</td></tr></table></div></div>');
objDoc.write( "</body>" );
objDoc.write( "</html>" );
objDoc.close();
//
// When the iframe is completely loaded, print it.
// This seemed worked in IE 9, but caused problems in FF.
//
// $(objFrame).load(function() {
// objFrame.focus();
// objFrame.print();
// });
//
// This works in all supported browsers.
// Note, might have to adjust time.
//
setTimeout(
function() {
objFrame.focus();
objFrame.print();
}, 750);
// Have the frame remove itself in about a minute so that
// we don't build up too many of these frames.
setTimeout(
function(){
jFrame.empty();
jFrame.remove();
},
(60 * 1000)
);
}