So fügen Sie Ihrer Webseite eine Druckschaltfläche hinzu

Weißt du, etwas wie das Hinzufügen eines Druckknopfes zu einer Webseite klingt ziemlich einfach, richtig? Warum müssen wir überhaupt eine Druckschaltfläche oder einen Link zur Seite hinzufügen, wenn der Leser nur noch auf klicken muss “Datei” und “Drucken… ” im Browser-Menü?

Letztlich möchten verschiedene Personen die Druckfunktion aus verschiedenen Gründen auf ihrer Webseite haben. Möglicherweise möchten Sie nur Bequemlichkeit hinzufügen. Wenn der Leser einfach auf eine Schaltfläche klicken kann, um einen Ausdruck zu erhalten, werden einige Klicks eingespart, und jeder Klick zählt. Andere möchten den gedruckten Text anpassen, dh bestimmte Elemente der Seite werden vor dem Ausdruck ausgeblendet. In anderen Situationen bevorzugen Sie die Erstellung einer sorgfältig angepassten, druckbaren Version der Website.

Für jede dieser Situationen gibt es unterschiedliche Lösungen. Wir haben immer versucht, innovative Drucklösungen hier bei MUO anzubieten, wie zum Beispiel Justins Artikel über das Drucken auf halben Seiten. Sparen Sie Papier durch Formatieren und Drucken Ihrer Dateien mit dem Govert-Ausschießwerkzeug [Windows] Tool [Windows] Papier kostet Geld. Speichern Sie beide, indem Sie Ihre PDF-Dateien auf halben Seiten drucken. Egal, ob Sie ein Booklet oder Side-by-Side-Kopien erstellen möchten, ein kostenloses Tool für Windows macht dies nicht nur möglich, sondern auch einfach. Stoppen Sie sich in der Gegend herum… Lesen Sie mehr und Karls Artikel über PrintWhatYouLike PrintWhatYouLike- Sparen Sie Papier und Tinte beim Drucken von Webseiten. PrintWhatYouLie Sie - Sparen Sie Papier & Tinte beim Drucken von Webseiten. Lesen Sie weiter. In diesem Artikel werden vier Möglichkeiten beschrieben, wie Sie eine Druckschaltfläche oder einen Link in Ihre Website integrieren können - vom einfachen HTML- und Javascript-Ansatz bis zum anpassbaren CSS-Ansatz.

Drucken in Ihre Website integrieren

Wenn Sie sich eine Webseite ansehen, können Sie leicht erkennen, warum Sie den Ausdruck anpassen möchten. Eine typische Webseite enthält Anzeigen, Banner, Anzeigenlinks, Seitenleisten und Fußzeilen, die nichts anderes tun, als den Platz auf der Seite aufzuzehren und unnötig Papier zu verbrauchen.

Wenn Sie eine recht einfache Website haben oder sich nicht wirklich darum kümmern, ob alle Grafiken und Formatierungen gedruckt werden, müssen Sie lediglich eine einfache Schaltfläche zu Ihrer Website hinzufügen und die “drucken()” Javascript-Methode zum Senden der Webseite an den Drucker.

Wenn Sie diesen Code auf Ihrer Website an einem Ort platzieren, der für Ihre Leser schnell und einfach zu verwenden ist, sieht dies ungefähr so ​​aus.

Der Leser muss lediglich auf die Schaltfläche klicken, und die Seite wird ohne jegliche Seitenformatierung direkt an den Drucker gesendet. Wenn die Seite die druckbare Breite des Druckers überschreitet, besteht die Möglichkeit, dass Sie weitaus mehr Seiten drucken, als tatsächlich erforderlich sind.

Manche Leute mögen das Aussehen einer Formularschaltfläche nicht wirklich. Als Alternative können Sie einfach einen Link mit dem eingebetteten Javascript verwenden, um genau dasselbe zu tun.

 Drucke diese Seite 

Sie können sehen, wie ein einfacher Text in vielen Fällen viel sauberer aussieht als eine Schaltfläche, aber den, den Sie verwenden, in der Tat darauf ankommt, welcher in dem Bereich der Webseite, in dem Sie die Druckfunktion bereitstellen möchten, besser aussieht.

