A cor do plano de fundo não aparece na visualização de impressão

Estou tentando imprimir uma página. Nessa página, dei à tabela uma cor de fundo. Quando visualizo a visualização da impressão no chrome, não está assumindo a propriedade cor de fundo ...

Então, eu tentei esta propriedade:

-webkit-print-color-adjust: exact; 

mas ainda não está mostrando a cor.

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>

A propriedade CSS do Chrome -webkit-print-color-adjust: exact;funciona adequadamente.

No entanto, garantir que você tenha o CSS correto para impressão pode ser complicado. Várias coisas podem ser feitas para evitar as dificuldades que você está tendo. Primeiro, separe todo o CSS impresso do CSS da tela. Isso é feito via @media printe @media screen.

Muitas vezes, apenas a configuração de um @media printCSS extra não é suficiente, porque você ainda tem todos os outros CSS incluídos ao imprimir também. Nesses casos, você só precisa conhecer a especificidade do CSS, pois as regras de impressão não vencem automaticamente contra as regras de CSS não impressas.

No seu caso, o -webkit-print-color-adjust: exactestá funcionando. No entanto, suas background-colordefinições de cores e estão sendo superadas por outros CSS com maior especificidade.

Embora eu não apóie o uso !importantem praticamente nenhuma circunstância, as seguintes definições funcionam corretamente e expõem o problema:

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

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

Aqui está o violino (e incorporado para facilitar a visualização da impressão).

Essa propriedade CSS é tudo que você precisa, funciona para mim ... Ao visualizar no Chrome, você tem a opção de vê-la em preto e branco ( Cor: Opções - Cor ou Preto e branco ); portanto, se você não tiver essa opção, Sugiro pegar essa extensão do Chrome e facilitar sua vida:

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

O site que você adicionou no fiddle precisa disso em sua mídia de impressão em css (você só precisa adicioná-lo ...

a mídia imprime CSS no corpo:

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

ATUALIZAÇÃO OK, para que seu problema seja o bootstrap.css ... ele possui um CSS de impressão de mídia, assim como você ... você remove isso e isso deve lhe dar cor ... você precisa fazer o seu próprio ou ficar com bootstraps imprime css.

Quando clico em imprimir, vejo cores .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

O Chrome não renderiza a cor de fundo ou vários outros estilos ao imprimir se a configuração de gráficos de fundo estiver desativada.

Isso não tem nada a ver com css, @media ou especificidade. Provavelmente, você pode dar um jeito de resolvê-lo, mas a maneira mais fácil de fazer com que o chrome mostre a cor de fundo e outros gráficos é marcar corretamente essa caixa de seleção em Mais configurações.

Eu só precisava adicionar o !importantatributo à marca de cor de fundo para que ela aparecesse, não precisava da parte do webkit:

background-color: #f5f5f5 !important;

Se você estiver usando o bootstrap ou qualquer outro CSS de terceiros, especifique a tela de mídia apenas nela, para ter o controle do tipo de mídia de impressão em seus próprios arquivos CSS:

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

Seu CSS deve ser assim:

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

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

Para aqueles que usam o BOOTSTRAP.CSS, essa é a correção!

Eu tentei todas as soluções e elas não estavam funcionando ... até que descobri que o bootstrap.css tinha um super chato @media printque redefine todas as suas cores, cores de fundo, sombras, etc ...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

Portanto, remova esta seção do bootstrap.css (ou bootstrap.min.css)

Ou substitua esses valores no css da página que você deseja imprimir por conta própria @media print

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

Use o seguinte na sua @media printfolha de estilos.

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

Aqui estão algumas coisas a serem observadas:

• a cor de fundo é o substituto absoluto e existe principalmente para a posteridade.
• a imagem de plano de fundo usa um pixel 1px x 1px de # 404040 transformado em PNG. Se o usuário tiver imagens ativadas, ele poderá funcionar, se não ...
• Defina a sombra da caixa, se isso não funcionar ...
• Borda = 1/2 da altura e / ou largura desejada da caixa, cor sólida. No exemplo acima, eu queria uma caixa de 60px de altura.
• Zere a altura / largura, dependendo do que você está controlando no atributo de borda.
• A cor da fonte ficará preta como padrão, a menos que você use!
• Defina a altura da linha como 0 para corrigir a caixa que não possui dimensão física.
• Crie e hospede seus próprios PNGs :-)
• Se o texto do bloco precisar quebrar, coloque-o em uma div e posicione a div usando a posição: relativa; e remova a altura da linha.

Veja meu violino para uma demonstração mais detalhada.

Tem certeza de que este é um problema de css? Existem algumas postagens no Google sobre esse problema: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Pode estar relacionado ao processo de impressão. No safari, que também é webkit, há uma caixa de seleção para imprimir imagens e cores de plano de fundo na caixa de diálogo da impressora.

Para o IE

Se você estiver usando o IE, vá para a visualização de impressão (clique com o botão direito do mouse em documento -> visualização de impressão), vá para configurações e existe a opção "imprimir cores e imagens de plano de fundo", selecione essa opção e tente.

Há um estilo nos arquivos css de inicialização em @media print {* ,: after,: before ....} que possui estilos de cores e de fundo rotulados como important, que removem qualquer cor de fundo de qualquer elemento. Mate esses dois pedaços de CSS e ele funcionará.

O Bootstrap está tomando a decisão de execução de que você nunca deve ter nenhuma cor de fundo nas impressões; portanto, é necessário editar o css ou ter outro estilo importante que seja uma precedência mais alta. Bom trabalho de inicialização ...

Usei a resposta do purgatory101, mas tive problemas para manter todas as cores (ícones, planos de fundo, cores de texto etc ...), principalmente porque as folhas de estilo CSS não podem ser usadas com bibliotecas que alteram dinamicamente as cores do elemento DOM. Portanto, aqui está um script que altera os estilos do elemento ( background-coloure colour) antes da impressão e apaga os estilos após a conclusão da impressão. É útil evitar escrever muito CSS em uma @media printfolha de estilo, pois funciona independentemente da estrutura da página.

Há uma parte do script criada especialmente para manter a cor dos ícones do FontAwesome (ou qualquer elemento que use um :beforeseletor para inserir conteúdo colorido).

JSFiddle mostrando o script em ação

Compatibilidade: funciona no Chrome, não testei outros navegadores.

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

E modifique a window.printfunção para definir os estilos antes de imprimir e redefini-los depois.

window._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

A parte que encontra caminhos de ícones para criar CSS para: before elements é uma cópia desta resposta do SO

Você também pode usar a box-shadowpropriedade

se você estiver usando o Bootstrap. basta usar esse código no seu arquivo css personalizado. O Bootstrap remove todas as suas cores na visualização de impressão.

@media print{
  .box-text {

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

Se você baixar o Bootstrap sem a opção "Estilos de mídia de impressão", não terá esse problema e não precisará remover o código "@media print" manualmente no seu arquivo bootstrap.css.

A melhor solução para isso, se você estiver usando o bootstrap, faça uma coisa e remova @media print {} todo o código dentro dele. e habilite gráficos de plano de fundo em mais configurações enquanto realiza a visualização da impressão.

Carrego duas vezes meu arquivo de origem css externo e altero a mídia = "tela" para mídia = "impressão" e todas as bordas da minha tabela foram mostradas

Tente o seguinte:

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

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