El color de fondo no se muestra en la vista previa de impresión

Estoy intentando imprimir una página. En esa página le he dado a una tabla un color de fondo. Cuando veo la vista previa de impresión en cromo, no toma la propiedad de color de fondo ...

Así que probé esta propiedad:

-webkit-print-color-adjust: exact; 

pero todavía no muestra el color.

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>

La propiedad CSS de Chrome -webkit-print-color-adjust: exact;funciona correctamente.

Sin embargo, asegurarse de tener el CSS correcto para imprimir a menudo puede ser complicado. Se pueden hacer varias cosas para evitar las dificultades que está teniendo. Primero, separe todo su CSS de impresión de su CSS de pantalla. Esto se hace a través de @media printy @media screen.

Muchas veces, simplemente configurar un poco de @media printCSS adicional no es suficiente porque todavía tiene todos los demás CSS incluidos al imprimir también. En estos casos, solo debe tener en cuenta la especificidad de CSS, ya que las reglas de impresión no ganan automáticamente contra las reglas de CSS sin impresión.

En su caso, el -webkit-print-color-adjust: exactestá funcionando. Sin embargo, sus background-colordefiniciones de color están siendo superadas por otros CSS con mayor especificidad.

Si bien no apruebo el uso !importanten casi ninguna circunstancia, las siguientes definiciones funcionan correctamente y exponen el problema:

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

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

Aquí está el violín (e incrustado para facilitar la vista previa de la impresión).

Esa propiedad CSS es todo lo que necesita, funciona para mí ... Al obtener una vista previa en Chrome, tiene la opción de verlo BW y Color ( Color: Opciones- Color o Blanco y negro ), así que si no tiene esa opción, entonces Le sugiero que tome esta extensión de Chrome y le facilite la vida:

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

El sitio que agregaste en fiddle necesita esto en tu css de impresión de medios (solo tienes que agregarlo ...

CSS de impresión de medios en el cuerpo:

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

ACTUALIZAR OK, por lo que su problema es bootstrap.css ... tiene un css de impresión de medios tan bien como usted ... elimina eso y eso debería darle color ... necesita hacer lo suyo o quedarse con bootstraps imprimir css.

Cuando hago clic en imprimir en este, veo color ... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Chrome no renderizará el color de fondo, o varios otros estilos, al imprimir si la configuración de gráficos de fondo está desactivada.

Esto no tiene nada que ver con css, @media o especificidad. Probablemente puedas hackearlo, pero la forma más fácil de hacer que Chrome muestre el color de fondo y otros gráficos es marcar correctamente esta casilla de verificación en Más configuraciones.

Solo necesitaba agregar el !importantatributo en la etiqueta de color de fondo para que se muestre, no necesitaba la parte del kit web:

background-color: #f5f5f5 !important;

Si está utilizando bootstrap o cualquier otro CSS de terceros, asegúrese de especificar la pantalla de medios solo en él, para que tenga el control del tipo de medio de impresión en sus propios archivos CSS:

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

Tu CSS debe ser así:

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

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

PARA LOS QUE UTILIZAN BOOTSTRAP.CSS, ¡esta es la solución!

He intentado todas las soluciones y no funcionaban ... hasta que descubrí que bootstrap.css tenía un súper molesto @media printque restablece todos tus colores, colores de fondo, 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}

Entonces, elimine esta sección de bootstrap.css (o bootstrap.min.css)

O anule estos valores en el CSS de la página que desea imprimir en su propio @media print

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

Use lo siguiente en su @media printhoja de estilo.

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

Aquí hay un par de cosas a tener en cuenta:

• El color de fondo es la alternativa absoluta y está allí principalmente para la posteridad.
• background-image utiliza un píxel de 1px x 1px de # 404040 hecho en PNG. Si el usuario tiene imágenes habilitadas, puede funcionar, si no ...
• Establezca el cuadro de sombra, si eso no funciona ...
• Borde = 1/2 de la altura y / o ancho de la caja deseada, color sólido. En el ejemplo anterior, quería un cuadro de 60px de altura.
• Ponga a cero el alto / ancho dependiendo de lo que esté controlando en el atributo de borde.
• ¡El color de la fuente estará predeterminado en negro a menos que lo use!
• Establezca la altura de línea en 0 para corregir el cuadro que no tiene dimensión física.
• Crea y aloja tus propios PNG :-)
• Si el texto en el bloque necesita ajustarse, colóquelo en un div y coloque el div usando position: relative; y eliminar la altura de la línea.

Vea mi violín para una demostración más detallada.

¿Estás seguro de que este es un problema de CSS? Hay algunas publicaciones en Google sobre este problema: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Puede estar relacionado con el proceso de impresión. En safari, que también es webkit, hay una casilla de verificación para imprimir imágenes y colores de fondo en el cuadro de diálogo de la impresora.

Para IE

Si está utilizando IE, vaya a la vista previa de impresión (haga clic con el botón derecho en el documento -> vista previa de impresión), vaya a la configuración y hay la opción "imprimir color e imágenes de fondo", seleccione esa opción e intente.

Hay un estilo en los archivos css de bootstrap en @media print {* ,: after,: before ....} que tiene los colores y estilos de fondo etiquetados! Important, que eliminan los colores de fondo de cualquier elemento. Mata esas dos piezas de CSS y funcionará.

Bootstrap está tomando la decisión de ejecutar que nunca debe tener ningún color de fondo en las impresiones, por lo que debe editar su CSS o tener otro estilo importante que tenga mayor prioridad. Buen trabajo bootstrap ...

Utilicé la respuesta de purgatory101 pero tuve problemas para mantener todos los colores (iconos, fondos, colores de texto, etc.), especialmente porque las hojas de estilo CSS no se pueden usar con bibliotecas que cambian dinámicamente los colores del elemento DOM. Por lo tanto, aquí hay un script que cambia los estilos de los elementos ( background-coloury colour) antes de imprimir y borra los estilos una vez que se realiza la impresión. Es útil evitar escribir mucho CSS en una @media printhoja de estilo, ya que funciona sea cual sea la estructura de la página.

Hay una parte del script especialmente diseñada para mantener el color de los iconos de FontAwesome (o cualquier elemento que use un :beforeselector para insertar contenido de color).

JSFiddle mostrando el script en acción

Compatibilidad: funciona en Chrome, no probé otros 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();
}

Y luego modifique la window.printfunción para configurar los estilos antes de imprimirlos y reiniciarlos después.

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

La parte que encuentra rutas de iconos para crear CSS para: antes de los elementos es una copia de esta respuesta SO

También puedes usar la box-shadowpropiedad.

si está utilizando Bootstrap. solo use este código en su archivo css personalizado. Bootstrap elimina todos sus colores en la vista previa de impresión.

@media print{
  .box-text {

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

Si descarga Bootstrap sin la opción "Imprimir estilos de medios", no tendrá este problema y no tendrá que eliminar el código "@media print" manualmente en su archivo bootstrap.css.

La mejor solución para esto si está usando bootstrap, así que solo haga una cosa, elimine @media print {} todo el código dentro de esto. y habilite gráficos de fondo desde más configuraciones mientras toma la vista previa de impresión.

Cargué dos veces mi archivo fuente css externo y cambio media = "screen" a media = "print" y se mostraron todos los bordes de mi tabla

Prueba esto :

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

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