Màu nền không hiển thị trong bản xem trước in

Tôi đang cố gắng in một trang. Trong trang đó tôi đã cho một bảng màu nền. Khi tôi xem bản xem trước in bằng chrome, nó không lấy thuộc tính màu nền ...

Vì vậy, tôi đã thử tài sản này:

-webkit-print-color-adjust: exact; 

nhưng nó vẫn không hiển thị màu.

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>

Thuộc tính Chrome CSS -webkit-print-color-adjust: exact;hoạt động phù hợp.

Tuy nhiên, đảm bảo rằng bạn có CSS ​​chính xác để in thường có thể khó khăn. Một số điều có thể được thực hiện để tránh những khó khăn bạn đang gặp phải. Đầu tiên, tách tất cả CSS in của bạn khỏi CSS màn hình của bạn. Điều này được thực hiện thông qua @media printvà @media screen.

Thường thì chỉ cần thiết lập một số @media printCSS bổ sung là không đủ vì bạn vẫn có tất cả các CSS khác khi in. Trong những trường hợp này, bạn chỉ cần lưu ý đến tính đặc hiệu của CSS vì các quy tắc in không tự động giành chiến thắng trước các quy tắc CSS không in.

Trong trường hợp của bạn, -webkit-print-color-adjust: exactđang làm việc. Tuy nhiên, background-colorđịnh nghĩa màu và màu của bạn đang bị đánh bại bởi các CSS khác với độ đặc hiệu cao hơn.

Mặc dù tôi không tán thành việc sử dụng !importanttrong gần như mọi trường hợp, các định nghĩa sau hoạt động đúng và phơi bày vấn đề:

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

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

Đây là fiddle (và được nhúng để dễ dàng xem trước bản in).

Thuộc tính CSS đó là tất cả những gì bạn cần, nó hoạt động với tôi ... Khi xem trước trong Chrome, bạn có tùy chọn để xem nó BW và Màu ( Màu: Tùy chọn- Màu hoặc Đen và trắng ) vì vậy nếu bạn không có tùy chọn đó, thì Tôi đề nghị lấy tiện ích mở rộng Chrome này và làm cho cuộc sống của bạn dễ dàng hơn:

https://chrom.google.com.vn/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=vi

Trang web bạn đã thêm trên fiddle cần điều này trong css in phương tiện của bạn (bạn có nó chỉ cần thêm nó ...

CSS in phương tiện trong cơ thể:

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

CẬP NHẬT OK vì vậy vấn đề của bạn là bootstrap.css ... nó có css in phương tiện cũng như bạn .... bạn xóa cái đó và nó sẽ cho bạn màu .... bạn cần phải tự làm hoặc gắn bó với bootstraps in css.

Khi tôi nhấp vào in trên này, tôi thấy màu .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Chrome sẽ không hiển thị màu nền hoặc một số kiểu khác khi in nếu cài đặt đồ họa nền bị tắt.

Điều này không có gì để làm với css, @media hoặc tính đặc hiệu. Bạn có thể có thể hack theo cách của mình, nhưng cách dễ nhất để chrome hiển thị màu nền và đồ họa khác là kiểm tra chính xác hộp kiểm này trong Cài đặt khác.

Tôi chỉ cần thêm !importantthuộc tính vào thẻ màu nền để nó hiển thị, không cần phần webkit:

background-color: #f5f5f5 !important;

Nếu bạn đang sử dụng bootstrap hoặc bất kỳ CSS bên thứ 3 nào khác, hãy đảm bảo bạn chỉ định màn hình phương tiện chỉ trên đó, để bạn có quyền kiểm soát loại phương tiện in trong các tệp CSS của riêng bạn:

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

CSS của bạn phải như thế này:

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

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

ĐỂ SỬ DỤNG BOOTSTRAP.CSS, đây là cách khắc phục!

Tôi đã thử tất cả các giải pháp và chúng không hoạt động ... cho đến khi tôi phát hiện ra rằng bootstrap.css cực kỳ khó chịu @media printkhi đặt lại tất cả các màu, màu nền, bóng, v.v.

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

Vì vậy, hãy xóa phần này khỏi bootstrap.css (hoặc bootstrap.min.css)

Hoặc ghi đè các giá trị này trong css của trang bạn muốn in bằng chính bạn @media print

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

Sử dụng như sau trong @media printbảng phong cách của bạn .

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

Dưới đây là một vài điều cần lưu ý:

• màu nền là dự phòng tuyệt đối và chủ yếu là cho hậu thế.
• ảnh nền sử dụng pixel 1px x 1px của # 404040 được tạo thành PNG. Nếu người dùng kích hoạt hình ảnh, nó có thể hoạt động, nếu không ...
• Đặt bóng hộp, nếu điều đó không hoạt động ...
• Đường viền = 1/2 chiều cao và / hoặc chiều rộng của hộp mong muốn, đặc, màu. Trong ví dụ trên tôi muốn có một hộp chiều cao 60px.
• Không có chiều cao / chiều rộng tùy thuộc vào những gì bạn đang kiểm soát trong thuộc tính viền.
• Màu chữ sẽ mặc định là màu đen trừ khi bạn sử dụng!
• Đặt chiều cao dòng thành 0 để sửa cho hộp không có kích thước vật lý.
• Tạo và lưu trữ PNG của riêng bạn :-)
• Nếu văn bản trong khối cần bọc, đặt nó vào div và định vị div bằng cách sử dụng vị trí: tương đối; và loại bỏ chiều cao dòng.

