Cor de plano de fundo não está sendo exibida na visualização de impressão

Eu estou tentando imprimir uma página. Naquela página eu dei uma cor de fundo a uma tabela. Quando visualizo a pré-visualização de impressão no chrome, ela não está assumindo a propriedade de cor de fundo …

Então eu tentei essa 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; } 
Date PO Number Term Tax Quote Number Status Account Mgr Shipping Method Shipping Account QA Reference End-User Name End-User's PO Tracking Number
22 20130000 Jim B. 22 510 xxx yyyy zznn@abc.co PDF 12/23/2012 Approved PDF 12/23/2012 Approved

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

    No entanto, certificar-se de 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 seu CSS de impressão do CSS da canvas. Isso é feito através da @media screen @media print e @media screen .

    Muitas vezes, apenas configurar um CSS extra de @media print não é suficiente, porque você ainda tem todos os outros CSS incluídos ao imprimir também. Nesses casos, você só precisa estar ciente da especificidade do CSS, pois as regras de impressão não ganham automaticamente contra as regras CSS não impressas.

    No seu caso, o -webkit-print-color-adjust: exact está funcionando. No entanto, suas definições de colors e colors de fundo estão sendo eliminadas por outros CSS com maior especificidade.

    Embora eu não recomende o uso de !important em praticamente qualquer circunstância, as definições a seguir 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 pré-visualização da impressão).

    Essa propriedade CSS é tudo que você precisa para mim … Ao visualizar no Chrome, você tem a opção de ver BW e Color ( Color: Options- Color ou Black and white ), então se você não tem essa opção, então Sugiro pegar essa extensão do Chrome e facilitar sua vida:

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

    O site que você adicionou no violino precisa disso em sua mídia print css (você só precisa adicioná-lo …

    mídia imprime CSS no corpo:

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

    ATUALIZE OK para que o seu problema seja o bootstrap.css … ele tem um css de impressão de mídia, assim como você … você remove isso e isso deve dar a você cor …. você precisa fazer o seu próprio ou ficar com bootstraps print css.

    Quando eu clico em imprimir isso vejo colors …. http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

    Eu só precisava adicionar o atributo !important na tag background-color para que ele apareça, não precise da parte do webkit:

    background-color: #f5f5f5 !important;

    O Chrome não renderizará colors de fundo ou vários outros estilos ao imprimir se a configuração de charts de segundo plano estiver desativada.

    Isso não tem nada a ver com css, @media ou especificidade. Provavelmente, é possível hackear seu caminho, mas a maneira mais fácil de obter o chrome para mostrar a cor de fundo e outros charts é marcá-la corretamente em Mais configurações.

    insira a descrição da imagem aqui

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

      

    Use o seguinte na sua folha de estilo de impressão @media.

     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 para observar:

    • background-color é o substituto absoluto e está presente principalmente na posteridade.
    • background-image usa um pixel de 1px x 1px de # 404040 feito em um PNG. Se o usuário tiver imagens ativadas, pode funcionar, se não …
    • Defina a checkbox-sombra, se isso não funcionar …
    • Borda = 1/2 sua altura desejada e / ou largura da checkbox, sólido, cor. No exemplo acima, eu queria uma checkbox de 60px de altura.
    • Zerar a largura / largura dependendo do que você está controlando no atributo de borda.
    • A cor da fonte será padronizada para preto, a menos que você use! Importante
    • Configure a altura da linha como 0 para corrigir a checkbox sem dimensão física.
    • Faça e hospede seus próprios PNGs 🙂
    • Se o texto no bloco precisar ser quebrado, coloque-o em um div e posicione o div usando position: relative; e remova a altura da linha.

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

    Tem certeza de que este é um problema de CSS? Há 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 é o webkit também, há uma checkbox de seleção para imprimir imagens e colors de fundo na checkbox de diálogo da impressora.

    Seu CSS deve ser assim:

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

    Eu usei a resposta do purgatory101, mas tive problemas para manter todas as colors (icons, planos de fundo, colors de texto, etc …), especialmente que as folhas de estilo CSS não podem ser usadas com bibliotecas que mudam dinamicamente as colors do elemento DOM. Portanto, aqui está um script que altera os estilos do elemento ( background-colour e colour ) antes de imprimir e limpa os estilos depois que a impressão é feita. É útil evitar escrever um monte de CSS em uma folha de estilos de @media print @media como funciona qualquer que seja a estrutura da página.

    Há uma parte do script que é feita especialmente para manter a cor dos icons do FontAwesome (ou qualquer elemento que use um :before seletor 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(''); } function resetIconColors() { $('#print-icons-style').remove(); } 

    Em seguida, modifique a function window.print 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 localiza os caminhos dos icons para criar CSS para: antes de os elementos serem uma cópia dessa resposta SO

    Há um estilo nos arquivos css de bootstrap sob @media print {* ,: after,: before ….} que tem estilos de colors e de fundo identificados como! Important, que removem as colors de fundo de qualquer elemento. Mate esses dois pedaços de CSS e vai funcionar.

    Bootstrap está tomando a decisão de executar que você nunca deve ter qualquer cor de fundo nas impressões, então você tem que editar o seu css ou ter outro estilo importante que é de maior precedência. Bom trabalho bootstrap …

    Você também pode usar a propriedade box-shadow .

    Para aqueles que usam o BOOTSTRAP.CSS, esta é a solução!

    Eu tentei todas as soluções e eles não estavam funcionando … até que eu descobri que o bootstrap.css tinha uma @media print super irritante que redefinia todas as suas colors, colors 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} 

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

    Ou anule esses valores no css da página que você deseja imprimir em sua própria @media print

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

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

    Eu dobro o carregamento do meu arquivo de origem css externo e mudo o media = “screen” para media = “print” e todas as bordas da minha tabela foram mostradas

    Tente isto: