Hur lägger man till ikonen Skriv ut den här sidan på din webbsida?
Att lägga till en "Skriv ut denna sida"-ikon på din webbsida är ett bekvämt sätt att tillåta användare att enkelt skriva ut den aktuella sidan utan att behöva öppna webbläsarens utskriftsdialogruta. Så här kan du göra det:
HTML-kod:
1. Lägg till följande HTML-kod till `
` i ditt dokument:
```html
```
Den här raden länkar till en separat CSS-fil med namnet "print.css", som kommer att innehålla utskriftsspecifika stilar för din webbsida.
2. I avsnittet `
` lägger du till följande HTML-kod där du vill att ikonen "Skriv ut den här sidan" ska visas:
```html
```
Denna kod skapar en länk som utlöser webbläsarens utskriftsfunktion när den klickas. Attributet `target="_blank"` öppnar den utskrivna sidan i en ny flik. Ersätt "print-icon.png" med den faktiska sökvägen till din utskriftsikon.
CSS-kod:
3. Skapa en CSS-fil med namnet "print.css" och lägg till följande stilar:
```css
@media print {
kropp {
marginal:0;
stoppning:0;
teckensnittsfamilj:Arial, Helvetica, sans-serif;
teckenstorlek:12pt;
linjehöjd:1,5 em;
}
#print-icon {
display:ingen;
}
}
```
Dessa stilar tillämpas endast när dokumentet skrivs ut. De tar bort marginaler och utfyllnad, ställer in teckensnitt och teckenstorlek och döljer ikonen "Skriv ut den här sidan" för att undvika att den visas på den utskrivna sidan.
Justeringar:
- Ändra gärna tryckstilarna i "print.css" efter eget tycke, såsom att ändra teckensnitt, teckenstorlek, marginaler och andra formateringsstilar efter önskemål.
- Du kan placera ikonen "Skriv ut den här sidan" var du vill med CSS-positionering.
- Ersätt "javascript:window.print()" i `href`-attributet med valfri anpassad JavaScript-funktion som du kanske vill köra innan du skriver ut dokumentet.
Med den här implementeringen kommer din webbsida nu att visa en anpassad "Skriv ut denna sida"-ikon som, när den klickas, omedelbart initierar utskriftsprocessen, vilket ger en sömlös utskriftsupplevelse för dina användare.