Best IT Recipes

How to call preview from javascript?

I have a page that should launch a print preview page. A.

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 disgusting.

Is there a better way for IE or a way that works for FireFox?

+54
javascript printing
Oct 23 '08 at 15:33
source share
3 answers

You cannot, Print Preview is a feature of the browser and therefore must be protected from JavaScript calls, as this will be a security risk.

This is why your example uses Active X, which bypasses JavaScript security issues.

So, instead, use the print style sheet that you should already have, and show it for the media = screen, print instead of media = print.

Read Alist Apart: Switch to Print for a good article on print styles. A.

+34
Oct 23 '08 at 15:38
source share

I think the best that is possible in cross-browser JavaScript is window.print() , which (in Firefox 3 for me) calls the print dialog, not the preview dialog.

+21
Oct 23 '08 at 15:40
source share

This can be done using javascript. Say your html / aspx code goes like this:

 <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, by clicking the "Preview" button, we will open a window with print data. Note that forPrintPreview is the div identifier. The print preview function is as follows:

 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(); }

Note that the print and cancel buttons have the css class no-print, so these buttons will not appear in print. A.

+3
May 21 '14 at 5:19
source share


More articles:


All Articles