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


223

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>zznn@abc.co</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>

1
Parece que funciona correctamente: jsfiddle.net/tDggR/2 Estoy usando Chrome versión 25
Jeremy Ninnes


¡Dios mio! Funciona incluso en java8 webview engine
ruX

Respuestas:


416

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


Al abrir el violín, recibo el Print preview failed.mensaje en Chrome v47.0.2526.106
piotr_cz

Mozilla ha marcado esto como no estándar, por lo que los resultados son inconsistentes y no deben usarse en sitios de producción developer.mozilla.org/en-US/docs/Web/CSS/…
Mike Young

Sí, esto funciona en Chrome. Bootstrap css lo estaba anulando para mí usando medios impresos. También puede obtener una vista previa e inspeccionar el modo de impresión utilizando la pestaña Representación en la parte inferior del inspector de Chrome Elements. Hay una opción para Emular CSS Media en caso de que desee ver la pila de anulación.
Corgalore

Funciona para mí con! Importante en segundo plano
codemirror

75

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/


la extensión funciona para todas las páginas pero no funciona para mi código por qué jsfiddle.net/rajkumart08/TbrtD/1/embedded/result defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…

1
si ese es el caso, asegúrese de que su bootstrap tenga webkit-print-color-ajustar: exacto; en su cuerpo es otra forma de verificar ... en medios impresos css, por supuesto
Riskbreaker


No lo agregó en los medios impresos como dije en su html css interno: su línea html 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;}....necesita agregarlo allí ...
Riskbreaker

Lo he editado nuevamente pero aún no funciona defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…

32

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.

ingrese la descripción de la imagen aquí


Oye, finalmente pude hacer un violín jsfiddle.net/qm7shrvf por alguna razón, no puedo hacer que Chrome represente los fondos verde o rojo en la vista previa de impresión (aunque no he intentado imprimirlo) ¡Gracias! (Observé que el fondo negro de jsfiddle.net se renderiza en función de esa configuración de cromo)
Eric

31

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;


Eso es fine..May sé la razón por la que el color no se muestra sin dar importancia @Flea
vimal Kumar

Bueno, no entiendo por qué sucede esto, pero resolvió mi problema :-)
Shrikant

11

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


10

Tu CSS debe ser así:

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

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

8

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
}

6

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.



3

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.

ingrese la descripción de la imagen aquí


2

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


2

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


1
Funciona, gracias (nota que usted tendrá que quitar varde windowen su último fragmento de código)
adelriosantiago


1

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

0

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.


0

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.


¿Por qué eliminar todo el CSS de impresión durante la impresión?
Munim Munna

Esto es para que el color sea visible para la impresión
Mohd. Shaizad

-1

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

1
esto podría hacerse con media = "all" en lugar de dos etiquetas de enlace
big_water
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.