Bagaimana cara mendapatkan WYSIWYP (cetak apa yang Anda lihat) di browser web?

70

Ketika saya mencetak halaman web dari browser saya, saya berharap mendapatkan di atas kertas persis konten yang saya lihat di browser. Lebih tepatnya: Saya berharap browser untuk membuat konten halaman yang sama dengan cara yang sama, kecuali pada kanvas dengan ketinggian tak terbatas, dan kemudian memutuskan dengan cara khusus pencetakan bagaimana mendistribusikan hasil ke halaman fisik kertas.

Namun, itu sama sekali tidak apa yang terjadi di banyak situs web. Mereka dapat mencetak sesuatu yang sangat berbeda. Saya tidak pernah meminta browser untuk melakukan ini dan saya tidak ingin itu terjadi.

Apakah ada cara untuk mendapatkan apa yang saya inginkan (selain mengambil tangkapan layar, memotong dan menempelkannya dengan susah payah, dan mencetak gambar yang dihasilkan)? Apakah ada cara untuk memberi tahu peramban web yang saya gunakan (Firefox, Chrome, Safari, IE, atau Opera): "cetak halaman ini seperti yang Anda render di jendela peramban yang sewenang-wenang"?

(PS: lihat juga: Cetak Dari Browser Menggunakan Layar CSS ?)

browser printing reinierpost
sumber
1
kemungkinan duplikat Cetak Dari Peramban Menggunakan Layar CSS?
Ƭᴇcʜιᴇ007
Ekstensi Chrome "App Capture Layar Nimbus" dapat mengambil gambar dari seluruh halaman web seperti yang ditampilkan di layar (termasuk bagian yang tidak dapat Anda lihat tanpa menggulir). Yaitu seolah-olah Anda telah mengambil serangkaian tangkapan layar dan menjahitnya bersama-sama, tetapi itu hanya satu klik tombol.
AE
1
Lembar gaya cetak pada dasarnya bermanfaat. Sebagai contoh, ketika saya mencetak halaman ini, apakah saya ingin pertanyaan dan jawaban atau apakah saya juga menginginkan judul, pertanyaan terkait, dan catatan kaki? Saya juga menghargai bahwa semua komentar dapat dilihat. Situs web bersifat interaktif, potongan kertas tidak (sebagian besar waktu), dan lembar gaya tersebut dapat membantu untuk fokus pada konten, menghemat tinta dan kertas Anda.
SBoss
1
@SBoss: Tidak semua orang yang mencetak halaman akan tertarik pada hal yang sama. Saya akan menyarankan bahwa halaman ramah-cetak harus membiarkan pengguna memilih hal-hal apa yang harus dicetak, dan memiliki versi cetak cocok dengan versi layar kecuali - biasanya - untuk kontrol yang menunjukkan apa yang akan dicetak (harus ada pilihan untuk aktifkan dan nonaktifkan mereka dalam cetakan, tetapi mereka umumnya akan muncul di layar).
supercat
1
Mengenai pertanyaan menjadi duplikat: Saya mencoba menghapus lembar gaya cetak sebelum mencetak, dan itu tidak berhasil, jadi saya tidak berpikir pertanyaannya adalah duplikat.
reinierpost

Jawaban:

37