Wie Sie anhand des Beispielausdrucks oben sehen können, stimmt die Formatierung vieler Anzeigen und Banner nicht perfekt mit der Browseranzeige überein, wenn Sie einfach den Druckbefehl verwenden. Dies wird bei komplexeren Websites deutlich deutlicher. Ein anderer Ansatz, den Menschen verwenden, ist das Blockieren ganzer Abschnitte der Website mit CSS und das Zuweisen bestimmter Abschnitte der Seite zum Drucken. Dazu verknüpfen Sie zunächst die CSS-Datei im Kopfbereich.

Als Nächstes müssen Sie die eigentliche CSS-Datei erstellen und im selben Verzeichnis wie Ihre Webseite speichern. Die CSS-Datei sollte alle Abschnitte der Seite zuweisen, die nicht gedruckt werden sollen, und dann auch die Elemente der Seite, die Sie zum Drucken zuweisen möchten, sichtbar machen.

 DIV # -Header, DIV # newflash, DIV # Banner Anzeige: keine; Körper Sichtbarkeit: ausgeblendet; .print Sichtbarkeit: sichtbar; 

Nun, da Ihre CSS-Datei eingerichtet ist, müssen Sie nur noch Ihre Seite durchgehen und jeden Abschnitt mit dem Tag kennzeichnen “drucken” Klasse.

  Diese Zeile wird gedruckt. Diese Linie wird nicht.  

Nun sehen Sie im Ausdruck, wo nur die mit gekennzeichneten Bereiche der Seite angezeigt werden “drucken” Die Klasse wird auf die Seite gedruckt und alle anderen Abschnitte nicht. Die einzige Schwierigkeit bei diesem Ansatz besteht darin, dass Sie sicherstellen müssen, dass die Anzeige für alle DIV-Abschnitte deaktiviert wird, die nicht gedruckt werden sollen. Wie Sie unten sehen können, habe ich das nicht hinzugefügt “div” Abschnitt für die Google-Anzeige, damit noch gedruckt wird.

Es kann einige Zeit dauern, die CSS-Datei zu erstellen und die Klassen korrekt anzuordnen. Wenn Sie dies wirklich nicht auf jeder Seite tun möchten, können Sie sich für einen letzten Ansatz entscheiden. Dies ist meine Lieblingstechnik, um perfekt formatierte, druckbare Versionen der Webseite bereitzustellen. Alles, was Sie tun müssen, ist eine PDF-formatierte Version des Webseiteninhalts zu erstellen, auf Ihrem Webhost zu speichern und dann die Datei in der Kopfzeile der Seite zu verknüpfen.

Das ist alles was du tun musst! Sie können die Schaltfläche "Drucken" wie in den obigen Beispielen in Ihre Site einbetten. Statt der für die Druckmethode geladenen CSS-Datei wird jedoch die PDF-, DOC- oder andere Datei an den Drucker gesendet. Wie Sie unten sehen können, wird auf diese Weise die sauberste druckbare Version Ihrer Seite generiert, und Sie können die Seite so anpassen, dass sie genau so aussieht, wie Sie es möchten.

Wie Sie sehen, gibt es viele Optionen, aus denen Sie wählen können, wann Sie eine Druckschaltfläche oder einen Link auf Ihrer Webseite platzieren möchten. Jede dieser Optionen funktioniert gut, aber die richtige Wahl hängt wirklich davon ab, wie komplex die Webseite ist und welche Inhalte Sie Ihren Lesern beim Drucken Ihrer Webseite anbieten möchten.

Haben Sie eine dieser Techniken ausprobiert, um einer Webseite eine Druckschaltfläche hinzuzufügen? Welche Technik gefällt dir am besten? Hast du noch andere Lösungen? Teilen Sie Ihre Einsicht in den Kommentaren weiter unten.

Bildnachweis: Sundeip Arora

Erfahren Sie mehr über: Drucken, Webentwicklung, Webmaster-Tools.