logo标签列表

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

google-chromecssprintingwebkit
309

我想打印一个页面，在这个页面中，我给一个表格设了一个背景颜色。但是当我在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
看起来它正常工作：http://jsfiddle.net/tDggR/2/ 我正在使用Chrome 25版本。 - Jeremy Ninnes
http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/ 这里为什么不起作用？ - user2045025
哇！它甚至在Java8 WebView引擎中也能工作。 - ruX
请查看我的答案 https://dev59.com/IW865IYBdhLWcg3wSMgw#40087869 - Basheer AL-MOMANI
22个回答
545

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

然而，确保你的打印CSS正确无误通常是棘手的。有几个方法可以避免你遇到的困难。首先，通过@media print和@media screen将所有的打印CSS与屏幕CSS分离。

通常情况下，仅设置一些额外的@media print CSS并不足够，因为在打印时仍包括了所有其他的CSS。在这些情况下，你只需要注意CSS的特异性，因为打印规则并不会自动胜过非打印CSS规则。

在你的情况下，print-color-adjust: exact是有效的。然而，你的background-color和颜色定义被具有更高特异性的其他CSS所覆盖。

虽然我不建议在几乎任何情况下使用!important，但以下定义可以正常工作并暴露问题：

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

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

这里是fiddle（为了便于打印预览，还有embedded）。
1
打开Fiddle时，在Chrome v47.0.2526.106中出现“打印预览失败”消息。 - piotr_cz
Mozilla已将此标记为非标准，因此结果不一致，不应在生产站点中使用。https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust - Mike Young
是的，这在Chrome中可以工作。Bootstrap CSS使用打印媒体覆盖了它。您还可以使用Chrome元素检查器底部的渲染选项卡预览和检查打印模式。如果您想查看覆盖堆栈，则有一个“模拟CSS媒体”的选项。 - Corgalore
在我的环境中，使用background的!important有效。 - codemirror
113

这个CSS属性就是你需要的，对我来说很有效...在Chrome预览时，你可以选择看它的彩色或黑白版本（颜色：选项-颜色或黑白），所以如果你没有这个选项，我建议你下载这个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的打印样式。

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

扩展程序适用于所有页面，但它不适用于我的代码，为什么？http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/ http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/examples/poStaticEmail.html - user2045025
1
如果是这种情况，请确保您的引导程序在body上具有webkit-print-color-adjust: exact;，另一种检查方法是在打印媒体CSS中。 - Riskbreaker
你没有按照我在你的HTML内部CSS中所述的方式将它添加到打印媒体中：你的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
http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/ 但我在Chrome中看不到表头颜色 - user2045025
在这个fiddle中，我进行了更新，但是我的表格颜色没有改变。.vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } - user2045025
显示剩余3条评论
61

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

这与css、@media或特异性无关。您可能可以通过一些hack的方式绕过它，但最简单的方法是正确地选中“更多设置”下的复选框，以便让Chrome显示background-color和其他图形。

输入图片说明

1
嘿，我终于做了一个fiddle https://jsfiddle.net/qm7shrvf/。但是不知道为什么，我无法在打印预览中让Chrome渲染绿色或红色背景（尽管我还没有尝试实际打印）。谢谢！（我确实观察到，基于Chrome设置，jsfiddle.net的黑色背景会被渲染） - Eric
38
我只需要在background-color标签上添加!important属性，就可以使其显示出来，不需要webkit部分： background-color: #f5f5f5 !important;
好的，可以告诉我为什么没有添加!important时颜色不能正常显示吗？ - vimal kumar
不太明白为什么会发生这种情况，但问题已经解决了 :-) - Shrikant
原因是bootstrap.css，它有一个媒体打印css，它比你的css更重要。以下是解决方案：
  • A.通过在您的css文件中编写媒体打印样式来覆盖bootstrap媒体打印样式。
  • B.给您的原始样式!important，以便bootstrap媒体打印css无法覆盖它。