Chrome memiliki fitur ini dibangun ke Alat Pengembang, tetapi di lokasi yang sangat tidak jelas.

  • Buka Alat Pengembang (Windows: F12atau Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
  • Klik tombol menu Customize and control DevTools hamburger dan pilih More tools> Rendering settings (atau Rendering dalam versi yang lebih baru).
  • Centang kotak centang Emulasikan media cetak di tab Rendering dan pilih jenis media Layar .

Dikutip sebagian besar dari jawaban ini . Lihat di bawah untuk perbedaannya.

Sekarang ketika Anda mencetak, hasil cetak akan persis seperti yang Anda lihat. Pastikan alat pengembang terbuka sampai Anda mencetak. Setelah Anda menutup alat pengembang, pengaturan Rendering akan diatur ulang kembali ke normal.

Catatan: Inspirasi untuk jawaban ini berasal dari https://superuser.com/a/568847/176146 . Tapi teks yang sebenarnya dari jawaban ini adalah dari lmeurs ' jawaban . Ini hampir persis sama, tetapi kami mencoba melakukan kebalikan dari jawaban mereka, jadi alih-alih mengatur override untuk Mencetaknya diatur ke Layar .

Benjamin
sumber
Firefox telah mendapatkan fitur ini pada tahun lalu juga. Ini jelas lebih unggul, tetapi haruskah saya tidak menerima jawaban lama karena alasan itu?
reinierpost
@reinierpost tentu saja terserah Anda. Tetapi yang berikut ini mungkin membantu dalam keputusan Anda - meta.stackexchange.com/q/93969/226780
Benjamin
Terima kasih; jawaban itu mengatakan saya harus berubah, jadi saya akan, meskipun jawaban yang diterima sebelumnya tampaknya merupakan jawaban paling membantu yang mungkin pada saat itu ditulis.
reinierpost
Saat ini, ketika saya mencoba ini di Chrome, saya hanya melihat opsi ketika itu dalam mode tampilan seluler; Saya tidak bisa mendapatkannya untuk tampilan desktop biasa halaman.
reinierpost
Firefox juga memiliki kemampuan ini, tetapi dengan cara yang berbeda. Saya kira jawaban yang terpisah perlu mendokumentasikannya. Saya tidak yakin tentang browser lain.
reinierpost
22

Mengapa halaman web saya tidak mencetak apa yang saya lihat di browser saya?

Alasan beberapa halaman web Anda mencetak berbeda adalah karena mereka memiliki lembar gaya pencetakan .

Apa itu Print Stylesheet?

Lembar gaya cetak memformat halaman web sehingga saat dicetak, ia mencetak secara otomatis dalam format yang mudah digunakan. Lembar gaya cetak telah ada selama beberapa tahun dan telah banyak ditulis. Namun begitu sedikit situs web yang mengimplementasikannya, artinya kami memiliki halaman web yang dengan putus asa tidak mencetak dengan benar di atas kertas.

Sungguh luar biasa bahwa begitu sedikit situs web yang menggunakan lembar gaya cetak sebagai:

  • Lembar gaya cetak sangat meningkatkan kegunaan, terutama untuk halaman dengan banyak konten (seperti ini!)
  • Mereka sangat cepat dan mudah diatur

Beberapa situs web memang menawarkan tautan ke versi halaman yang mudah dicetak, tetapi ini tentu saja perlu diatur dan dipelihara. Ini juga mengharuskan pengguna melihat tautan ini di layar, dan kemudian menggunakannya di depan cara biasa mereka mencetak halaman (misalnya dengan memilih tombol cetak di bagian atas layar). Versi ramah cetak berguna saat mencetak sejumlah halaman web secara bersamaan seperti artikel yang merentang ke beberapa halaman web.

Sumber Nonaktifkan Print Stylesheets (CSS) Saat Mencetak Situs Web

Bagaimana Cara Menonaktifkan Lembar Gaya Cetak?

Baru-baru ini saya perlu mendapatkan snapshot dari sebuah situs web persis seperti yang ditampilkan di layar saya. Artinya, saya ingin warna latar belakang, saya ingin iklan, saya ingin tata letak penuh.

Salah satu opsi adalah mengambil tangkapan layar berurutan saat Anda menggulir ke bawah halaman, lalu menyatukannya kembali di Photoshop. Ini menghabiskan waktu dan membuat Anda dengan gambar beresolusi rendah (72dpi).

Cara lain untuk melakukan ini adalah dengan Mencetak halaman, lalu "simpan sebagai" PDF, bukan benar-benar mencetak. Ini bekerja cukup baik untuk halaman yang tidak mendefinisikan tata letak yang berbeda untuk mencetak halaman dibandingkan melihat halaman.

Sayangnya bagi saya, semakin populer untuk memasukkan lembar gaya "cetak" di situs web, yang menentukan gaya halaman baru ketika pengguna mencoba untuk mencetak situs web. Ini didefinisikan di header dan terlihat seperti ini:

Saya hanya menemukan satu opsi yang benar-benar memenuhi kebutuhan saya: Pengaya / ekstensi "Pengembang Web" yang dikembangkan oleh Chris Pederick.

Dengan plugin ini Anda dapat dengan mudah menonaktifkan SEMUA gaya, gaya Default, gaya inline, gaya tertanam, dan, Anda dapat menebaknya, mencetak gaya!

Saat ini tersedia untuk Firefox dan Chrome. Saya benar-benar berharap ekstensi Safari akan datang suatu hari, karena saya terutama menggunakan Safari. Satu-satunya opsi yang saya temukan untuk Safari adalah untuk menonaktifkan SEMUA gaya - fitur yang secara default dilengkapi dengan versi terbaru (5.0.3) dari browser. Ini berguna selama pengembangan untuk melihat bagaimana situs Anda akan dilihat pada browser hanya teks tetapi tanpa kemampuan untuk memilih gaya mana yang Anda nonaktifkan itu memiliki utilitas terbatas.

Ini adalah contoh menonaktifkan gaya cetak dengan ekstensi di atas di Firefox:

masukkan deskripsi gambar di sini

Source Print stylesheet - panduan definitif

DavidPostill
sumber
2
Terima kasih, tetapi ini tidak membantu untuk situs web yang saya coba (trelloprinter.com). Saya kagum bagaimana orang-orang ini punya nyali untuk menulis bahwa "dengan frustrasi, begitu banyak situs web yang tidak mengimplementasikannya" ketika mereka adalah pendekatan yang rusak secara fundamental terhadap masalah yang mereka coba selesaikan. Memiliki lembar gaya terpisah untuk pencetakan berarti Anda gagal mendesain antarmuka pengguna 101, atau tidak pernah menggunakannya.
reinierpost
1
Mungkin ScreenshotCaptor akan melakukan apa yang Anda butuhkan untuk mencapai ... di antara hal-hal lain itu akan menangkap daerah gulir ... tapi saya ingat itu tidak bermain terlalu baik dengan Google Maps.
DavidPostill
1
Ini tidak akan banyak membantu. Jika Anda menggunakan IE (saya tahu, simpan batu Anda untuk nanti), Anda dapat menggunakan Greenshot ( getgreenshot.org ) yang memiliki opsi untuk menggulir halaman IE dan mengambil printscreen-nya. Ini akan merakit seluruh halaman menjadi 1 tangkapan layar. Anda kemudian dapat mengeditnya sesuai keinginan hati Anda.
Ismael Miguel
18
@reinierpost "Memiliki stylesheet terpisah untuk pencetakan berarti Anda gagal mendesain antarmuka pengguna 101" - Itu adalah sikat yang sangat lebar yang Anda lukis di sana. Apakah Anda memberi tahu saya bahwa jika Anda mencetak halaman ini, Anda ingin memiliki Pertanyaan Hot Network di samping, atau informasi tentang ruang obrolan? Beberapa bagian halaman hanya berguna dalam konteks interaktif - mengapa membuang-buang ruang dan tinta mencetaknya?
Chris Hayes
4
@reinierpost Pernyataan yang konyol. Misalkan sebuah situs memiliki latar belakang gelap dengan latar depan cahaya. Saya tidak akan berbicara untuk Anda, tetapi saya pribadi senang bahwa browser memiliki gaya cetak sendiri dan juga banyak situs, sehingga saya tidak membuang semua tinta saya ketika saya mencetak. Ada banyak alasan mengapa Anda ingin mencetak konten itu sendiri, dan bukan tangkapan layar.
Brad
9

Solusi tanpa plug-in untuk Firefox: Buka Alat Pengembang Web, di Alat Pengembang Default (ikon roda gigi) centang "Ambil tangkapan layar seluruh halaman." Anda hanya perlu melakukan bagian ini sekali saja.

Kemudian di Alat Pengembang, klik ikon kamera. Seluruh halaman akan disimpan sebagai .png. Dari sini Anda dapat mencetaknya, mengonversi ke pdf, dll.

Russ
sumber
Wow .. persis itulah yang saya cari. Terima kasih!
reinierpost
4
Fitur ini tidak lagi membutuhkan Alat Pengembang! Di sisi kanan bilah alamat, pilih tiga titik, klik "Ambil Cuplikan Layar", lalu pilih "Simpan halaman penuh".
numbermaniac
Ini luar biasa, terima kasih!
codingjeremy
8

Saya menggunakan ekstensi Chrome: tangkapan layar laman web . Dengan dua klik, halaman web lengkap dikonversi menjadi jpg atau pdf. Tidak perlu lagi menempelkan tangkapan layar bersama. Halaman ini terlihat seperti ini: Demo tangkapan layar halaman web

Ruut
sumber
1
Ini tampaknya bekerja juga. Saya berharap PDF akan memberi saya grafik yang skalabel, tapi itu hanya bitmap.
reinierpost
1
Sungguh cara yang luar biasa untuk membuktikan jawaban Anda! :) Saya akan menerima yang ini sebagai Jawaban ..
Vijay Chavda
Ekstensi luar biasa! Tampaknya membuat pdf dalam mode lansekap. Apakah mungkin membuat pdf dalam mode potret? @reinierpost
user674669
3

