2

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.

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? :-)

First script:

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

}

Any help is very much appreciated.

Christian Lebe
  • 21
  • 2

1 Answers1

0

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

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.

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.

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>

And the CSS:

.example-print {
    display: none;
}
@media print {
   .example-screen {
       display: none;
    }
    .example-print {
       display: block;
    }
}
Community
  • 1
  • 1
Dekay
  • 111
  • 1
  • 2
  • 12
  • Hi there, Thanks for the answer, DeKay. However, the page that we want to print is an image, so we dont have the flexibility of putting CSS. It is just a PNG file. – Christian Lebe Sep 01 '14 at 03:33
  • 1
    The javascript that I've got above, would be the perfect solution if we can pass a url to the second function (PrintPreview()) – Christian Lebe Sep 01 '14 at 03:36