Bagaimana cara mencetak dengan lembar gaya stylesheet?

50

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.

ay32
sumber
Jika situs web yang dipermasalahkan adalah pihak ketiga, mungkin Anda dapat mencoba Alat Pengembang Chrome (Ctrl + Shift + I), lalu klik kanan pada node / elemen (lembar gaya cetak dalam kasus ini) dan pilih Delete This Node.
DavChana
Ini duplikat!
vy32
Bukan jawaban langsung untuk pertanyaan Anda, tetapi jika di Firefox, Anda hanya kesal karena semua tautan dilampirkan dengan URL lengkapnya pada pratinjau cetak (siapa pun yang berpikir ini adalah ide yang bagus untuk 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 dengan printgaya kemudian hapus semua printaturan yang diterapkan a[href]. Kemudian luncurkan Print Preview lagi.
ADTC

Jawaban:

24

Menggunakan Alat Pengembang Chrome ( Ctrl+ Shift+ I) adalah satu-satunya yang saya temukan yang berfungsi.

  1. Cari semua contoh media="screen"dan hapus atribut itu.
  2. Kemudian cari media="print"dan hapus seluruh tautan itu.
  3. Lalu coba cetak.

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.

James
sumber
1
Terima kasih. Itu solusi yang bagus. Menyedihkan, tapi bagus. Situs web utama yang saya mengalami masalah adalah Wired, yang karena beberapa alasan mencetak dengan mengerikan tetapi tampak hebat di layar.
vy32
Saya memerlukan plugin yang melakukan ini.
vy32
3
@ vy32 itu bukan ide yang buruk sama sekali. Saya sudah lama ingin bermain dengan ekstensi Chrome. Selama liburan saya akhirnya punya beberapa jam. Jadi di sini adalah PrintScreen, sebuah tombol kecil yang Anda klik ketika sebuah halaman memiliki pemilih media cetak / layar kustom css. link
James
tombol PrintScreen tidak berfungsi dengan baik ???
vy32
1
Saya menduga ini adalah masalah pengalaman pengguna. Biasanya saya lebih fokus pada pengalaman pengguna, tapi kali ini saya hanya bermain-main dengan teknik dan sistem baru, dan gagal memperhatikan. Setelah mengklik tombol PS Anda perlu mengklik cetak dengan cara biasa. Anda benar, akan lebih masuk akal jika saya memiliki ekstensi memanggil cetak langsung. Jika saya punya waktu minggu ini, saya akan mencoba memperbarui ekstensi untuk langsung ke layar cetak sebagaimana mestinya. Terima kasih
James
17

Mengikuti ide James tetapi menggunakan jQuery:

$('*[media="screen"],*[media="print"]').attr('media', '')

Jika halaman tidak memiliki jQuery, kirimkan:

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);
Leo Gallucci
sumber
6

Saya Menemukan cara mudah untuk melakukannya di Chrome .

Buka Alat Pengembang> Rendering> Pilih 'layar' di Emulasikan media CSS.

Sekarang coba cetak. Ini akan memilih layar CSS bukannya Cetak CSS.

dj rock
sumber
browser web yang mana?
vy32
Di Peramban Chrome
dj rock
Ini berfungsi dan merupakan solusi tercepat!
Laurent
Lebih khusus tentang Chrome saat ini: Buka alat pengembang. Menu 3-titik kanan atas> Alat lainnya> Rendering. Gulir ke bawah untuk Meniru Media CSS.
Laurent
5

Leo punya ide bagus di sana, tetapi tidak cukup melakukan apa yang dikatakan James : seharusnya

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

Petunjuk: simpan yang berikut ini sebagai bookmarklet agar mudah digunakan:

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

Preload ini jQuery dan menunggu 2secs untuk menyelesaikannya, tetapi jika menunggu ini tidak cukup, jalankan saja lagi, jQuery seharusnya sudah dimuat sementara itu.

Bastian Blankenburg
sumber
4
  1. 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!

  2. 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.

mgutt
sumber
Menggunakan Alat Pengembang Chrome untuk mengatur "Emulasi media CSS" ke "layar" adalah satu-satunya jawaban yang berfungsi.
Benjamin
3

Saya hanya mengalami masalah ini dengan situs web yang menggunakan satu file CSS @media printdan @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

Brian S
sumber
Ini bekerja dengan baik untuk saya. Saya sudah menghabiskan 10 menit mengubah teks situs menjadi ungu karena printer saya kehabisan tinta. Dengan menggunakan solusi ini saya dapat menginstal ekstensi, tekan tombol gaya web dan wallah itu bekerja :)
Chris Nevill
1

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:

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

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".

Gruber
sumber
0

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.

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);
xs400
sumber
-1

Cobalah untuk mengaktifkan "Print background (colors & images)"opsi Page Setupdan periksa tampilannya Print Preview(Ini untuk FF).

Roma
sumber
1
Tidak memiliki hasil yang diinginkan. Maaf.
vy32
-1

Mirip dengan James - gunakan tab "Sumber" di alat Pengembang Chrome, dan ganti semua instance media printdengan media 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

Anda cad tuan - ambil itu
sumber
-2

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 :-)

Michael Kaufmann
sumber
Sayangnya, program ini membuat cetakan bitmap, yang berarti font-font tersebut diraster. Bukan itu yang saya inginkan.
vy32