How can Print Preview be called from Javascript?

javascript printing

Solution 1

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

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.

Author by

Anni

Updated on October 25, 2020

Comments

Anni over 3 years

I have a complete string how can i get some part of it and insert into an array this is my string in php

[{"albumid":"ASaBFzCtl8","albumname":"anni","type":"3","access":"2","itemcount":"2"},{"albumid":"EmgsZ43ehT","albumname":"testalbum","type":"1","access":"1","itemcount":"0"},{"albumid":"Jf4H4SvFGk","albumname":"test2album","type":"3","access":"1","itemcount":"0"},{"albumid":"k3pacBSmIl","albumname":"testalbumpvt","type":"3","access":"2","itemcount":"0"}]

i want something similar to this

$value1 = $array[0];
// {"albumid":"ASaBFzCtl8","albumname":"anni","type":"3","access":"2","itemcount":"2"}

is this possible to get each value like this

$value1 = $array[0]['albumid'];
 // ASaBFzCtl8

knight0323 over 12 years

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.
Oleg Vaskevich over 12 years

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);
dallin over 10 years

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()?
Roman Starkov almost 10 years

Or, as of 2014, "Print preview" is the print dialog in Chrome. I'm sure Firefox will follow suit.
Andrew Koper over 9 years

You can manipulate the browser with JavaScript via the BOM - kind of hate that this is the only answer for this topic.
webs over 6 years

from being called by JavaScript as it would be a security risk.....really? How come you can call up print() from javascript?
RajnishCoder about 6 years

well, Now in 2018, Yes you can! with window.print(); it works for me.
Manuel Ortiz about 5 years

@RajnishCoder no preview for firefox
RajnishCoder about 5 years

@ManuelOrtiz In Firefox version 61.0.2 (64-bit) Linux (fedora) it is working -just checked.
PhoneixS about 5 years

@RajnishCoder In Firefox 66 (Ubuntu) it opens the print dialog directly instead of the preview.
RajnishCoder about 5 years

@PhoneixS can you explain what do you mean by print dialog and preview?
Safal Pillai over 4 years

Unlike chrome, in 70.0.1 (64-bit) firefox, window.print() only brings up the print dialog box, still no preview.