Comment ajouter un bouton d'impression à votre page Web

Publicité

Vous savez, quelque chose comme l'ajout d'un bouton d'impression à une page Web semble assez simple, non? En fait, pourquoi devons-nous même ajouter un bouton d'impression ou un lien vers la page, alors que le lecteur n'a qu'à cliquer sur "Fichier" et "Impression…”Dans le menu du navigateur?

En fin de compte, différentes personnes souhaitent que la fonction d'impression soit affichée sur leur page Web 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 - il enregistre quelques clics et chaque clic compte. D'autres personnes souhaitent personnaliser le texte imprimé - en d'autres termes, masquer certains éléments de la page à 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. Nous avons toujours essayé de proposer des solutions d'impression innovantes ici à MUO, comme l'article de Justin sur

impression sur demi-pages Économisez du papier en formatant et en imprimant vos fichiers avec l'outil d'imposition de Govert [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 ... Lire la suite et l'article de Karl sur PrintWhatYouLike PrintWhatYouLike - Économisez du papier et de l'encre lors de l'impression de pages Web Lire la suite . Dans cet article, je vais 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 au CSS plus personnalisable approche.

Intégration de l'impression dans votre site Web

Lorsque vous consultez une page Web, il est assez facile de comprendre pourquoi vous souhaitez peut-être personnaliser l'impression. Une page Web typique contient des publicités, des bannières, des liens publicitaires, des barres latérales et des sections de pied de page qui ne font rien de plus que de manger de l'espace sur la page et de consommer du papier.

Si vous avez un site Web assez simple, ou si vous ne vous souciez pas vraiment de savoir si tous les graphiques et la mise en forme s'impriment, vous devez ajouter un simple bouton à votre page Web et utiliser la méthode javascript «print ()» pour envoyer la page Web à l'imprimante.

Placer ce code dans votre site à un endroit rapide et facile à utiliser pour 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 de l'imprimante, il est possible que vous finissiez par imprimer beaucoup plus de pages que nécessaire.

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

Imprimer cette page. 

Vous pouvez voir à quel point un simple texte semble beaucoup plus propre qu'un bouton, mais que vous utilisez vraiment revient à ce qui semble mieux dans la zone de la page Web où vous souhaitez fournir l'impression fonctionnalité.

Comme vous pouvez le voir sur l'exemple d'impression ci-dessus, la mise en forme 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 apparent pour les sites Web plus complexes. Une autre approche que les gens utilisent consiste à bloquer des sections entières du site Web à l'aide de CSS et à affecter des sections spécifiques de la page à imprimer. Pour ce faire, commencez par lier le fichier CSS dans la section d'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 attribuez à imprimer.

En-tête DIV #, DIV # newflash, bannière DIV # {display: none;} corps {visibilité: caché;} .print {visibilité: visible;}

Maintenant que votre fichier CSS est configuré, il ne vous reste plus qu'à parcourir votre page et baliser chaque section avec la classe «print».

Cette ligne sera imprimée. 

Cette ligne ne le fera pas. 

Vous pouvez maintenant voir dans l’impression où seules les sections de la page marquées avec la classe «print» sont imprimées sur la page, et toutes les autres sections ne le sont pas. La seule difficulté de cette approche est que vous devez vous assurer de désactiver l'affichage pour toutes les sections DIV que vous ne souhaitez pas imprimer. Comme vous pouvez le voir ci-dessous, je n'ai pas ajouté la section "div" pour l'annonce Google, de sorte qu'elle soit toujours imprimée.

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

C’est tout ce que vous avez à faire! Vous pouvez intégrer le bouton d'impression 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 autre est envoyé à l'imprimante. Comme vous pouvez le voir ci-dessous, cela génère la version imprimable la plus propre de votre page, et vous pouvez presque la personnaliser pour qu'elle ressemble exactement à ce que vous voulez.

Comme vous pouvez le voir, il existe de nombreuses options à choisir lorsque vous souhaitez placer un bouton d'impression ou un lien sur votre page Web. Chacun 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 des commentaires ci-dessous.

Crédit d'image: Sundeip Arora