Warna latar belakang tidak muncul dalam pratinjau cetak


223

Saya mencoba mencetak halaman. Di halaman itu saya telah memberi tabel warna latar belakang. Ketika saya melihat pratinjau cetak dalam chrome yang tidak mengambil properti warna latar belakang ...

Jadi saya mencoba properti ini:

-webkit-print-color-adjust: exact; 

tapi tetap saja tidak menunjukkan warna.

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

1
Sepertinya berfungsi dengan baik: jsfiddle.net/tDggR/2 Saya menggunakan chrome versi 25
Jeremy Ninnes


Astaga! Ia bekerja bahkan di mesin webview
java8

Jawaban:


416

Properti Chrome CSS -webkit-print-color-adjust: exact;bekerja dengan tepat.

Namun, memastikan Anda memiliki CSS yang benar untuk dicetak seringkali sulit. Beberapa hal dapat dilakukan untuk menghindari kesulitan yang Anda alami. Pertama, pisahkan semua CSS cetak Anda dari CSS layar Anda. Ini dilakukan melalui@media print dan @media screen.

Sering kali hanya menyiapkan beberapa tambahan @media print CSS tidak cukup karena Anda masih memiliki semua CSS Anda yang lain saat mencetak. Dalam kasus ini, Anda hanya perlu mengetahui kekhususan CSS karena aturan cetak tidak secara otomatis menang melawan aturan CSS non-cetak.

Dalam kasus Anda, the -webkit-print-color-adjust: exact ini berfungsi. Namun, background-colordefinisi Anda dan warna sedang dikalahkan oleh CSS lain dengan spesifisitas yang lebih tinggi.

Meskipun saya tidak menganjurkan penggunaan !importantdalam situasi apa pun, definisi berikut ini berfungsi dengan baik dan mengekspos masalah:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Ini biola (dan disematkan untuk memudahkan pratinjau cetak).


Saat membuka biola, saya menerima Print preview failed.pesan di Chrome v47.0.2526.106
piotr_cz

Mozilla menandainya sebagai non-standar, sehingga hasilnya tidak konsisten dan tidak boleh digunakan di situs produksi developer.mozilla.org/en-US/docs/Web/CSS/…
Mike Young

Ya, ini berfungsi di Chrome. Bootstrap css menimpanya untuk saya menggunakan media cetak. Anda juga dapat melihat dan memeriksa mode cetak menggunakan tab Rendering di bagian bawah inspektur Chrome Elements. Ada opsi untuk Meniru Media CSS jika Anda ingin melihat tumpukan override.
Corgalore

Bekerja untuk saya dengan! Penting di latar belakang
codemirror

75

Properti CSS itulah yang Anda perlukan, itu berfungsi untuk saya ... Saat mempratinjau di Chrome Anda memiliki opsi untuk melihatnya BW dan Warna ( Warna: Opsi- Warna atau Hitam dan putih ) jadi jika Anda tidak memiliki opsi itu, maka Saya sarankan untuk mengambil ekstensi Chrome ini dan membuat hidup Anda lebih mudah:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=id

