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


223

我正在尝试打印页面。在该页面中,我为表格提供了背景色。当我在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>

1
看来它可以正常工作:jsfiddle.net/tDggR/2我正在使用Chrome版本25
Jeremy Ninnes


天哪!即使在Java8 WebView引擎中也可以使用
ruX

Answers:


416

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

这是小提琴(为了易于打印预览而被嵌入)。


打开小提琴时,我Print preview failed.在Chrome v47.0.2526.106中收到消息
piotr_cz

Mozilla已经标明这是非标准,这样的结果是不一致的,不应在生产场地使用developer.mozilla.org/en-US/docs/Web/CSS/...
麦克年轻人

是的,这适用于Chrome。Bootstrap css使用打印介质为我覆盖了它。您还可以使用Chrome Elements检查器底部的“渲染”标签预览和检查打印模式。如果您想查看替代堆栈,可以使用“模拟CSS媒体”选项。
Corgalore

对我
有用

75

该CSS属性是您所需要的,它对我有用...在Chrome中预览时,您可以选择查看其BW和Color(Color:Options-Color或Black和white),因此,如果没有该选项,则我建议抓住这个Chrome扩展程序,让您的生活更轻松:

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

您在小提琴上添加的网站需要在媒体打印CSS中使用它(您只需要添加它即可...

媒体在体内打印CSS:

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

更新 好,所以您的问题是bootstrap.css...。它与您一样具有媒体打印的css ....您将其移除,那应该给您颜色....您需要自己动手或坚持使用引导打印CSS。

当我单击“打印”时,我看到颜色...。http : //jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/



1
如果是这样,请确保您的引导程序具有webkit-print-color-adjust:在身体上检查是另一种方式...当然,在印刷媒体CSS中
Riskbreaker 2013年

它不起作用defie.co/testing/twitter-bootstrap-558bc52/docs/examples / ...我在这段代码中给了它

您没有按照我在html内部CSS中所述的那样将其添加到打印介质中:yout html第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;}....您需要在其中添加它...
Riskbreaker 2013年

我再次对其进行了编辑,但仍无法正常工作defie.co/testing/twitter-bootstrap-558bc52/docs/examples / ...

32

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

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

在此处输入图片说明


嘿,由于某种原因,我终于可以制作一个小提琴jsfiddle.net/qm7shrvf了,我无法获得chrome在打印预览中渲染绿色或红色背景(虽然我没有尝试实际打印它),谢谢!(我确实观察到jsfiddle.net的黑色背景确实是基于该chrome设置渲染的)
Eric

31

我只需要将!important属性添加到background-color标记中即可显示它,不需要webkit部分:

background-color: #f5f5f5 !important;


很好。.我可以知道为什么不给出重要@Flea而不显示颜色的原因吗?
-vimal kumar,

好吧,不明白为什么会这样,但是它解决了我的问题:-)
Shrikant

11

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

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


10

您的CSS必须是这样的:

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

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

8

对于那些使用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
}

6

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

请参阅我的小提琴以获得更详细的演示。



3

对于IE

如果使用的是IE,则转到打印预览(右键单击文档->打印预览),转到设置,然后选择“打印背景色和图像”,选择该选项并尝试。

在此处输入图片说明


2

@media print {* ,: after,:before ....}下的引导css文件中有一种样式,其颜色和背景样式标记为!important,可删除任何元素上的任何背景颜色。杀死这两个CSS,它将起作用。

Bootstrap会做出执行中的决定,即您绝不能在打印中使用任何背景色,因此您必须编辑其CSS或使用其他具有更高优先级的!important样式。干得好引导...


2

我使用了purgatory101的答案,但是在保留所有颜色(图标,背景,文本颜色等)时遇到了麻烦,尤其是CSS样式表不能与动态更改DOM元素颜色的库一起使用。因此,这里有一个脚本,可在打印之前更改元素的样式(background-colourcolour),并在完成打印后清除样式。避免在@media print样式表中编写很多CSS很有用,因为无论页面结构如何,CSS都可以工作。

该脚本的一部分专门用于保持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);
}

查找图标路径以为:before元素创建CSS的部分是此SO答案的副本


1
它的工作原理非常感谢(请注意,您需要varwindow最后一个代码段中删除)
adelriosantiago


1

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

@media print{
  .box-text {

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

0

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


0

最好的解决方案,如果您使用的是引导程序,那么只需执行一件事即可删除@media print {}其中的所有代码。并在进行打印预览时通过更多设置启用背景图形。


为什么要在打印时删除所有打印CSS?
Munim Munna

这是为了使彩色打印可见
穆罕默德。Shaizad

-1

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

试试这个 :

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

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

1
可以使用media =“ all”而不是两个链接标签来完成
big_water
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.