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

时间:2014-08-29 08:55:45

标签: javascript printing

我正在尝试创建一个打印机友好页面。 我们已经使用第三方软件对其进行了排序,该软件快照页面并吐出图像文件。现在我们已经创建了一个指向图像页面的链接,并希望创建一个直接打开打印预览的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 = "";

}   

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

您可以为要打印的元素指定一个特殊ID,并使用css按照您希望的方式设置它们的样式。然后,您可以使用

调用浏览器的打印预览
window.print();

一个好的建议是在显示打印视图之前(通过ajax调用?)和打印视图显示清除可打印div之后,用可填写的可填写div填充所需信息。

您可以在此主题中找到建议:How to print HTML content on click of a button, but not the page?通过并行2 回答。

这是一个纯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;
    }
}