Situs yang Anda tambahkan pada biola membutuhkan ini di media cetak css Anda (Anda hanya perlu menambahkannya ...

media cetak CSS dalam tubuh:

@media print {
body {-webkit-print-color-adjust: exact;}
}

UPDATE OK jadi masalah Anda adalah bootstrap.css ... ia memiliki media cetak css dan juga Anda .... Anda menghapusnya dan itu akan memberi Anda warna .... Anda harus melakukan sendiri atau tetap menggunakan bootstraps mencetak css.

Ketika saya mengklik cetak pada ini saya melihat warna .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/


ekstensi berfungsi untuk semua halaman tetapi tidak berfungsi untuk kode saya mengapa jsfiddle.net/rajkumart08/TbrtD/1/embedded/result defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…

1
jika itu masalahnya pastikan bootstrap Anda memiliki webkit-print-color-customize: exact; di tubuh Anda adalah cara lain untuk mengecek ... di media cetak css tentu saja
Riskbreaker

defie.co/testing/testing/twitter-bootstrap-558bc52/docs/examples/… yang tidak berfungsi saya berikan dalam kode ini

Anda tidak menambahkannya di media cetak seperti yang saya nyatakan di html dalam css Anda: Anda html baris 1154: @media print { body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}....Anda perlu menambahkannya di sana ...
Riskbreaker

Saya telah mengeditnya lagi tetapi tetap tidak berfungsi defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…

32

Chrome tidak akan membuat warna latar belakang, atau beberapa gaya lainnya, saat mencetak jika pengaturan gambar latar belakang dimatikan.

Ini tidak ada hubungannya dengan css, @ media, atau spesifisitas. Anda mungkin dapat meretasnya, tetapi cara termudah untuk mendapatkan chrome untuk menunjukkan warna latar belakang dan grafik lainnya adalah dengan mencentang kotak ini di bawah Pengaturan Lainnya.

masukkan deskripsi gambar di sini


Hai, saya akhirnya sempat membuat jsfiddle.net/qm7shrvf biola untuk beberapa alasan, saya tidak bisa mendapatkan chrome untuk membuat latar belakang hijau atau merah di pratinjau cetak (saya belum mencoba untuk benar-benar mencetaknya) Terima kasih! (Saya memang mengamati bahwa latar belakang hitam dari jsfiddle.net memang diberikan berdasarkan pada pengaturan chrome itu)
Eric

31

Saya hanya perlu menambahkan !importantatribut ke tag warna latar belakang agar dapat muncul, tidak perlu bagian webkit:

background-color: #f5f5f5 !important;


Tidak apa-apa..Mungkin saya tahu alasan mengapa warna tidak ditampilkan tanpa memberikan @Flea penting
vimal kumar

Yah tidak mengerti mengapa ini terjadi tetapi itu memecahkan masalah saya :-)
Shrikant

11

Jika Anda menggunakan bootstrap atau CSS pihak ketiga lainnya, pastikan Anda menentukan layar media hanya di atasnya, sehingga Anda memiliki kontrol dari jenis media cetak dalam file CSS Anda sendiri:

<link rel="stylesheet" media="screen" href="">


10

CSS Anda harus seperti ini:

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}

8

UNTUK MEREKA MENGGUNAKAN BOOTSTRAP.CSS, ini adalah perbaikannya!

Saya telah mencoba semua solusi dan mereka tidak berfungsi ... sampai saya menemukan bahwa bootstrap.css memiliki super menjengkelkan @media printyang me-reset semua warna, warna latar, bayangan, dll ...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

Jadi hapus bagian ini dari bootstrap.css (atau bootstrap.min.css)

Atau timpa nilai-nilai ini di css dari halaman yang ingin Anda cetak sendiri @media print

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

6

Gunakan yang berikut di @media printlembar gaya Anda .

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

Berikut adalah beberapa hal yang perlu diperhatikan:

  • background-color adalah fallback absolut dan ada untuk anak cucu kebanyakan.
  • background-image menggunakan piksel 1px x 1px dari # 404040 yang dibuat menjadi PNG. Jika pengguna memiliki gambar yang diaktifkan itu mungkin berfungsi, jika tidak ...
  • Atur bayangan kotak, jika itu tidak berhasil ...
  • Batas = 1/2 tinggi yang Anda inginkan dan / atau lebar kotak, padatan, warna. Dalam contoh di atas saya ingin kotak tinggi 60px.
  • Nol keluar tinggi / lebar tergantung pada apa yang Anda kendalikan di atribut perbatasan.
  • Warna font akan default menjadi hitam kecuali Anda gunakan! Important
  • Atur tinggi garis ke 0 untuk memperbaiki agar kotak tidak memiliki dimensi fisik.
  • Buat dan host PNG Anda sendiri :-)
  • Jika teks dalam blok perlu dibungkus, masukkan ke dalam div dan posisikan menggunakan posisi: relatif; dan hapus ketinggian garis.

Lihat biola saya untuk demonstrasi yang lebih rinci.



3

Untuk IE

Jika Anda menggunakan IE kemudian pergi ke pratinjau cetak (klik kanan pada dokumen -> pratinjau cetak), buka pengaturan dan ada opsi "cetak warna dan gambar latar belakang", pilih opsi itu dan coba.

masukkan deskripsi gambar di sini


2

Ada gaya dalam file bootstrap css di bawah @media print {* ,: after,: before ....} yang memiliki warna dan gaya latar belakang berlabel penting, yang menghilangkan warna latar belakang pada elemen apa pun. Bunuh kedua potong css itu dan itu akan berhasil.