Saya juga menghadapi masalah yang sama. Saat ini saya menggunakan Print Friendly dan PDF Extenstion untuk Chrome .

Fitur terbaik adalah saya dapat secara manual menghapus item yang tidak saya inginkan di Print / PDF saya.

Nikhil
sumber
Menarik ... di Firefox, saya menggunakan bookmarklet PrintWhatYouLike untuk tujuan ini. Ini bekerja dengan baik, tetapi tidak menangani pengguliran "tak terbatas" (misalnya Quora) - ekstensi ini juga tidak.
reinierpost
Tip yang bagus - terima kasih! Secara default, teks disimpan sebagai teks, tautan sebagai tautan, dan menampilkan gambar sebagai ukuran penuh. Artikel perjalanan 6 halaman dengan beberapa gambar besar sekarang menjadi PDF yang sempurna dengan kecepatan 500 kb.
Mike Honey
1

Ini satu lagi yang disebut OpenScreenShoot . Saya suka itu karena Open source, tersedia di GitHub, dan itu bekerja untuk saya untuk halaman web yang sangat panjang di mana, alternatif lain seperti WebpageScreenShot gagal.

Vijay Chavda
sumber
Saya pikir Anda bermaksud mengatakan "tangkapan layar laman web 1-klik" alih-alih "Buka Cuplikan Layar". Baik?
user674669
1

