Bagaimana cara mencetak dengan lembar gaya stylesheet?

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.

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.

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

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/

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.

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.

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.

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

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

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

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

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

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