Bootstrap membuat keputusan pelaksanaan bahwa Anda tidak boleh memiliki warna latar belakang dalam cetakan, jadi Anda harus mengedit css mereka atau memiliki gaya penting lain yang lebih diutamakan. Bootstrap kerja bagus ...


2

Saya menggunakan jawaban purgatory101 tetapi mengalami kesulitan menjaga semua warna (ikon, latar belakang, warna teks dll ...), terutama bahwa stylesheet CSS tidak dapat digunakan dengan perpustakaan yang secara dinamis mengubah warna elemen DOM. Oleh karena itu di sini adalah skrip yang mengubah gaya elemen ( background-colourdan colour) sebelum mencetak dan menghapus gaya setelah pencetakan selesai. Sangat berguna untuk menghindari menulis banyak CSS dalam format@media print stylesheet karena berfungsi apa pun struktur halaman.

Ada bagian skrip yang dibuat khusus untuk menjaga warna ikon FontAwesome (atau elemen apa pun yang menggunakan :beforepemilih untuk menyisipkan konten berwarna).

JSFiddle menunjukkan skrip dalam aksi

Kompatibilitas: berfungsi di Chrome, saya tidak menguji peramban lain.

function setColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var eltBackground = $(elements[i]).css('background-color');
    var eltColor = $(elements[i]).css('color');

    var elementStyle = elements[i].style;
    if (eltBackground) {
      elementStyle.oldBackgroundColor = {
        value: elementStyle.backgroundColor,
        importance: elementStyle.getPropertyPriority('background-color'),
      };
      elementStyle.setProperty('background-color', eltBackground, 'important');
    }
    if (eltColor) {
      elementStyle.oldColor = {
        value: elementStyle.color,
        importance: elementStyle.getPropertyPriority('color'),
      };
      elementStyle.setProperty('color', eltColor, 'important');
    }
  }
}

function resetColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var elementStyle = elements[i].style;

    if (elementStyle.oldBackgroundColor) {
      elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
      delete elementStyle.oldBackgroundColor;
    } else {
      elementStyle.setProperty('background-color', '', '');
    }
    if (elementStyle.oldColor) {
      elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
      delete elementStyle.oldColor;
    } else {
      elementStyle.setProperty('color', '', '');
    }
  }
}

function setIconColors(icons) {
  var css = '';
  $(icons).each(function (k, elt) {
    var selector = $(elt)
      .parents()
      .map(function () { return this.tagName; })
      .get()
      .reverse()
      .concat([this.nodeName])
      .join('>');

    var id = $(elt).attr('id');
    if (id) {
      selector += '#' + id;
    }

    var classNames = $(elt).attr('class');
    if (classNames) {
      selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
    }

    css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
  });
  $('head').append('<style id="print-icons-style">' + css + '</style>');
}

function resetIconColors() {
  $('#print-icons-style').remove();
}

Dan kemudian memodifikasi window.printfungsi untuk membuatnya mengatur gaya sebelum mencetak dan mengatur ulang setelahnya.

window._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

Bagian yang menemukan ikon path untuk membuat CSS untuk: sebelum elemen adalah salinan dari jawaban SO ini


1
varwindow
Berhasil


1

jika Anda menggunakan Bootstrap. cukup gunakan kode ini di file css khusus Anda. Bootstrap menghapus semua warna Anda di pratinjau cetak.

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

0

Jika Anda mengunduh Bootstrap tanpa opsi "Print media styles", Anda tidak akan mengalami masalah ini dan tidak perlu menghapus kode "@ media print" secara manual di file bootstrap.css Anda.


0

Solusi terbaik untuk ini jika Anda menggunakan bootstrap jadi lakukan saja satu hal yang menghapus @media print {} semua kode di dalamnya. dan mengaktifkan gambar latar belakang dari lebih banyak pengaturan saat mengambil pratinjau cetak.


Mengapa menghapus semua CSS cetak saat mencetak?
Munim Munna

Ini untuk membuat warna terlihat untuk dicetak
Mohd. Shaizad

-1

Saya melipatgandakan file sumber css eksternal saya dan mengubah media = "layar" menjadi media = "cetak" dan semua batas untuk tabel saya ditampilkan

Coba ini :

<link rel="stylesheet" media="print" href="bootstrap.css" />

<link rel="stylesheet" media="screen" href="bootstrap.css" />

1
ini bisa dilakukan dengan media = "semua" alih-alih dua tag tautan
big_water
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.