Comment n’imprimer qu’une partie de vos pages Web

 Article modifié dernièrement le 28 Fév 2013 @ 0 h 56 min

Vous avez du en croiser souvent des liens « Cliquez ici pour une version imprimable » ou « Voir la version imprimable » sur des sites de recettes ou autres. Tous ces liens nous redirigent sur un nouveau document à charger, popup ou page, présentant exactement la même information mais avec une mise en page différente. Le document original est transformé en une version épurée et adaptée à une sortie papier.

© http://www.clipart-fr.com

© http://www.clipart-fr.com

Y-a t’il un moyen de simplifier l’impression d’une partie d’une page Web ? est-il possible d’un simple clic d’imprimer une zone bien définie du document original ? oui c’est possible, je vais vous présenter les deux façons que je connais depuis peu.

CSS

Les feuilles de styles sont la plupart du temps utilisées pour l’affichage du contenu à l’écran (@media screen) mais une des forces de ce langage est qu’il est possible d’appliquer des feuilles de styles spécialement conçues pour l’impression (@media print). Elles ont en charge d’appliquer des styles différents sur les éléments de vos pages uniquement pour l’impression du document. Généralement elles marquent les zones du document à ne pas imprimer (display: none) afin de n’imprimer que le contenu souhaité.

© http://zoompf.com

© http://zoompf.com

L’avantage de cette technique est qu’elle n’oblige pas le développeur à recréer un document autrement en retouchant au balisage, en changeant la police d’écriture, en appliquant un fond blanc, etc. Cela permet aussi d’éviter les différences entre versions Web et papier.

Devoir écrire une feuille de style adaptée à l’impression n’est pas encore un réflexe pour tous, cependant sa mise en place est très simple, surtout si vos documents sont bien structurés. Voici un lien qui vous en dira plus : Print different.

JavaScript

Pour ceux qui ne souhaitent pas s’embêter à redéfinir une feuille de styles spécifique à chaque type de média (all, print, projection, print, tv, etc.), il existe un script JavaScript qui se charge d’imprimer uniquement la zone que vous identifierez par identifiant unique ou par sélecteurs CSS.

Ce script génère simplement une <iframe> cachée contenant  le contenu de la zone à imprimer (clonée), importe les feuilles de styles (@media print si elles existent sinon les autres) puis lance l’impression de cette iframe via la commande javascript print().

Je vous présente ce script par le biais d’un plugin jQuery l’ayant adapaté, jqPrint. Il vous faudra bien entendu intégrer avec ce plugin la fameuse bibliothèque jQuery, par exemple par le biais de Google comme ceci :

L’impression d’une partie de vos documents devient ultra simple :

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 25 octobre 2010, 23 11

    Comme le montre ton site en construction, cette astuce est en effet bien utile.

  • Mimie 4 novembre 2010, 15 03

    Oui c’est très utile effectivement, cet article m’aidera à ne pas l’oublier 🙂

  • Dast 9 novembre 2011, 15 03

    Aaaaah ! Exactement ce que je cherchais ! Un grand merci !!

  • Romain 12 avril 2012, 10 10

    Merci beaucoup, très utile.

Article suivant:

Article précédent:

Share This