如何从 Javascript 调用打印预览？答案

【问题标题】：How can Print Preview be called from Javascript?如何从 Javascript 调用打印预览？
【发布时间】：2010-09-18 19:34:13
【问题描述】：

我有一个页面应该在加载时启动打印预览页面。

我发现了这个：

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 = "";

但是……

它在 FireFox 中不起作用。
有点丑。

是否有更好的方式适用于 IE 或适用于 FireFox？

【问题讨论】：

标签： javascript printing

【解决方案1】：

我认为跨浏览器 JavaScript 中最好的可能是 window.print()，它（在 Firefox 3 中，对我来说）会打开“打印”对话框，而不是打印预览对话框。

仅供参考，打印对话框是您计算机的“打印”弹出窗口，当您按 Ctrl-p 时您会得到什么。 打印预览 是 Firefox 自己的预览窗口，它有更多的选项。这就是 Firefox 菜单 > 打印...

【讨论】：

在 IE 中，这个打开的打印对话框，而不是 PRINT PREVIEW
在 Firefox 66 中，它还会打开打印对话框而不是预览。

【解决方案2】：

这可以使用 javascript 来完成。假设你的 html/aspx 代码是这样的：

<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" />

点击“打印预览”按钮，我们将打开一个包含打印数据的窗口。观察“forPrintPreview”是一个 div 的 id。打印预览的功能是这样的：

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

注意按钮'print'和'cancel'有css类'no-print'，所以这些按钮不会出现在打印中。

【讨论】：

【解决方案3】：

不能，打印预览是浏览器的一项功能，因此应防止被 JavaScript 调用，因为这会带来安全风险。

这就是您的示例使用 Active X 的原因，它绕过了 JavaScript 安全问题。

因此，请改用您应该拥有的打印样式表并将其显示为 media=screen,print 而不是 media=print。

阅读Alist Apart: Going to Print 了解有关打印样式表主题的好文章。

【讨论】：

虽然这是一篇好文章，但它并没有解决他的问题。我们有一个客户不想教他们的用户按 Ctrl+P 或 File -> Print，所以他们想要在屏幕上显示一个打印按钮。
如果您有一个可以访问浏览器组件的 Firefox 扩展或附加组件，并且您需要启动打印预览，您可以使用：PrintUtils.printPreview(PrintPreviewListener);
出于好奇，您能否解释一下是什么让打印预览存在安全风险，而打印却没有？在我看来，现有的特定于浏览器的 javascript 的例子有很多。特定浏览器添加 window.printPreview() 会有什么安全风险？
或者，截至 2014 年，“打印预览”是 Chrome 中的打印对话框。我相信 Firefox 也会效仿。
好吧，现在是 2018 年，是的，你可以！ window.print(); 对我有用。