打印预览中不显示背景色

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

CSS属性是所有你需要它为我工作…在Chrome预览时，你可以选择看到它的BW和颜色(颜色:选项-彩色或黑白)，所以如果你没有这个选项，那么我建议抓住这个Chrome扩展，让你的生活更容易:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en < a href = " https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en " > < / >

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

媒体打印CSS在body:

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

<强>更新 你的问题是bootstrap。css。它有一个媒体打印CSS以及你做....你去掉它，就会得到颜色....你需要要么自己做，要么坚持用bootstrap打印css

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

小开
最佳答案

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

然而，确保使用正确的CSS进行打印通常是一件棘手的事情。有几件事可以避免你遇到的困难。首先，将打印CSS与屏幕CSS分开。这是通过@media print和@media screen来完成的。

通常情况下，仅仅设置一些额外的@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;
}
}

下面是小提琴(和嵌入式，以便打印预览)。

小开

你确定这是一个css问题?谷歌上有一些关于这个问题的帖子: http://productforums.google.com/forum/ !category-topic /铬/ discuss-chrome / eMlLBcKqd2s < / p >

这可能与打印过程有关。在safari(也是webkit)上，在打印机对话框中有一个用于打印背景图像和颜色的复选框。

小开

在@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使用1px x 1px的#404040像素制作成PNG。如果用户启用了图像，它可能会工作，如果没有…
  • 设置box-shadow，如果不行的话…
  • 边框= 1/2你想要的盒子高度和/或宽度，纯色，颜色。在上面的例子中，我想要一个高度为60px的方框。
  • 将高度/宽度归零，这取决于你在border属性中控制的内容。
  • 字体颜色将默认为黑色，除非你使用!important
  • 将line-height设置为0来修复没有物理尺寸的盒子。
  • 制作和托管你自己的png:-)
  • 如果文本在块需要换行，把它放在一个div和定位div使用位置:相对;并删除行高。

有关更详细的演示，请参阅小提琴。

小开

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

background-color: #f5f5f5 !important;

小开

你的CSS必须是这样的:

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


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

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

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

小开

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

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

小开

如果你下载Bootstrap时没有“打印媒体样式”选项，你就不会有这个问题，也不需要手动删除Bootstrap .css文件中的“@media Print”代码。

小开

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

试试这个:

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


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

我使用purgatory101的回答，但很难保持所有的颜色(图标，背景，文本颜色等…)，特别是CSS样式表不能与动态改变DOM元素颜色的库一起使用。因此，这里有一个脚本，在打印之前更改元素的样式(background-colour和colour)，并在打印完成后清除样式。避免在@media print样式表中编写大量CSS是很有用的，因为无论页面结构如何，它都可以工作。

脚本中有一部分是专门用来保持fontaweesome图标的颜色(或任何使用:before选择器插入彩色内容的元素)。

< a href = " https://plnkr.co/edit/K43sFFx0Z7D3Z1z4pzLe?p=preview" rel="nofollow noreferrer">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);
}

在elements之前查找要创建CSS的图标路径的部分是这个SO答案的副本

小开

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

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

enter image description here

小开

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

小开

对于那些使用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)中删除这个section

或者在你想在自己的@media print中打印的页面的css中重写这些值

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

如果你正在使用引导。只需在自定义CSS文件中使用此代码。引导删除打印预览中的所有颜色。

@media print{
.box-text {


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

最好的解决方案，如果你正在使用bootstrap，所以只做一件事，删除@media print {}的所有代码在此。并在打印预览时从更多设置中启用背景图形。

小开

对于IE

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

enter image description here

小开
你可以使用内联css样式!important。 如:< / p > 
<p style="background:red!important">ABCD</p>
小开

如果你正在使用nextjs或react，将这个添加到全局css中:

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

这对我很管用。


提交答案