How can Print Preview be called from Javascript?
JavascriptPrintingJavascript Problem Overview
I have a page that is supposed to launch the Print Preview page onload.
I found this:
var OLECMDID = 7;
/* OLECMDID values:
* 6 - print
* 7 - print preview
* 1 - open window
* 4 - Save As
*/
var PROMPT = 1; // 2 DONTPROMPTUSER
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = "";
But...
- it does not work in FireFox.
- it's kind of ugly.
Is there a better way for IE or a way that works for FireFox?
Javascript Solutions
Solution 1 - Javascript
You can't, Print Preview is a feature of a browser, and therefore should be protected from being called by JavaScript as it would be a security risk.
That's why your example uses Active X, which bypasses the JavaScript security issues.
So instead use the print stylesheet that you already should have and show it for media=screen,print instead of media=print.
Read Alist Apart: Going to Print for a good article on the subject of print stylesheets.
Solution 2 - Javascript
I think the best that's possible in cross-browser JavaScript is window.print(), which (in Firefox 3, for me) brings up the 'print' dialog and not the print preview dialog.
FYI, the print dialog is your computer's Print popup, what you get when you do Ctrl-p. The print preview is Firefox's own Preview window, and it has more options. It's what you get with Firefox Menu > Print...
Solution 3 - Javascript
It can be done using javascript. Say your html/aspx code goes this way:
<span>Main heading</span>
<asp:Label ID="lbl1" runat="server" Text="Contents"></asp:Label>
<asp:Label Text="Contractor Name" ID="lblCont" runat="server"></asp:Label>
<div id="forPrintPreview">
<asp:Label Text="Company Name" runat="server"></asp:Label>
<asp:GridView runat="server">
//GridView Content goes here
</asp:GridView
</div>
<input type="button" onclick="PrintPreview();" value="Print Preview" />
Here on click of "Print Preview" button we will open a window with data for print. Observe that 'forPrintPreview' is the id of a div. The function for Print preview goes this way:
function PrintPreview() {
var Contractor= $('span[id*="lblCont"]').html();
printWindow = window.open("", "", "location=1,status=1,scrollbars=1,width=650,height=600");
printWindow.document.write('<html><head>');
printWindow.document.write('<style type="text/css">@media print{.no-print, .no-print *{display: none !important;}</style>');
printWindow.document.write('</head><body>');
printWindow.document.write('<div style="width:100%;text-align:right">');
//Print and cancel button
printWindow.document.write('<input type="button" id="btnPrint" value="Print" class="no-print" style="width:100px" onclick="window.print()" />');
printWindow.document.write('<input type="button" id="btnCancel" value="Cancel" class="no-print" style="width:100px" onclick="window.close()" />');
printWindow.document.write('</div>');
//You can include any data this way.
printWindow.document.write('<table><tr><td>Contractor name:'+ Contractor +'</td></tr>you can include any info here</table');
printWindow.document.write(document.getElementById('forPrintPreview').innerHTML);
//here 'forPrintPreview' is the id of the 'div' in current page(aspx).
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
}
Observe that buttons 'print' and 'cancel' has the css class 'no-print', So these buttons will not appear in the print.