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

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

这是小提琴(并且为了便于打印预览而嵌入).

Answer 2

那个CSS属性就是你所需要的它对我有用...在Chrome中预览你可以选择看到它的BW和颜色(颜色:选项 - 颜色或黑白)所以如果你没有那个选项,那么我建议您抓住这个Chrome扩展程序,让您的生活更轻松:

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

你在小提琴上添加的网站需要你的媒体打印css(你只需要添加它...

媒体打印身体中的CSS:

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

更新 确定所以你的问题是bootstrap.css ...它有一个媒体打印css以及你做....你删除它,这应该给你的颜色....你需要做自己的或坚持bootstraps打印css.

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

Answer 3

我只需要将!important属性添加到background-color标签上以便显示,不需要webkit部分:

background-color: #f5f5f5 !important;

Answer 4

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

这与css,@ media或特异性无关.您可能会破解它的方式,但获取chrome以显示背景颜色和其他图形的最简单方法是在"更多设置"下正确选中此复选框.

Answer 5

长话短说

打印预览中丢失的“ bug ”仅出现在( , ) 上，但其他 HTML 元素 ( ,...) 或其他 CSS 属性 ( ,...) 仍然有效。因此，您可以通过将任何内容包装在元素内部或使用元素来“破解”，并为此设置 CSS （请参见下面的示例）。background-colortablethtddivborder-color<th><td><div><div>

完整答案

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

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

，甚至将它们组合在一起，但没有任何效果。

经过几个小时的研究，没有任何结果，我认识到丢失的“ bugbackground-color ”仅出现在table（th，td）上，但其他 HTML 元素（div，...）或其他 CSS 属性（border-color，...）仍然有效。

因此，我想出了一个“ hack ”来将任何东西包裹在里面<th>或<td>用 a <div>（您可以调整填充以使其显示与之前相同）。

在下面的示例中，我使用了 ReactmakeStyles和@material-ui/core.

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 解决方案。

希望这可以帮助任何遇到这个问题的人！

Answer 6

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

@media print{
  .box-text {

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

Answer 7

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

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

Answer 8

你的CSS必须是这样的:

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

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

Answer 9

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

Answer 10

IE浏览器

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

Answer 11

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

请参阅我的小提琴,了解更详细的演示.

Answer 12

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

它可能与打印过程有关.在safari上,也就是webkit,还有一个复选框,用于在打印机对话框中打印背景图像和颜色.