Πώς να προσθέσετε ένα κουμπί εκτύπωσης στην ιστοσελίδα σας

Διαφήμιση

Ξέρετε, κάτι σαν να προσθέτετε ένα κουμπί εκτύπωσης σε μια ιστοσελίδα ακούγεται πολύ απλό, έτσι; Στην πραγματικότητα, γιατί χρειαζόμαστε ακόμη και να προσθέσουμε οποιοδήποτε κουμπί εκτύπωσης ή σύνδεσμο στη σελίδα καθόλου, όταν το μόνο που έχει να κάνει ο αναγνώστης κάνει κλικ στο "Αρχείο" και "Τυπώνω…"Στο μενού του προγράμματος περιήγησης;

Τελικά, διαφορετικά άτομα θέλουν τη δυνατότητα εκτύπωσης στην ιστοσελίδα τους για διαφορετικούς λόγους. Ίσως απλώς θέλετε να προσθέσετε ευκολία. Όταν ο αναγνώστης μπορεί απλά να κάνει κλικ σε ένα κουμπί για να πάρει μια εκτύπωση - εξοικονομεί μερικά κλικ και μετράει κάθε κλικ. Άλλα άτομα θέλουν να προσαρμόσουν το έντυπο κείμενο - με άλλα λόγια, να αποκρύψουν ορισμένα στοιχεία της σελίδας από την εκτύπωση. Σε άλλες περιπτώσεις, οι άνθρωποι προτιμούν να δημιουργούν μια προσεκτικά προσαρμοσμένη, εκτυπώσιμη έκδοση του ιστότοπου.

Για καθεμία από αυτές τις καταστάσεις, υπάρχουν διαφορετικές λύσεις. Πάντα προσπαθούσαμε να προσφέρουμε καινοτόμες λύσεις εκτύπωσης εδώ στο MUO, όπως το άρθρο του Justin

εκτύπωση σε μισές σελίδες Εξοικονομήστε χαρτί με μορφοποίηση και εκτύπωση των αρχείων σας με το εργαλείο επιβολής Govert [Windows]Το χαρτί κοστίζει χρήματα. Αποθηκεύστε και τα δύο εκτυπώνοντας τα PDF σε μισές σελίδες. Είτε θέλετε ένα φυλλάδιο είτε αντίγραφα δίπλα-δίπλα, ένα δωρεάν εργαλείο για τα Windows όχι μόνο το καθιστά δυνατό αλλά και απλό. Σταματήστε να χτυπάτε ... Διαβάστε περισσότερα και το άρθρο του Karl για Εκτυπώστε τι σας αρέσει PrintWhatYouLike - Εξοικονομήστε χαρτί και μελάνι κατά την εκτύπωση ιστοσελίδων Διαβάστε περισσότερα . Σε αυτό το άρθρο θα παράσχω τέσσερις τρόπους με τους οποίους μπορείτε να ενσωματώσετε ένα κουμπί εκτύπωσης ή να συνδεθείτε τον ιστότοπό σας - από την πολύ απλή προσέγγιση HTML και Javascript, έως το πιο προσαρμόσιμο CSS πλησιάζω.

Ενσωμάτωση της εκτύπωσης στον ιστότοπό σας

Όταν κοιτάζετε οποιαδήποτε ιστοσελίδα, είναι πολύ εύκολο να καταλάβετε γιατί μπορεί να θέλετε να προσαρμόσετε την εκτύπωση. Μια τυπική ιστοσελίδα έχει διαφημίσεις, banner, συνδέσμους διαφημίσεων, πλευρικές γραμμές και τμήματα υποσέλιδων που δεν κάνουν τίποτα περισσότερο από το να καταναλώνουν χώρο σελίδας και να καταναλώνουν άσκοπα χαρτί.

Εάν έχετε έναν αρκετά απλό ιστότοπο ή δεν σας ενδιαφέρει πραγματικά εάν όλα τα γραφικά και οι εκτυπώσεις μορφοποίησης ή όχι, τότε όλα που πρέπει να κάνετε είναι να προσθέσετε ένα απλό κουμπί στην ιστοσελίδα σας και να χρησιμοποιήσετε τη μέθοδο javascript "print ()" για να στείλετε την ιστοσελίδα στον εκτυπωτή.

Η τοποθέτηση αυτού του κώδικα στον ιστότοπό σας σε μια τοποθεσία που είναι γρήγορη και εύκολη για τη χρήση των αναγνωστών σας μοιάζει κάπως έτσι.

Το μόνο που πρέπει να κάνει ο αναγνώστης είναι να κάνει κλικ στο κουμπί και η σελίδα θα σταλεί απευθείας στον εκτυπωτή χωρίς καμία μορφοποίηση σελίδας. Εάν η σελίδα υπερβαίνει το εκτυπώσιμο πλάτος για τον εκτυπωτή, είναι πιθανό να καταλήξετε να εκτυπώσετε πολύ περισσότερες σελίδες από ό, τι είναι πραγματικά απαραίτητο.

Σε ορισμένα άτομα δεν αρέσει πραγματικά η εμφάνιση ενός κουμπιού φόρμας, οπότε ως εναλλακτική λύση μπορείτε απλά να χρησιμοποιήσετε έναν σύνδεσμο με το ενσωματωμένο javascript για να κάνετε το ίδιο ακριβώς πράγμα.

Εκτυπώστε αυτήν τη σελίδα. 

