在打印预览中打开另一个页面或图像

Question

我正在尝试创建一个打印机友好页面。 我们已经使用第三方软件对页面进行了排序，该软件会对页面进行快照并吐出图像文件。 现在，我们已经创建了指向图像页面的链接，并希望创建一个直接打开打印预览的JavaScript。

我发现两个javascripts首先在一个新页面中打开，另一个打开了打印预览。所有这些都可以在IE 9上使用。我需要将这两个javascripts :-)组合在一起

我已经尝试了所有我知道的方法，但都没有成功。.请问上师有帮助吗？ :-)

第一个脚本：

    function printpage(url)
{
  child = window.open(url, "", "height=1, width=1");  //Open the child in a tiny window.

  window.focus();  //Hide the child as soon as it is opened.
  //child.print();  //Print the child. <-- I need this to call PrintPreview()
  child.close();  //Immediately close the child.
 }

第二个脚本打印预览部分

function PrintPreview()
{
  var OLECMDID =  7;

  /* OLECMDID values:
  * 6 - print
  * 7 - print preview
  * 0 - open window
  * 4 - Save As
  */

  var PROMPT = 1; // 1 PROMPT USER 2 DON'T PROMPT USER
  var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';


  window.document.body.insertAdjacentHTML('beforeEnd', WebBrowser);

  WebBrowser1.ExecWB(OLECMDID, PROMPT);
  WebBrowser1.outerHTML = "";

}   

很感谢任何形式的帮助。

Answer 1

您可以为要打印的元素提供特殊的ID，然后使用css以所需的方式对其进行样式设置。 然后，您可以使用调用浏览器的打印预览

window.print();

一个很好的技巧是在显示打印视图之前（通过ajax调用？）和在打印视图显示后清除可打印的div，用所需的信息填充可打印的div。

您可以在以下主题中找到建议： 如何单击按钮而不是页面单击即可打印HTML内容？ 并行2ne回答。

这是纯CSS版本JSFIDDLE

<div class="example-screen">You only see me in the browser</div>

<div class="example-print">You only see me in the print</div>

和CSS：

.example-print {
    display: none;
}
@media print {
   .example-screen {
       display: none;
    }
    .example-print {
       display: block;
    }
}