Колір фону не відображається в попередньому перегляді друку

Я намагаюся надрукувати сторінку. На цій сторінці я дав таблиці колір фону. Коли я переглядаю попередній перегляд друку в хромі, його не приймає властивість кольору тла ...

Тому я спробував цю властивість:

-webkit-print-color-adjust: exact; 

але все ж його колір не показує.

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>

Властивість Chrome CSS -webkit-print-color-adjust: exact;працює належним чином.

Однак переконатися, що у вас є правильний CSS для друку, часто може бути складним. Можна зробити кілька речей, щоб уникнути труднощів. Спочатку відокремте всі друковані CSS від екранного CSS. Це робиться через @media printі @media screen.

Часто просто встановити додатковий @media printCSS недостатньо, тому що ви все ще включаєте всі ваші інші CSS під час друку. У цих випадках вам просто потрібно знати про специфіку CSS, оскільки правила друку не виграють автоматично проти CSS-правил, які не друкуються.

У вашому випадку -webkit-print-color-adjust: exactпрацює. Однак ваші background-colorта кольорові визначення вибиваються іншими CSS з вищою специфічністю.

Хоча я не схвалюю використання !importantпрактично за будь-яких обставин, наступні визначення працюють належним чином і розкривають проблему:

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

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

Ось загадка (і вбудована для зручності попереднього перегляду друку).

Це властивість CSS - це все, що вам потрібно, він працює для мене ... Під час попереднього перегляду в Chrome ви маєте можливість побачити його BW і Color ( Колір: Параметри - Колірний або Чорно-білий ), тож якщо у вас немає цього варіанта, тоді Я пропоную скористатися цим розширенням Chrome і полегшити ваше життя:

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

Сайт, який ви додали у скрипці, потребує цього у своєму CSS-файлі для друку (у вас його просто потрібно додати ...

мультимедійний друк CSS в тілі:

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

ОНОВЛЕННЯ ОК, тож ваша проблема bootstrap.css ... вона має CSS-файл для друку, як і ви .... ви видалите це, і це повинно надати вам колір .... вам потрібно або зробити своє, або дотримуватися завантажувачі print css.

Коли я натискаю надрукувати на цьому, я бачу колір .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Chrome не буде відображати фоновий колір або декілька інших стилів при друкуванні, якщо параметр фонової графіки вимкнено.

Це не має нічого спільного з css, @media або специфікою. Ви, ймовірно, можете зламати свій шлях, але найпростіший спосіб отримати хром для відображення фонового кольору та іншої графіки - це правильно встановити цей прапорець у розділі Додаткові параметри.

Мені просто потрібно було додати !importantатрибут на тег фонового кольору для того, щоб він відображався, а не потрібна частина webkit:

background-color: #f5f5f5 !important;

Якщо ви використовуєте завантажувальний або будь-який інший сторонній CSS, переконайтеся, що ви вказали медіа-екран лише на ньому, щоб у вас був контроль над типом носія для друку у власних файлах CSS:

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

Ваш CSS повинен бути таким:

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

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

ДЛЯ ТОГО ВИКОРИСТАННЯ BOOTSTRAP.CSS, це виправлення!

Я спробував усі рішення, і вони не спрацювали ... поки я не виявив, що bootstrap.css мав надзвичайно прикро, @media printщо скидає всі ваші кольори, кольори тла, тіні тощо ...

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

Тож видаліть цей розділ із bootstrap.css (або bootstrap.min.css)

Або замініть ці значення в css сторінки, яку ви хочете надрукувати самостійно @media print

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

В @media printтаблиці стилів використовуйте наступне .

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

Ось кілька зауважень:

• фоновий колір є абсолютним запасом і в основному існує для нащадків.
• background-image використовує піксель розміром 1px x 1px # 404040, перетворений на PNG. Якщо у користувача включені зображення, воно може працювати, якщо ні ...
• Встановіть тінь, якщо це не працює ...
• Бордюр = 1/2 бажаної висоти та / або ширини коробки, суцільний, колір. У наведеному вище прикладі я хотів вітрину висоти 60 пікселів.
• Зніміть висоту / ширину залежно від того, що ви керуєте в атрибуті кордону.
• Колір шрифту за замовчуванням стане чорним, якщо ви не використовуєте!
• Встановіть висоту лінії 0, щоб виправити для поля, що не має фізичних розмірів.
• Створіть та розмістіть власні PNG :-)
• Якщо текст у блоці потрібно обернути, помістіть його у діву та розташуйте діл, використовуючи позицію: відносна; і видаліть висоту лінії.

Дивіться мою загадку для більш детальної демонстрації.

Ви впевнені, що це проблема css? У Google навколо цього питання є деякі публікації: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Це може бути пов'язано з процесом друку. На сафарі, який також є вебкітом, встановлено прапорець для друку фонових зображень та кольорів у діалоговому вікні принтера.

Для IE

Якщо ви використовуєте IE, тоді перейдіть до попереднього перегляду друку (клацніть правою кнопкою миші на документі -> попередній перегляд друку), перейдіть до налаштувань і є опція "друкувати колір фону та зображень", виберіть цю опцію та спробуйте.

У файлах css для завантажувального файлу є стиль у файлі @media print {* ,: after,: before ....}, який має кольори та стилі тла, що важливо, які видаляють будь-які кольори фону з будь-яких елементів. Вбийте ці два шматки css, і воно спрацює.

Bootstrap приймає рішення про те, що ви ніколи не повинні мати жодного фонового кольору у відбитках, тому вам доведеться редагувати їх css або мати інший! Важливий стиль, який є вищим пріоритетом. Гарна завантажувальна робота ...

Я використав відповідь purgatory101, але зіткнувся зі збереженням усіх кольорів (піктограм, фонів, кольорів тексту тощо), особливо, що таблиці стилів CSS не можна використовувати з бібліотеками, які динамічно змінюють кольори елемента DOM. Тому ось сценарій, який змінює стилі елементів ( background-colourі colour) перед друком та очищає стилі після того, як буде зроблено друк. Корисно уникати написання великої кількості CSS в а@media print таблицю стилів, оскільки це працює незалежно від структури сторінки.

Є частина сценарію, спеціально створена для збереження кольорів піктограм FontAwesome (або будь-який елемент, який використовує :beforeселектор для вставки кольорового вмісту).

JSFiddle показує сценарій в дії

Сумісність: працює в Chrome, я не перевіряв інші браузери.

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

А потім змініть window.printфункцію, щоб вона встановила стилі перед друком та скидання їх після.

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

Частина, яка знаходить шляхи значків для створення CSS для: before elements - це копія з цього відповіді SO

Ви також можете скористатися box-shadowмайном.

якщо ви використовуєте Bootstrap .just, використовуйте цей код у власному файлі css. Bootstrap видаляє всі ваші кольори в попередньому перегляді друку.

@media print{
  .box-text {

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

Якщо ви завантажите Bootstrap без опції "Стилі друку медіа", у вас не виникне цієї проблеми, і вам не доведеться видаляти код "@media print" вручну з файлу bootstrap.css.

Найкраще рішення для цього, якщо ви використовуєте завантажувальний інструмент, тому просто видаліть одну справу @media print {} весь код всередині цього. а також увімкніть фонову графіку з додаткових налаштувань під час перегляду друку.

Я подвійно завантажую свій зовнішній вихідний файл css і змінюю медіа = "екран" на медіа = "друк", і всі межі моєї таблиці були показані

Спробуйте це :

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

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