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

223

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>
ghost_dad
fonte
1
Parece que ele funciona corretamente: jsfiddle.net/tDggR/2 Estou usando o Chrome versão 25
Jeremy Ninnes
jsfiddle.net/rajkumart08/TbrtD/1/embedded/result não o seu trabalho aqui porque
Poxa! Ele funciona mesmo no motor webview java8
Rux
Confira minha resposta stackoverflow.com/a/40087869/4251431
Basheer AL-MOMANI

Respostas:

416

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).

purgatório101
fonte
Ao abrir o violino, estou recebendo o Print preview failed.mensagem no Chrome v47.0.2526.106
piotr_cz
A Mozilla marcou isso como não-padrão, portanto, os resultados são inconsistentes e não devem ser usados ​​nos sites de produção developer.mozilla.org/en-US/docs/Web/CSS/…
Mike Young
Sim, isso funciona no Chrome. O CSS do Bootstrap foi substituído por mim usando mídia de impressão. Você também pode visualizar e inspecionar o modo de impressão usando a guia Renderização na parte inferior do inspetor de elementos do Chrome. Existe uma opção para Emular CSS Media, caso você queira ver a pilha de substituição.
Corgalore
Funciona para mim com importantes no fundo!
CodeMirror
75

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/

Riskbreaker
fonte
A extensão funciona para todas as páginas, mas não funciona para o meu código. Por que jsfiddle.net/rajkumart08/TbrtD/1/embedded/result defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…
1
se for esse o caso, verifique se o seu bootstrap possui webkit-print-color-Adjust: exact; em seu corpo é outra maneira de verificar ... na cópia css media é claro
Riskbreaker
Você não adicioná-lo na mídia impressa como afirmei no seu html css interno: yout html linha 1154: @media print { body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}....Você precisa adicioná-lo lá ...
Riskbreaker
Eu o editei novamente, mas ainda não estou
32

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.

insira a descrição da imagem aqui

Travis J
fonte
Ei, finalmente consegui criar um violino jsfiddle.net/qm7shrvf por algum motivo, não consigo o chrome renderizar os fundos verdes ou vermelhos na visualização de impressão (ainda não tentei imprimi-lo) Obrigado! (Eu fiz observar que o fundo negro do jsfiddle.net não se prestado com base nessa configuração cromo embora)
Eric
31

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;

Pulga
fonte
Isso é fine..May eu sei a razão pela qual a cor não é mostrado sem dar @Flea importante
Vimal Kumar
Bem, não entendo por que isso está acontecendo, mas resolveu o meu problema :-)
Shrikant
11

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="">

Vyacheslav Cotruta
fonte
10

Seu CSS deve ser assim:

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

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}
Miguel Angel Mendoza
fonte
8

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
}
BassMHL
fonte
6

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.

Pete Fecteau
fonte
3

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.

insira a descrição da imagem aqui

PADMAJA SONWANE
fonte
2

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 ...

Taugenichts
fonte
2

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

Hilnius
fonte
1
Ele funciona, graças (Note que você precisará remover vara partir windowdo seu último trecho de código)
adelriosantiago
1

Você também pode usar a box-shadowpropriedade

Shreyan Bhowmick
fonte
1

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;
  }
}
Optimaz ID
fonte
0

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.

user2430846
fonte
0

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.

Mohd. Shaizad
fonte
Por que remover todo o CSS de impressão durante a impressão?
Munim Munna
Isso é para tornar as cores visíveis para impressão
Mohd. Shaizad
-1

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" />
Isaac M
fonte
1
isso poderia ser feito com a mídia = "todos" em vez de duas tags de link
big_water