Hoe kunt u het Print This Page-pictogram toevoegen aan uw webpagina?
Het toevoegen van een pictogram 'Deze pagina afdrukken' aan uw webpagina is een handige manier om gebruikers in staat te stellen de huidige pagina eenvoudig af te drukken zonder het afdrukvenster van de browser te hoeven openen. Hier ziet u hoe u het kunt doen:
HTML-code:
1. Voeg de volgende HTML-code toe aan het `
` sectie van uw document:
```html
```
Deze regel linkt naar een afzonderlijk CSS-bestand met de naam 'print.css', dat de afdrukspecifieke stijlen voor uw webpagina bevat.
2. Voeg in de sectie '
' de volgende HTML-code toe op de plek waar u het pictogram 'Deze pagina afdrukken' wilt laten verschijnen:
```html
```
Deze code creëert een link die de afdrukfunctie van de browser activeert wanneer erop wordt geklikt. Het kenmerk `target="_blank"` opent de afgedrukte pagina in een nieuw tabblad. Vervang "print-icon.png" door het daadwerkelijke afbeeldingsbestandspad van uw afdrukpictogram.
CSS-code:
3. Maak een CSS-bestand met de naam "print.css" en voeg de volgende stijlen toe:
```css
@media afdrukken {
lichaam {
marge:0;
opvulling:0;
lettertypefamilie:Arial, Helvetica, schreefloos;
lettergrootte:12pt;
lijnhoogte:1,5em;
}
#print-icon {
weergave:geen;
}
}
```
Deze stijlen worden alleen toegepast wanneer het document wordt afgedrukt. Ze verwijderen marges en opvulling, stellen het lettertype en de lettergrootte in en verbergen het pictogram "Deze pagina afdrukken" om te voorkomen dat dit op de afgedrukte pagina wordt weergegeven.
Aanpassingen:
- Voel je vrij om de afdrukstijlen in "print.css" naar wens aan te passen, zoals het wijzigen van het lettertype, de lettergrootte, de marges en eventuele andere opmaakstijlen naar wens.
- U kunt het pictogram "Deze pagina afdrukken" overal plaatsen waar u maar wilt met behulp van CSS-positionering.
- Vervang "javascript:window.print()" in het kenmerk `href` door een aangepaste JavaScript-functie die u mogelijk wilt uitvoeren voordat u het document afdrukt.
Met deze implementatie wordt op uw webpagina nu een aangepast pictogram 'Deze pagina afdrukken' weergegeven dat, wanneer erop wordt geklikt, onmiddellijk het afdrukproces start, waardoor uw gebruikers een naadloze afdrukervaring krijgen.