Cara Menambahkan Tombol Cetak ke Halaman Web Anda

Iklan

Anda tahu, sesuatu seperti menambahkan tombol cetak ke halaman web terdengar sangat sederhana, bukan? Bahkan, mengapa kita bahkan perlu menambahkan tombol cetak atau tautan ke halaman sama sekali, ketika semua pembaca harus lakukan adalah mengklik "Mengajukan"Dan"Mencetak…”Di menu browser?

Pada akhirnya, orang yang berbeda menginginkan fitur cetak pada halaman web mereka karena alasan yang berbeda. Anda mungkin hanya ingin menambah kenyamanan. Ketika pembaca hanya dapat mengklik tombol untuk mendapatkan hasil cetak - itu menghemat beberapa klik, dan setiap klik dihitung. Orang lain ingin menyesuaikan teks yang dicetak - dengan kata lain, menyembunyikan elemen-elemen tertentu dari halaman dari hasil cetak. Dalam situasi lain, orang lebih suka membuat versi situs web yang dapat disesuaikan dan dicetak dengan cermat.

Untuk masing-masing situasi ini, ada solusi yang berbeda. Kami selalu berusaha menawarkan solusi cetak inovatif di sini di MUO, seperti artikel Justin tentang mencetak pada setengah halaman

Hemat Kertas Dengan Memformat & Mencetak File Anda dengan Alat Imposisi Pemerintah [Windows]Kertas butuh uang. Simpan keduanya dengan mencetak PDF Anda di setengah halaman. Baik Anda menginginkan buklet atau salinan berdampingan, alat gratis untuk Windows tidak hanya memungkinkan tetapi juga sederhana. Berhenti main-main ... Baca lebih banyak dan artikel Karl pada PrintWhatYouLike PrintWhatYouLike- Hemat Kertas & Tinta saat Mencetak Halaman Web Baca lebih banyak . Dalam artikel ini saya akan memberikan empat cara agar Anda dapat mengintegrasikan tombol atau tautan pencetakan situs web Anda - mulai dari pendekatan HTML dan Javascript yang sangat sederhana, hingga CSS yang lebih dapat disesuaikan pendekatan.

Mengintegrasikan Pencetakan ke Situs Web Anda

Saat Anda melihat halaman web mana pun, cukup mudah untuk melihat mengapa Anda ingin menyesuaikan hasil cetakannya. Sebuah halaman web tipikal memiliki iklan, spanduk, tautan iklan, sidebar dan bagian footer yang tidak lebih dari menghabiskan ruang halaman dan menghabiskan kertas dengan boros.

Jika Anda memiliki situs web yang cukup sederhana, atau Anda tidak terlalu peduli apakah semua gambar dan format memformat, maka semua Yang harus Anda lakukan adalah menambahkan tombol sederhana ke halaman web Anda dan menggunakan metode javascript “print ()” untuk mengirim halaman web ke printer.

Menempatkan kode ini ke situs Anda di lokasi yang cepat dan mudah digunakan pembaca Anda terlihat seperti ini.

Yang harus dilakukan pembaca adalah mengklik tombol dan halaman akan dikirim langsung ke printer tanpa memformat halaman apa pun. Jika halaman tersebut melebihi lebar yang bisa dicetak untuk printer, mungkin Anda bisa mencetak lebih banyak halaman daripada yang sebenarnya diperlukan.

Beberapa orang tidak terlalu menyukai tampilan tombol formulir, jadi sebagai alternatif Anda cukup menggunakan tautan dengan javascript tertanam untuk melakukan hal yang sama persis.

Cetak halaman ini. 

Anda dapat melihat bagaimana dalam banyak kasus teks sederhana terlihat jauh lebih bersih daripada tombol, tetapi yang benar-benar Anda gunakan turun ke yang terlihat lebih baik di area halaman web di mana Anda ingin memberikan cetakan fitur.

Seperti yang dapat Anda lihat dari contoh hasil cetak di atas, pemformatan banyak iklan dan spanduk tidak cocok dengan tampilan browser saat Anda cukup menggunakan perintah cetak. Ini menjadi lebih jelas untuk situs web yang lebih kompleks. Pendekatan lain yang digunakan orang adalah memblokir seluruh bagian situs web menggunakan CSS, dan menetapkan bagian tertentu dari halaman untuk dicetak. Anda melakukan ini dengan terlebih dahulu menautkan file CSS di bagian header.

Selanjutnya, Anda harus membuat file CSS yang sebenarnya dan menyimpannya di direktori yang sama dengan halaman web Anda. File CSS harus menetapkan semua bagian halaman yang tidak boleh dicetak, dan kemudian juga membuat elemen halaman yang Anda tetapkan untuk dicetak terlihat.

DIV # header, DIV # newflash, DIV # banner {display: none;} body {visibility: hidden;} .print {visibility: visible;}

Sekarang file CSS Anda sudah diatur, yang harus Anda lakukan adalah pergi melalui halaman Anda dan tag setiap bagian dengan kelas "cetak".

Baris ini akan dicetak. 

Baris ini tidak akan. 

Sekarang Anda dapat melihat dalam cetakan di mana hanya bagian halaman yang ditandai dengan kelas "cetak" yang dicetak ke halaman, dan semua bagian lainnya tidak. Satu kesulitan dengan pendekatan ini adalah Anda harus mematikan layar untuk semua bagian DIV yang tidak ingin Anda cetak. Seperti yang Anda lihat di bawah, saya tidak menambahkan bagian "div" untuk Iklan Google, sehingga masih dicetak.

Butuh waktu untuk membuat file CSS dan menyusun kelas dengan benar. Jika Anda benar-benar tidak ingin repot melakukan ini di setiap halaman, maka Anda dapat memilih satu pendekatan terakhir. Ini adalah teknik favorit saya untuk menyediakan versi halaman web yang diformat sempurna dan dapat dicetak. Yang harus Anda lakukan adalah membuat versi halaman web berformat PDF, menyimpannya di host web Anda, dan kemudian menautkan file di header halaman.

Hanya itu yang harus Anda lakukan! Anda dapat menyematkan tombol cetak di situs Anda seperti pada contoh di atas, tetapi alih-alih file CSS yang dimuat untuk metode cetak, PDF, DOC, atau file lainnya dikirim ke printer. Seperti yang Anda lihat di bawah, ini menghasilkan versi halaman Anda yang paling dapat dicetak, dan Anda dapat menyesuaikannya agar terlihat persis seperti yang Anda inginkan.

Seperti yang Anda lihat, ada banyak opsi untuk dipilih ketika Anda ingin menempatkan tombol cetak atau tautan di halaman web Anda. Salah satu dari pilihan ini bekerja dengan baik, tetapi pilihan yang tepat benar-benar tergantung pada seberapa kompleks halaman web itu, dan konten apa yang ingin Anda tawarkan kepada pembaca Anda ketika mereka memilih untuk mencetak halaman web Anda.

Sudahkah Anda mencoba teknik ini untuk menambahkan tombol cetak ke halaman web? Teknik apa yang paling Anda sukai? Apakah Anda punya solusi lain? Bagikan wawasan Anda di bagian komentar di bawah.

Kredit Gambar: Sundeip Arora