Μπορείτε να δείτε πώς σε πολλές περιπτώσεις ένα απλό κείμενο φαίνεται πολύ πιο καθαρό από ένα κουμπί, αλλά το οποίο χρησιμοποιείτε πραγματικά καταλήγει σε ό, τι φαίνεται καλύτερα στην περιοχή της ιστοσελίδας όπου θέλετε να δώσετε την εκτύπωση χαρακτηριστικό.

Όπως μπορείτε να δείτε από το παραπάνω παράδειγμα εκτύπωσης, η μορφοποίηση πολλών διαφημίσεων και banner δεν ταιριάζει απόλυτα με την οθόνη του προγράμματος περιήγησης όταν χρησιμοποιείτε απλώς την εντολή εκτύπωσης. Αυτό γίνεται πολύ πιο εμφανές για πιο περίπλοκους ιστότοπους. Μια άλλη προσέγγιση που χρησιμοποιούν οι χρήστες είναι να αποκλείσουν ολόκληρες ενότητες του ιστότοπου χρησιμοποιώντας CSS και να εκχωρήσουν συγκεκριμένες ενότητες της σελίδας για εκτύπωση. Αυτό το κάνετε συνδέοντας πρώτα το αρχείο CSS στην ενότητα κεφαλίδας.

Στη συνέχεια, θα πρέπει να δημιουργήσετε το πραγματικό αρχείο CSS και να το αποθηκεύσετε στον ίδιο κατάλογο με την ιστοσελίδα σας. Το αρχείο CSS πρέπει να εκχωρήσει όλες τις ενότητες της σελίδας που δεν πρέπει να εκτυπωθούν και, στη συνέχεια, να κάνει τα στοιχεία της σελίδας που εκχωρείτε να εκτυπώσουν ως ορατά.

DIV # κεφαλίδα, DIV # newflash, DIV # banner {display: none;} body {ορατότητα: κρυφό;} .print {ορατότητα: ορατό;}

Τώρα που έχει ρυθμιστεί το αρχείο CSS, το μόνο που έχετε να κάνετε είναι να περάσετε από τη σελίδα σας και να προσθέσετε ετικέτες σε κάθε ενότητα με την κλάση "εκτύπωση".

Αυτή η γραμμή θα εκτυπωθεί. 

Αυτή η γραμμή δεν θα. 

Τώρα μπορείτε να δείτε στην εκτύπωση όπου μόνο τα τμήματα της σελίδας που σημειώνονται με την τάξη "εκτύπωση" εκτυπώνονται στη σελίδα και όλες οι άλλες ενότητες δεν εκτυπώνονται. Η μόνη δυσκολία με αυτήν την προσέγγιση είναι ότι πρέπει να βεβαιωθείτε ότι έχετε απενεργοποιήσει την οθόνη για όλες τις ενότητες DIV που δεν θέλετε να εκτυπώνονται. Όπως μπορείτε να δείτε παρακάτω, δεν πρόσθεσα την ενότητα "div" για τη Διαφήμιση Google, έτσι ώστε να είναι ακόμη τυπωμένη.

Μπορεί να χρειαστεί λίγος χρόνος για να δημιουργήσετε το αρχείο CSS και να ορίσετε σωστά τις τάξεις. Εάν πραγματικά δεν θέλετε να ασχοληθείτε με αυτό σε κάθε σελίδα, τότε μπορείτε να επιλέξετε μια τελευταία προσέγγιση. Αυτή είναι η αγαπημένη μου τεχνική για την παροχή τέλεια μορφοποιημένων εκτυπώσιμων εκδόσεων της ιστοσελίδας. Το μόνο που έχετε να κάνετε είναι να δημιουργήσετε μια PDF μορφή του περιεχομένου της ιστοσελίδας, να το αποθηκεύσετε στον κεντρικό υπολογιστή σας και, στη συνέχεια, να συνδέσετε το αρχείο στην κεφαλίδα της σελίδας.

Αυτό πρέπει να κάνετε! Μπορείτε να ενσωματώσετε το κουμπί εκτύπωσης στον ιστότοπό σας όπως στα παραπάνω παραδείγματα, αλλά αντί για το αρχείο CSS που φορτώθηκε για τη μέθοδο εκτύπωσης, το PDF, το DOC ή άλλο αρχείο αποστέλλεται στον εκτυπωτή. Όπως μπορείτε να δείτε παρακάτω, αυτό δημιουργεί την καθαρότερη εκτυπώσιμη έκδοση της σελίδας σας και μπορείτε να την προσαρμόσετε σχεδόν ώστε να φαίνεται ακριβώς όπως θέλετε.

Όπως μπορείτε να δείτε, υπάρχουν πολλές επιλογές για να διαλέξετε όταν θέλετε να τοποθετήσετε ένα κουμπί εκτύπωσης ή έναν σύνδεσμο στην ιστοσελίδα σας. Οποιαδήποτε από αυτές τις επιλογές λειτουργεί καλά, αλλά η σωστή επιλογή εξαρτάται πραγματικά από το πόσο περίπλοκη είναι η ιστοσελίδα και ποιο περιεχόμενο θέλετε να προσφέρετε στους αναγνώστες σας όταν επιλέγουν να εκτυπώσουν την ιστοσελίδα σας.

Έχετε δοκιμάσει κάποια από αυτές τις τεχνικές για να προσθέσετε ένα κουμπί εκτύπωσης σε μια ιστοσελίδα; Ποια τεχνική σας αρέσει περισσότερο; Έχετε άλλες λύσεις; Μοιραστείτε τις πληροφορίες σας στην παρακάτω ενότητα σχολίων.

Πιστωτική εικόνα: Sundeip Arora