Xem fiddle của tôi cho một cuộc biểu tình chi tiết hơn.

Bạn có chắc chắn đây là một vấn đề css? Có một số bài đăng trên google xung quanh vấn đề này: http://productforums.google.com/forum/#!carget-topic/chrome/discuss-chrome/eMlLBcKqd2s

Nó có thể liên quan đến quá trình in. Trên safari, cũng là webkit, có một hộp kiểm để in hình ảnh và màu nền trong hộp thoại máy in.

Dành cho IE

Nếu bạn đang sử dụng IE thì hãy vào xem trước in (nhấp chuột phải vào tài liệu -> in xem trước), đi đến cài đặt và có tùy chọn "in màu nền và hình ảnh", chọn tùy chọn đó và thử.

Có một kiểu trong các tệp css bootstrap trong @media print {* ,: after ,: before ....} có các kiểu màu và nền được dán nhãn! Quan trọng, loại bỏ bất kỳ màu nền nào trên bất kỳ thành phần nào. Giết hai mảnh css đó và nó sẽ hoạt động.

Bootstrap đang đưa ra quyết định thực thi rằng bạn không bao giờ nên có bất kỳ màu nền nào trong bản in, vì vậy bạn phải chỉnh sửa css của họ hoặc có một phong cách quan trọng khác là ưu tiên cao hơn. Bootstrap công việc tốt ...

Tôi đã sử dụng câu trả lời của purgatory101 nhưng gặp khó khăn trong việc giữ tất cả các màu (biểu tượng, hình nền, màu văn bản, v.v.), đặc biệt là các bảng định kiểu CSS không thể được sử dụng với các thư viện tự động thay đổi màu của phần tử DOM. Do đó, đây là tập lệnh thay đổi kiểu của phần tử ( background-colourvà colour) trước khi in và xóa kiểu sau khi in xong. Sẽ rất hữu ích khi tránh viết nhiều CSS trong@media print định kiểu vì nó hoạt động theo bất kỳ cấu trúc trang nào.

Có một phần của tập lệnh được tạo đặc biệt để giữ màu cho các biểu tượng FontAwgie (hoặc bất kỳ phần tử nào sử dụng :beforebộ chọn để chèn nội dung được tô màu).

JSFiddle hiển thị tập lệnh đang hoạt động

Khả năng tương thích: hoạt động trong Chrome, tôi không kiểm tra các trình duyệt khác.

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

Và sau đó sửa đổi window.printchức năng để làm cho nó thiết lập các kiểu trước khi in và đặt lại chúng sau.

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

Phần tìm đường dẫn biểu tượng để tạo CSS cho: trước các phần tử là bản sao từ câu trả lời SO này

Bạn cũng có thể sử dụng box-shadowtài sản.

nếu bạn đang sử dụng Bootstrap .just, hãy sử dụng mã này trong tệp css tùy chỉnh của bạn. Bootstrap loại bỏ tất cả các màu của bạn trong bản xem trước in.

@media print{
  .box-text {

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

Nếu bạn tải xuống Bootstrap mà không có tùy chọn "In kiểu phương tiện", bạn sẽ không gặp vấn đề này và không phải xóa mã "@media print" theo cách thủ công trong tệp bootstrap.css của bạn.

Giải pháp tốt nhất cho việc này nếu bạn đang sử dụng bootstrap, vì vậy hãy thực hiện một thao tác xóa @media print {} tất cả mã bên trong này. và kích hoạt đồ họa nền từ nhiều cài đặt hơn trong khi xem bản in.

Tôi tải gấp đôi tệp nguồn css bên ngoài của mình và thay đổi media = "screen" thành media = "print" và tất cả các đường viền cho bảng của tôi đã được hiển thị

Thử cái này :

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

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