How can Print Preview be called from Javascript?

Question

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?

score 35 · Accepted Answer · edited Sep 05 '11 at 03:49

35

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.

edited Sep 05 '11 at 03:49

alex

479,566
201
878
984

answered Oct 23 '08 at 15:38

svandragt

1,672
20
38

1

While this is a good article, it doesn't address his issue. We've got a client that doesn't want to teach their users to hit Ctrl+P or File -> Print so they want a print button on the screen. – knight0323 Oct 19 '11 at 17:56
4

If you have a Firefox extension or add-on that has access to the browser components and you need to launch the Print Preview, you can use: `PrintUtils.printPreview(PrintPreviewListener);` – Oleg Vaskevich Feb 20 '12 at 04:36
18

Just out of curiosity, could you explain what makes print preview a security risk while print is not? It seems to me there are many examples of existing browser-specific javascript. What would be the security risk of a specific browser adding window.printPreview()? – dallin Oct 25 '13 at 00:07
Or, as of 2014, "Print preview" _is_ the print dialog in Chrome. I'm sure Firefox will follow suit. – Roman Starkov Jul 01 '14 at 17:49
You can manipulate the browser with JavaScript via the BOM - kind of hate that this is the only answer for this topic. – Andrew Koper Oct 02 '14 at 18:46
from being called by JavaScript as it would be a security risk.....really? How come you can call up print() from javascript? – webs Jan 28 '18 at 07:00
2

well, Now in 2018, Yes you can! with `window.print();` it works for me. – RajnishCoder Apr 01 '18 at 06:32
@RajnishCoder no preview for firefox – Manuel Ortiz May 18 '19 at 21:57
@ManuelOrtiz In Firefox version `61.0.2 (64-bit)` Linux (fedora) it is working -just checked. – RajnishCoder May 19 '19 at 10:38
@RajnishCoder In Firefox 66 (Ubuntu) it opens the print dialog directly instead of the preview. – PhoneixS May 21 '19 at 07:08
@PhoneixS can you explain what do you mean by **print dialog** and **preview**? – RajnishCoder May 21 '19 at 11:16
Unlike chrome, in 70.0.1 (64-bit) firefox, window.print() only brings up the print dialog box, still no preview. – Safal Pillai Nov 12 '19 at 05:35

score 30 · Answer 2 · edited Oct 24 '20 at 21:20

30

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

edited Oct 24 '20 at 21:20

user984003

28,050
64
189
285

answered Oct 23 '08 at 15:40

In IE, this open print dialog, not PRINT PREVIEW – Thiện Sinh Jan 21 '19 at 07:51
In Firefox 66 it also opens the print dialog instead of the preview. – PhoneixS May 21 '19 at 07:05

score 5 · Answer 3 · edited Jun 23 '16 at 17:10

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.

How can Print Preview be called from Javascript?

3 Answers3

Linked

Related