在您的情况下，!important比bootstrap的媒体打印css具有更高的优先级，这就是为什么!important在您的情况下起作用的原因。 - Parmjeet Singh
只有在使用样式属性的情况下才能正常工作，例如：<td width="35%" style="background-color: #DAEEF3 !important;">，并且webkit是必需的。 - Ousama
15

您的CSS必须像这样：

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

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}
我已经按照这种方式使用了CSS，但对我没有起作用。 - jazeb007
1
这是一种非标准的CSS扩展，可用于强制在基于WebKit引擎的浏览器中打印背景颜色和图像，Firefox有一个替代方案，请尝试使用color-adjust: exact;获取更多信息，请访问https://dev59.com/xVsV5IYBdhLWcg3w6ych - Miguel Angel Mendoza
它只在使用样式属性的情况下起作用，例如：<td width="35%" style="background-color: #DAEEF3 !important;"> - Ousama
Miguel，你太棒了！这个帖子里唯一提到Firefox的人，救了我的一天。 - evnp
12

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

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

如果您使用的是Bootstrap，请在您的自定义CSS文件中加入以下代码，这将避免在打印预览中丢失颜色：

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}
在我的设置后添加重要的描述很有帮助。我必须将-webkit-print-color-adjust设置为body，然后在每个需要颜色的元素中，我都必须声明它们是important，才能使其正常工作。 - yougotiger
1
这个还在工作，非常有用。 - undefined
11

对于IE浏览器

如果你正在使用IE浏览器，请前往打印预览（右键单击文档->打印预览），然后转到设置，选择“打印背景颜色和图像”选项并尝试打印。

在此输入图片描述

10
如果您正在使用Bootstrap或任何其他第三方CSS，请确保仅在它上面指定媒体屏幕，以便您可以控制自己CSS文件中的打印媒体类型。
<link rel="stylesheet" media="screen" href="">

请记住，如果您在引用Bootstrap CSS时添加了media="screen"，则会剥离掉Bootstrap中的所有样式。 - Dexter
7

我尝试了这里所有建议的解决方案（以及许多其他问题中的解决方案），例如在样式表和内联中应用了background-color: #000 !important;，或设置

@media print {
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

我曾试过多种方式，甚至将它们组合在一起，但都没有效果。

经过几个小时的研究，我发现"bug"只会使表格(th、td)失去background-color，但其他HTML元素(div等)或其他CSS属性(border-color等)仍然有效。

因此，我想到了一个"hack"，用<div>包装<th>或<td>内的任何内容（您可以调整填充以使其与之前的显示相同）。

这里我使用了React和@material-ui/core中的makeStyles。

JSX:

<Table bordered>
  <thead className={classes.thead}>
    <tr>
      <th><div>Col 1</div></th>
      <th><div>Col 2</div></th>
      <th><div>Col 3</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className={classes.tdGreen}><div>Row 1 - Col 1</div></td>
      <td><div>Row 1 - Col 2</div></td>
      <td><div>Row 1 - Col 3</div></td>
    </tr>
    <tr>
      <td><div>Row 2 - Col 1</div></td>
      <td className={classes.tdBlue}><div>Row 2 - Col 2</div></td>
      <td><div>Row 2 - Col 3</div></td>
    </tr>
  </tbody>
</Table>

样式：

const useStyles = makeStyles(() => ({
  thead: {
    textAlign: 'center',

    '& th:not(:last-child)': {
      padding: '0',
      '& > div': {
        padding: '.75rem',
        backgroundColor: '#D8D8D8 !important',
      }
    }
  },
  tdGreen: {
    padding: '0 !important',
    '& > div': {
      padding: '.75rem',
      color: 'white',
      backgroundColor: 'green !important',
    }
  },
  tdBlue: {
    padding: '0 !important',
    '& > div': {
      padding: '.75rem',
      color: 'white',
      backgroundColor: 'blue !important',
    }
  }
}));

你可以将这个想法转化为纯HTML/CSS解决方案。
希望这能帮助任何遇到此问题的人！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接