Warna latar belakang tidak muncul dalam pratinjau cetak

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>[email protected]</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>

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

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/

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.

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

background-color: #f5f5f5 !important;

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

CSS Anda harus seperti ini:

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

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

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
}

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.

Apakah Anda yakin ini masalah css? Ada beberapa pos di google seputar masalah ini: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Ini mungkin terkait dengan proses cetak. Di safari, yang juga merupakan webkit, ada kotak centang untuk mencetak gambar dan warna latar belakang dalam dialog printer.

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.

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

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

Anda juga dapat menggunakan box-shadowproperti.

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

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.

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.

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