Comment ajouter un bouton d'impression à votre page Web

Vous savez, quelque chose comme ajouter un bouton d'impression à une page Web semble assez simple, non? En fait, pourquoi avons-nous même besoin d'ajouter un bouton d'impression ou un lien vers la page, alors que tout ce que le lecteur doit faire est de cliquer sur “Fichier” et “Impression… ” dans le menu du navigateur?

En fin de compte, différentes personnes souhaitent que la fonction d'impression de leur page Web soit imprimée pour différentes raisons. Vous voudrez peut-être simplement ajouter de la commodité. Lorsque le lecteur peut simplement cliquer sur un bouton pour obtenir une impression, cela enregistre quelques clics et chaque clic compte. D'autres personnes souhaitent personnaliser le texte imprimé - autrement dit, masquer certains éléments de la page de l'impression. Dans d'autres situations, les utilisateurs préfèrent créer une version imprimable du site Web soigneusement personnalisée..

Pour chacune de ces situations, il existe différentes solutions. Chez MUO, nous avons toujours essayé de proposer des solutions d'impression innovantes, telles que l'article de Justin sur l'impression sur des demi-pages. Economisez le papier en formatant et en imprimant vos fichiers avec l'outil d'imposition de Govert [Windows] Économisez le papier en formatant et en imprimant vos fichiers avec l'Imposition de Govert Outil [Windows] Le papier coûte de l'argent. Enregistrez les deux en imprimant vos PDF sur des demi-pages. Que vous souhaitiez un livret ou des copies côte à côte, un outil gratuit pour Windows rend non seulement cela possible mais aussi simple. Arrêtez de déconner… Lisez plus et l'article de Karl sur PrintWhatYouLike PrintWhatYouLike - Économisez du papier et de l'encre lors de l'impression de pages Web PrintWhatYouLike - Économisez du papier et de l'encre lors de l'impression de pages Web En savoir plus. Dans cet article, je vais vous proposer quatre façons d'intégrer un bouton d'impression ou un lien dans votre site Web: de l'approche HTML et Javascript très simple à l'approche CSS plus personnalisable..

Intégration de l'impression dans votre site Web

Lorsque vous consultez une page Web, il est assez facile de comprendre pourquoi vous souhaitez personnaliser l'impression. Une page Web typique contient des annonces, des bannières, des liens d’annonces, des barres latérales et des sections de pied de page qui ne font rien de plus que dévorer l’espace de la page et consommer inutilement du papier..

Si vous avez un site Web assez simple, ou si vous ne vous souciez pas vraiment de l’ensemble des graphiques et du formatage, tout ce que vous avez à faire est d’ajouter un simple bouton à votre page Web et d’utiliser le “impression()” méthode javascript pour envoyer la page Web à l'imprimante.

Le fait de placer ce code sur votre site à un emplacement facile à utiliser par vos lecteurs ressemble à ceci:.

Tout ce que le lecteur a à faire est de cliquer sur le bouton et la page sera envoyée directement à l’imprimante sans aucun formatage de page. Si la page dépasse la largeur imprimable pour l'imprimante, il est possible que vous finissiez par imprimer plus de pages que nécessaire..

Certaines personnes n'aiment pas vraiment l'apparence d'un bouton de formulaire, alors vous pouvez simplement utiliser un lien avec le javascript intégré pour faire exactement la même chose..

 Imprimer cette page 

Vous pouvez voir comment, dans de nombreux cas, un texte simple a l'air beaucoup plus net qu'un bouton, mais ce que vous utilisez se résume vraiment à ce qui a l'air mieux dans la zone de la page Web où vous souhaitez fournir la fonction d'impression.

Comme vous pouvez le voir dans l'exemple d'impression ci-dessus, le formatage de nombreuses annonces et bannières ne correspond pas parfaitement à l'affichage du navigateur lorsque vous utilisez simplement la commande d'impression. Cela devient beaucoup plus évident pour les sites Web plus complexes. Une autre approche consiste à bloquer des sections entières du site Web à l’aide de CSS et à affecter des sections spécifiques de la page à imprimer. Vous faites cela en liant d'abord le fichier CSS dans la section en-tête.

Ensuite, vous devrez créer le fichier CSS réel et l’enregistrer dans le même répertoire que votre page Web. Le fichier CSS doit affecter toutes les sections de la page qui ne doivent pas être imprimées, puis rendre également visibles les éléments de la page que vous affectez à l'impression..

 DIV # en-tête, DIV # newflash, DIV # bannière display: none; corps visibilité: masqué; .print visibilité: visible; 

Maintenant que votre fichier CSS est configuré, tout ce que vous avez à faire est de parcourir votre page et de baliser chaque section avec les informations suivantes: “impression” classe.

  Cette ligne sera imprimée. Cette ligne ne sera pas.  

Vous pouvez maintenant voir sur l’imprimé que seules les sections de la page marquées du “impression” la classe est imprimée sur la page, contrairement à toutes les autres sections. La seule difficulté de cette approche est que vous devez vous assurer d’éteindre toutes les sections DIV que vous ne voulez pas imprimer. Comme vous pouvez le voir ci-dessous, je n'ai pas ajouté le “div” section pour l'annonce Google, de sorte que toujours imprimé.

La création du fichier CSS et la présentation correcte des classes peuvent prendre un certain temps. Si vous ne voulez vraiment pas vous embêter à faire cela à chaque page, vous pouvez opter pour une dernière approche. Ceci est ma technique préférée pour fournir des versions parfaitement formatées et imprimables de la page Web. Tout ce que vous avez à faire est de créer une version au format PDF du contenu de la page Web, de l'enregistrer sur votre hôte Web, puis de lier le fichier dans l'en-tête de la page..

C'est tout ce que vous devez faire! Vous pouvez intégrer le bouton Imprimer sur votre site, comme dans les exemples ci-dessus, mais au lieu du fichier CSS chargé pour la méthode d'impression, le fichier PDF, DOC ou un autre fichier est envoyé à l'imprimante. Comme vous pouvez le voir ci-dessous, cela génère la version imprimable la plus propre de votre page. Vous pouvez la personnaliser pour qu'elle corresponde exactement à vos souhaits..

Comme vous pouvez le constater, de nombreuses options vous permettent de choisir un bouton ou un lien d’impression sur votre page Web. N'importe lequel de ces choix fonctionne bien, mais le bon choix dépend vraiment de la complexité de la page Web et du contenu que vous souhaitez offrir à vos lecteurs lorsqu'ils choisissent d'imprimer votre page Web..

Avez-vous essayé l’une de ces techniques pour ajouter un bouton d’impression à une page Web? Quelle technique préférez-vous? Avez-vous d'autres solutions? Partagez vos idées dans la section commentaires ci-dessous.

Crédit d'image: Sundeip Arora

En savoir plus sur: impression, développement Web, outils pour les webmasters.