(Dengan risiko mengubah ini menjadi satu set jawaban Rekomendasi Perangkat Lunak , tetapi sejauh ini, menginstal dan menggunakan ekstensi browser X tampaknya menjadi satu-satunya jenis jawaban yang benar-benar berfungsi :)

Akhir-akhir ini saya telah menggunakan ekstensi Chrome Screenshot Terbuka untuk tujuan ini, dan saya sangat senang dengannya. Tidak ada masalah dengan halaman Quora yang panjang .

Pembaruan (November, 2017): ini bukan lagi pilihan terbaik: Firefox dan Chrome sekarang mendukung pengambilan tangkapan layar satu halaman penuh di Alat Pengembang mereka .

reinierpost
sumber
Saya pikir Anda bermaksud mengatakan "tangkapan layar laman web 1-klik" alih-alih "Buka Cuplikan Layar". Baik?
user674669
Tidak. Rupanya, mereka mengganti nama diri mereka sendiri. Saya tidak yakin apa yang harus dilakukan dengan jawaban ini.
reinierpost
1

Hari ini, ini dapat dilakukan di Firefox (saya menggunakan 65.0.2 sekarang) sebagai berikut:

  1. Tekan F12. Panel Alat Pengembang akan muncul.
  2. Di dekat sudut kanan atas, ada ikon kamera. Untuk mengambil tangkapan layar dari seluruh halaman, klik di atasnya.

Di Pengaturan (untuk mengaksesnya, klik tiga titik di sebelah kanan ikon kamera), Anda dapat sedikit menyesuaikan perilakunya; secara default, ini akan menyimpan tangkapan layar ke folder unduhan Firefox Anda.

Jika ikon kamera tidak ada, pertama-tama Anda harus mengaktifkannya di Pengaturan .

Alat tangkapan layar di Alat Pengembang Firefox

reinierpost
sumber