Comment ajouter une icône Imprimer cette page dans votre page Web ?
L'ajout d'une icône « Imprimer cette page » à votre page Web est un moyen pratique de permettre aux utilisateurs d'imprimer facilement la page actuelle sans avoir à ouvrir la boîte de dialogue d'impression du navigateur. Voici comment procéder :
Code HTML :
1. Ajoutez le code HTML suivant au ` Section
` de votre document :
```html
```
Cette ligne renvoie à un fichier CSS distinct nommé « print.css », qui contiendra les styles spécifiques à l'impression pour votre page Web.
2. Dans la section `
`, ajoutez le code HTML suivant à l'endroit où vous souhaitez que l'icône « Imprimer cette page » apparaisse :
```html
```
Ce code crée un lien qui déclenche la fonction d'impression du navigateur lorsque vous cliquez dessus. L'attribut `target="_blank"` ouvre la page imprimée dans un nouvel onglet. Remplacez "print-icon.png" par le chemin du fichier image réel de votre icône d'impression.
Code CSS :
3. Créez un fichier CSS nommé « print.css » et ajoutez les styles suivants :
```css
@media imprimer {
corps {
marge :0;
remplissage :0 ;
famille de polices :Arial, Helvetica, sans-serif ;
taille de police :12 pts ;
hauteur de ligne :1,5 em ;
}
#icône d'impression {
affichage :aucun;
}
}
```
Ces styles sont appliqués uniquement lorsque le document est imprimé. Ils suppriment les marges et le remplissage, définissent la police et la taille de la police et masquent l'icône « Imprimer cette page » pour éviter de l'afficher sur la page imprimée.
Ajustements :
- N'hésitez pas à modifier les styles d'impression dans "print.css" à votre guise, par exemple en modifiant la police, la taille de la police, les marges et tout autre style de formatage souhaité.
- Vous pouvez positionner l'icône "Imprimer cette page" où vous le souhaitez en utilisant le positionnement CSS.
- Remplacez "javascript:window.print()" dans l'attribut `href` par n'importe quelle fonction JavaScript personnalisée que vous souhaiterez peut-être exécuter avant d'imprimer le document.
Avec cette implémentation, votre page Web affichera désormais une icône personnalisée « Imprimer cette page » qui, une fois cliquée, lancera instantanément le processus d'impression, offrant ainsi une expérience d'impression transparente à vos utilisateurs.
