打印预览中不显示背景色

我正在试着打印一页。在该页中，我给一个表设置了背景色。当我在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>

当前回答

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

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

他们甚至把它们结合在一起，但都不起作用。

经过几个小时的研究，没有任何结果，我意识到“错误”丢失的背景颜色只出现在表(th, td)，但其他HTML元素(div，…)或其他CSS属性(border-color，…)仍然有效。

因此，我想出了一个“hack”来包装<th>或<td>内的任何内容与<div>(你可以调整填充，使其显示与先前相同)。

这里我使用React和@material-ui/core的makestyle。

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

希望这篇文章能帮助到任何有这个问题的人!

2023-01-17 06:36:07

其他回答

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

Bootstrap正在执行决定，你不应该在打印中使用任何背景颜色，所以你必须编辑它们的css或有另一个优先级更高的!important样式。bootstrap做得好…

2016-05-31 15:38:32

对于IE

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

2019-03-28 09:50:01

如果你正在使用bootstrap或任何其他第三方CSS，确保你只在它上面指定媒体屏幕，这样你就可以在你自己的CSS文件中控制打印媒体类型:

2015-12-16 09:51:22

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

试试这个:

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

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

2016-12-19 12:51:20

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

这与css、@media或特异性无关。你也许可以破解它，但最简单的方法让chrome显示背景色和其他图形是正确地选中更多设置下的复选框。

2017-09-27 21:28:48

打印预览中不显示背景色

推荐文章

最新文章

标签