Open Another Page Or Image In Print Preview

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

Solution 1:

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

<divclass="example-screen">You only see me in the browser</div><divclass="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;
    }
}