Sejumlah situs web yang saya gunakan memiliki stylesheet yang sangat buruk untuk media cetak, tetapi stylesheet layarnya cukup bagus.
Apakah ada cara untuk memberitahu browser saya untuk mengabaikan print stylesheet dan hanya mencetak dengan stylesheet layar?
Saya juga ingin melakukan ini ketika saya ingin menunjukkan kepada klien perbedaan antara keduanya.
Delete This Node
.die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)
), cukup buka Elemen Inspeksi (Perangkat Dev) ) , buka Editor Gaya , gunakan daftar aturan media @ berguna di sisi kanan untuk menemukan stylesheet denganprint
gaya kemudian hapus semuaprint
aturan yang diterapkana[href]
. Kemudian luncurkan Print Preview lagi.Jawaban:
Menggunakan Alat Pengembang Chrome ( Ctrl+ Shift+ I) adalah satu-satunya yang saya temukan yang berfungsi.
media="screen"
dan hapus atribut itu.media="print"
dan hapus seluruh tautan itu.Ini biasanya memberi saya halaman dengan styling layar.
Jika Anda benar-benar hanya ingin menonaktifkan gaya cetak, Anda dapat menginstal ekstensi Pengembang Web (saya pikir ada versi untuk Firefox dan Chrome). Ini memiliki tombol untuk menonaktifkan gaya cetak. Namun, itu tidak memperpanjang gaya "layar" untuk mencetak, jadi sebagian besar waktu tidak berfungsi seperti yang Anda harapkan.
sumber
Mengikuti ide James tetapi menggunakan jQuery:
Jika halaman tidak memiliki jQuery, kirimkan:
sumber
Ada metode baru untuk secara langsung memilih emulasi media di Alat Pengembang, lihat https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/
sumber
Saya Menemukan cara mudah untuk melakukannya di Chrome .
Sekarang coba cetak. Ini akan memilih layar CSS bukannya Cetak CSS.
sumber
Leo punya ide bagus di sana, tetapi tidak cukup melakukan apa yang dikatakan James : seharusnya
Petunjuk: simpan yang berikut ini sebagai bookmarklet agar mudah digunakan:
Preload ini jQuery dan menunggu 2secs untuk menyelesaikannya, tetapi jika menunggu ini tidak cukup, jalankan saja lagi, jQuery seharusnya sudah dimuat sementara itu.
sumber
Lakukan apa yang dikatakan James ;)
Anda dapat memeriksa keluaran yang membuka pengaturan Alat Pengembang Chrome (sudut kanan bawah) dan memilih "Ganti" opsi "Emulasi CSS media print" -view. Dengan mengaktifkan opsi ini, Anda dapat membandingkan tampilan cetak dan layar. Selamat bersenang-senang!
Pasang addon ini: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk
Sekarang gambar latar belakang dan warna dicetak juga.
Bug: Tidak berfungsi dengan sprite CSS.
EDIT: Chrome telah mengubah tampilan cetak pada tahun 2014 saya pikir sehingga Anda tidak perlu menggunakan addon yang tertaut lagi.
sumber
Saya hanya mengalami masalah ini dengan situs web yang menggunakan satu file CSS
@media print
dan@media screen
, jadi solusi untuk menonaktifkan file CSS cetak yang terpisah tidak bekerja untuk saya. Meskipun saya pasti bisa mengedit CSS dan mengomentari blok cetak sambil melihat halaman, perubahan itu tidak terbawa ke pratinjau cetak.Solusi yang saya temukan adalah ekstensi Print Edit untuk Firefox dan Chrome . Ini memungkinkan Anda mengedit halaman segera sebelum mencetak, dan menyertakan tombol sederhana untuk menggunakan Gaya Web (
@media screen
) untuk halaman tersebut.Saya memang harus mengubah skala pencetakan saya sedikit, karena permukaan cetak kira-kira rasio 17:22 sedangkan browser saya kira-kira 16: 9, jadi beberapa hal pada halaman menjadi agak ramai secara horizontal. Saya juga harus mengaktifkan pencetakan warna latar belakang & gambar secara terpisah
sumber
Terkadang situs web menggunakan CSS untuk menentukan bahwa gaya yang berbeda harus digunakan di layar dan saat mencetak. Ini sering baik, tetapi juga bisa membingungkan dan bermasalah. Periksa kode sumber halaman dan cari sesuatu seperti:
Salah satu alasan masalah ini umum adalah bahwa situs web menggunakan kerangka kerja Bootstrap yang populer menggunakan file bootstrap.min.css yang ada di mana-mana , yang berisi gaya CSS di atas.
Kuncinya adalah mencari
@media print
. Situs web sering memiliki struktur yang kompleks dan mungkin membantu untuk menyimpan halaman secara lokal dan memeriksanya dengan alat pencarian teks rekursif.Ketika Anda merasa telah menemukan tempat dalam kode CSS, Anda dapat memodifikasi halaman secara langsung di browser Anda dengan menggunakan fitur pengembangnya. (Di Chrome Anda menekan Ctrl+ Shift+ Iuntuk meluncurkannya.)
Cari kode CSS dan hapus atau batalkan baris yang menyebabkan masalah. Verifikasi bahwa operasi bekerja dengan menggunakan "Print preview".
sumber
Instal addon Greasemonkey dan gunakan skrip yang diberikan di bawah ini.
Saya memodifikasi skrip yang saya temukan di sini http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/
Saya mengubah "layar" menjadi "mencetak" di bagian akhir (saya tidak tahu tentang jQuery, jadi jangan bertanya kepada saya) sehingga pada akhirnya mengirimkan versi layar ke printer. Saat mencetak ke pdf, (menggunakan printer Foxit atau Nitro Pdf), saya mengatur jenis halaman ke Tabloid Extra dalam mode lansekap sehingga ukuran pdf cocok dengan ukuran layar lebih atau kurang. Nikmati! Ingat, saya tidak tahu apa-apa tentang pemrograman, jadi kreditnya jatuh ke penulis aslinya.
sumber
Cobalah untuk mengaktifkan
"Print background (colors & images)"
opsiPage Setup
dan periksa tampilannyaPrint Preview
(Ini untuk FF).sumber
Mirip dengan James - gunakan tab "Sumber" di alat Pengembang Chrome, dan ganti semua instance
media print
denganmedia speech
. Dengan demikian semua perubahan css untuk menyembunyikan navbars dll tidak akan diterapkan saat mencetak (tetapi akan diterapkan saat text-to-speech digunakan)Ini bisa dilakukan dengan JQuery seperti di atas.
Ini berguna karena saya menggunakan CDN dari css sehingga kustomisasi keluar
sumber
Ada alat yang bagus untuk itu di Mac.
Instal Paparazzi => salin URL ke Paparazzi => Simpan gambar sebagai => PDF
(dalam ekspor PDF, bahkan Teks pun dapat dipilih, ini bukan hanya "gambar")
https://derailer.org/paparazzi/screenshots
Nikmati :-)
sumber