打印预览中未显示背景颜色

Question

我正在尝试打印一页。在该页面中，我为表格提供了背景颜色。 当我在 chrome 中查看打印预览时，它不具有背景颜色属性...

所以我尝试了这个属性：

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

Answer 1

Chrome CSS 属性-webkit-print-color-adjust: exact; 可以正常工作。

但是，确保您有正确的 CSS 用于打印通常很棘手。可以做几件事来避免你遇到的困难。首先，将所有打印 CSS 与屏幕 CSS 分开。这是通过@media print 和@media screen 完成的。

通常仅设置一些额外的@media print CSS 是不够的，因为在打印时您仍然包含所有其他 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;
    }
}

这里是fiddle（和embedded，便于打印预览）。

Answer 2

你只需要那个 CSS 属性，它对我有用...在 Chrome 中预览时，你可以选择查看它 BW 和 Color(Color: Options- Color or Black and white) 所以如果您没有该选项，那么我建议您使用此 Chrome 扩展程序，让您的生活更轻松：

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

您在 fiddle 上添加的网站在您的媒体打印 css 中需要这个（您有它只需要添加它...

正文中的媒体打印 CSS：

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

更新 好的，所以你的问题是 bootstrap.css ......它和你一样有一个媒体打印 css ......你删除它，这应该给你颜色......你需要自己做或坚持使用 bootstrap打印 css。

当我点击打印时，我看到颜色.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Answer 3

如果背景图形设置关闭，Chrome 将不会在打印时呈现背景颜色或其他几种样式。

这与 css、@media 或特异性无关。您可能可以绕过它，但让 chrome 显示背景颜色和其他图形的最简单方法是在“更多设置”下正确选中此复选框。

Answer 4

我只需要将!important 属性添加到背景颜色标签上即可显示，不需要webkit 部分：

background-color: #f5f5f5 !important;

Answer 5

如果您使用引导程序或任何其他 3rd 方 CSS，请确保仅在其上指定媒体屏幕，以便您可以在自己的 CSS 文件中控制打印媒体类型：

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

Answer 6

你的 CSS 必须是这样的：

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

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

Answer 7

对于那些使用 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）中删除此部分

或者在你自己的@media print中覆盖你要打印的页面的css中的这些值

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

Answer 8

对于 IE

如果您使用的是 IE，则进入打印预览（右键单击文档 -> 打印预览），进入设置并有“打印背景颜色和图像”选项，选择该选项并尝试。

Answer 9

在您的 @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-color 是绝对的后备颜色，主要用于后代。
• background-image 使用 #404040 的 1px x 1px 像素制作成 PNG。如果用户启用了图像，它可能会工作，如果没有......
• 设置盒子阴影，如果这不起作用...
• 边框 = 1/2 所需的框高度和/或宽度，实心，颜色。在上面的示例中，我想要一个 60 像素高度的框。
• 根据您在边框属性中控制的内容将高度/宽度归零。
• 除非您使用 !important，否则字体颜色将默认为黑色
• 将 line-height 设置为 0 以修复没有物理尺寸的框。
• 制作和托管您自己的 PNG :-)
• 如果块中的文本需要换行，请将其放入一个 div 中，并使用 position:relative 定位该 div；并删除行高。

查看我的fiddle 以获得更详细的演示。

Answer 10

如果您使用的是 Bootstrap。只需在您的自定义 css 文件中使用此代码即可。 Bootstrap 会删除打印预览中的所有颜色。

@media print{
  .box-text {

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

Answer 11

你确定这是一个 CSS 问题吗？ google上有一些关于这个问题的帖子： http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

可能与打印过程有关。在同样是 webkit 的 safari 上，有一个复选框可以在打印机对话框中打印背景图像和颜色。

Answer 12

@media print{*,:after,:before ....} 下的引导 css 文件中有一个样式，它具有标记为 !important 的颜色和背景样式，它会删除任何元素上的任何背景颜色。杀掉那两段 css 就可以了。

Bootstrap 正在做出执行决定，即您应该永远在打印件中使用任何背景颜色，因此您必须编辑它们的 css 或使用另一个优先级更高的 !important 样式。很好的引导程序......

Answer 13

我使用了purgatory101's answer，但无法保留所有颜色（图标、背景、文本颜色等...），尤其是 CSS 样式表不能与动态更改 DOM 元素颜色的库一起使用。因此，这里有一个脚本，它在打印之前更改元素的样式（background-colour 和colour），并在打印完成后清除样式。避免在 @media print 样式表中编写大量 CSS 很有用，因为它适用于任何页面结构。

脚本中有一部分是专门为保持 FontAwesome 图标颜色（或任何使用 :before 选择器插入彩色内容的元素）而设计的。

JSFiddle showing the script in action

兼容性：适用于 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);
}

找到为 :before 元素创建 CSS 的图标路径的部分是来自 this SO answer 的副本

Answer 14

您也可以使用box-shadow 属性。

Answer 15

您可以使用带有 !important 的内联 CSS 样式。 例如。

<p style="background:red!important">ABCD</p>

Answer 16

如果您下载的 Bootstrap 没有“打印媒体样式”选项，则不会出现此问题，也不必在 bootstrap.css 文件中手动删除“@media print”代码。

Answer 17

如果您使用的是引导程序，那么最好的解决方案就是做一件事，删除 @media print {} 里面的所有代码。并在进行打印预览时从更多设置中启用背景图形。

Answer 18

我双重加载我的外部 css 源文件并将 media="screen" 更改为 media="print" 并显示了我的表格的所有边框

试试这个：

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

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