Wie füge ich das Symbol „Diese Seite drucken“ zu meiner Webseite hinzu?
Das Hinzufügen eines „Diese Seite drucken“-Symbols zu Ihrer Webseite ist eine praktische Möglichkeit, Benutzern das einfache Drucken der aktuellen Seite zu ermöglichen, ohne den Druckdialog des Browsers öffnen zu müssen. So können Sie es machen:
HTML-Code:
1. Fügen Sie den folgenden HTML-Code zum ` hinzu Abschnitt „
“ Ihres Dokuments:
```html
„
Diese Zeile verweist auf eine separate CSS-Datei mit dem Namen „print.css“, die die druckspezifischen Stile für Ihre Webseite enthält.
2. Fügen Sie im Abschnitt „
“ den folgenden HTML-Code an der Stelle hinzu, an der das Symbol „Diese Seite drucken“ erscheinen soll:
```html
„
Dieser Code erstellt einen Link, der beim Anklicken die Druckfunktion des Browsers auslöst. Das Attribut „target="_blank"“ öffnet die gedruckte Seite in einem neuen Tab. Ersetzen Sie „print-icon.png“ durch den tatsächlichen Bilddateipfad Ihres Drucksymbols.
CSS-Code:
3. Erstellen Sie eine CSS-Datei mit dem Namen „print.css“ und fügen Sie die folgenden Stile hinzu:
„css
@media print {
Körper {
Rand:0;
Polsterung:0;
Schriftfamilie:Arial, Helvetica, serifenlos;
Schriftgröße:12pt;
Zeilenhöhe:1,5em;
}
#print-icon {
Anzeige:keine;
}
}
„
Diese Stile werden nur angewendet, wenn das Dokument gedruckt wird. Sie entfernen Ränder und Abstände, legen die Schriftart und -größe fest und blenden das Symbol „Diese Seite drucken“ aus, um zu verhindern, dass es auf der gedruckten Seite angezeigt wird.
Anpassungen:
- Fühlen Sie sich frei, die Druckstile in „print.css“ nach Ihren Wünschen zu ändern, z. B. Schriftart, Schriftgröße, Ränder und andere Formatierungsstile nach Wunsch zu ändern.
- Sie können das Symbol „Diese Seite drucken“ mithilfe der CSS-Positionierung an einer beliebigen Stelle positionieren.
- Ersetzen Sie „javascript:window.print()“ im „href“-Attribut durch eine beliebige benutzerdefinierte JavaScript-Funktion, die Sie möglicherweise vor dem Drucken des Dokuments ausführen möchten.
Mit dieser Implementierung wird auf Ihrer Webseite nun ein benutzerdefiniertes Symbol „Diese Seite drucken“ angezeigt, das beim Klicken sofort den Druckvorgang startet und Ihren Benutzern ein nahtloses Druckerlebnis bietet.
