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

问题描述 投票：195回答：17

我正在尝试打印一个页面。在那个页面中，我给了一张表背景颜色。当我在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>[email protected]</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>
css google-chrome css3 printing webkit
17个回答
378
投票

Chrome CSS属性-webkit-print-color-adjust: exact;工作正常。

但是，确保使用正确的CSS进行打印通常很棘手。可以采取一些措施来避免您遇到的困难。首先，将所有打印CSS与屏幕CSS分开。这是通过@media print和@media screen完成的。

通常只是设置一些额外的@media print CSS是不够的，因为你在打印时仍然包含所有其他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;
    }
}

这是fiddle（和embedded易于打印预览）。

2
投票

在@media print {*，：after，：before ....}下的bootstrap css文件中有一种样式，其颜色和背景样式标记为！important，它删除任何元素上的任何背景颜色。杀死那两块css，它会起作用。

Bootstrap正在执行决定，你应该永远不会在打印中有任何背景颜色，所以你必须编辑他们的CSS或具有更高优先级的另一种！重要风格。好工作bootstrap ...

2
投票

我使用purgatory101's answer但是无法保留所有颜色（图标，背景，文本颜色等等），尤其是CSS样式表不能与动态更改DOM元素颜色的库一起使用。因此，这是一个脚本，可以在打印前更改元素的样式（background-colour和colour），并在打印完成后清除样式。避免在@media print样式表中编写大量CSS是有用的，因为它适用于任何页面结构。

脚本的一部分专门用于保持Font Awesome图标的颜色（或任何使用qazxsw poi选择器插入彩色内容的元素）。

:before

兼容性：适用于Chrome，我没有测试其他浏览器。

JSFiddle showing the script in action

然后修改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

找到用于创建CSS的图标路径的部分：在元素之前是来自window._originalPrint = window.print; window.print = function() { setColors('body *'); setIconColors('body .fa'); window._originalPrint(); setTimeout(function () { resetColors('body *'); resetIconColors(); }, 100); } 的副本

1
投票

您还可以使用this SO answer酒店。

1
投票

如果你使用Bootstrap.just在自定义css文件中使用此代码。 Bootstrap会删除打印预览中的所有颜色。

box-shadow
1
投票

对于IE

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

@media print{ .box-text { font-size: 27px !important; color: blue !important; -webkit-print-color-adjust: exact !important; } }

0
投票

如果您在没有“打印介质样式”选项的情况下下载Bootstrap，则不会出现此问题，也不必在bootstrap.css文件中手动删除“@media print”代码。

0
投票

如果你使用bootstrap，那么最好的解决方案是这样做只需要删除@media print {}里面的所有代码。并在进行打印预览时启用更多设置的背景图形。

-1
投票

我加载外部css源文件并将media =“screen”更改为media =“print”，并显示我的表的所有边框

试试这个 ：

enter image description here
68
投票

那个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/

27
投票

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

background-color: #f5f5f5 !important;

26
投票

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

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

enter image description here

10
投票

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

<link rel="stylesheet" media="screen" href="">
7
投票

你的CSS必须是这样的：

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

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

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

请参阅我的fiddle以获得更详细的演示。

5
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.