Générer un aperçu avant impression

Question stupide....Comment ouvrir dans une nouvelle fenêtre, un aperçu avant impression de la page en cours ?

Simple me direz-vous, en spécifiant comme feuille de style pour screen la feuille css dédiée à print.

Soit, mais comment faire sans pour autant recharger la page (puisqu’elle est déjà en cache). En fait, il y a deux questions:

1) Comment faire un petit script qui ouvre la page en cours dans une nouvelle fenêtre (avec idéalement des dimensions et un positionnement donnés...)

2) Comment modifier le <link rel="stylesheet" type="text/css" href="./assets/templates/css/macssscreen.css" media="screen,projection" /> en <link rel="stylesheet" type="text/css" href="./assets/templates/css/macsssprint.css" media="screen,projection" /> sans devoir pour autant recharger la page.

En pratique, puisqu’il ne semble pas possible de déclencher simplement l’aperçu avant impression du navigateur utilisé, l’idée est de faire un petit bouton qui montre cet aperçu pour assurer à l’utilsateur qu’il ne va pas imprimer cinquante mille kilomètres de bandeaux inutiles ou autres menus sans rapport avec le contenu de la page en cours...Bref, que la gestion de l’impression a bien été prise en compte...

Merci de vos idées.

Do you speak english? Sorry, but my French is a bit rusty...

You don’t really need a special "print-link". All you need to do is add another stylesheet in the HEAD with: media="print"

So, in your case, just use both in the head section:

<link rel="stylesheet" type="text/css" href="./assets/templates/css/macssscreen.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="./assets/templates/css/macsssprint.css" media="print" />

If you still need a link, just use JS: <a href="window.print();">print</a>

To get a preview of how it’s really going to look like when printed, there is no 100% guarantee that your screen-page will look and behave exactly like your print. That’s what your browser print-preview function is for. And you can’t access that command directly via JS. That’s just how it is. If you want full control over your print-layout, use PDFs.

Thank you very much, ganeshXL

I already have this css print.

So my question is :

Where and how can i specified to open a popup with this css for show this preview to the webuser ?

Your js <a href="window.print();">print</a> required a <script type="text/javascript">... </script> declaration.

Isn’t it ? And how can put the size and position of the pop-up ?

Sory for my very very bad and terribly rusty english..but thanks for your fast answer !

Sorry, that should be: <a href="#" onClick="window.print();">print</a> or <a href="javascript:window.print();">print</a>
That’s just regular HTML triggering a standard Javascript function. i.e. no extra <script></script> tags are needed.

This triggers the browser’s print-menu (see screenshot, Firefox print menu sample), not a normal browser window.

What you actually want, is open the browser command "print preview", but afaik that is not possible in Javascript. Maybe there is a browser-specific command (i.e. only valid for Firefox, or only valid for Safari, or IE), but certainly none that works across allbrowsers.

Thank’s . I know this limit.

In fact, perhaps exist 2 solutions for make a pseudo- preview :

1) the snippet PrintDoc : http://www.modxcms.com/Print-Documents-1.0-1625.html

but i’have some problem to understand correctly the install...

2) The AdPopupLink : http://www.modxcms.com/AddpopupLink-1.0.4-1536.html

But i have’nt tested how to rendered the current page with the print css without reload the page...

I remember a neat little JS/CSS trick. Gotta dig it up later when I find time. iirc, it was an article on alistapart.com or some such site...

et voilà:

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
http://www.spoono.com/javascript/tutorials/tutorial.php?id=18
http://www.alistapart.com/stories/alternate/

Thank’s very.... ganeshXL for those fantastic links ! So now, i must make a popup to show my current doc in a print css without reload it.

big Thank’s !