在打印预览中打开另一个页面或图像 [英] Open another page or image in print Preview

问题描述

我正在尝试创建一个打印机友好的页面.我们已经使用第三方软件对页面进行了排序并输出图像文件.现在我们已经创建了一个指向图像页面的链接，并想创建一个直接打开打印预览的 javascript.

I am trying to create a printer friendly page. We've got that sorted using thirdparty software that snapshots the page and spits out image files. Now we have created a link to the image page and would like to create a javascript that opens print preview directly.

我发现两个 javascripts 首先在新页面中打开，另一个打开打印预览.这都适用于 IE 9.我需要结合这两个 javascripts :-)

I have found two javascripts first to open in a new page and another one to open print preview .This all works on IE 9. I need to combine these two javascripts :-)

我已经尝试了任何我知道的将它们结合起来的方法，但没有成功.我可以从大师那里得到一些帮助吗?:-)

I have tried anything I know to combine them without success.. Could I please get some help from the gurus? :-)

第一个脚本:

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

打印预览部分的第二个脚本

Second script the print Preview part

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

}   

非常感谢任何帮助.

推荐答案

您可以为要打印的元素提供一个特殊的 id，并使用 css 按照您想要的方式设置它们的样式.然后你可以使用

You can just give a special id to elements that are to be printed and use css to style them the way you want. Then you can call the print preview of a browser using

window.print();

一个很好的提示是在显示打印视图之前(通过 ajax 调用?)和在打印视图显示后清除可打印 div.

A good tip is to fill the printable div with the needed information just before showing the print view(via ajax call ?) and after the print view shows clear the printable div.

您可以在此线程中找到建议:如何在单击按钮时打印 HTML 内容，而不是页面? Parallel 2ne 的回答.

You can find suggestions in this thread: How to print HTML content on click of a button, but not the page? Answer by Parallel 2ne.

这里是一个纯 css 版本 JSFIDDLE

Here is a pure css version 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;
    }
}

这篇关于在打印预览中打开另一个页面或图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！