La couleur d'arrière-plan ne s'affiche pas dans l'aperçu avant impression

223

J'essaie d'imprimer une page. Dans cette page, j'ai donné une couleur de fond à un tableau. Lorsque je visualise l'aperçu avant impression en chrome, il ne prend pas la propriété de couleur d'arrière-plan ...

J'ai donc essayé cette propriété:

-webkit-print-color-adjust: exact; 

mais il ne montre toujours pas la couleur.

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
la source
1
Il semble que cela fonctionne correctement: jsfiddle.net/tDggR/2 J'utilise la version 25 de chrome
Jeremy Ninnes
jsfiddle.net/rajkumart08/TbrtD/1/embedded/result son ne fonctionne pas ici pourquoi
ça alors! Cela fonctionne même dans le moteur de visualisation Web java8
ruX
Consultez ma réponse stackoverflow.com/a/40087869/4251431
Basheer AL-MOMANI

Réponses:

416

La propriété CSS Chrome -webkit-print-color-adjust: exact;fonctionne correctement.

Cependant, il peut souvent être difficile de s'assurer que vous disposez du bon CSS pour l'impression. Plusieurs mesures peuvent être prises pour éviter les difficultés que vous rencontrez. Tout d'abord, séparez tous vos CSS d'impression de votre CSS d'écran. Cela se fait via les touches @media printet @media screen.

Souvent, la simple configuration de @media printCSS supplémentaire ne suffit pas, car vous avez toujours tous vos autres CSS inclus lors de l'impression. Dans ces cas, vous devez simplement être conscient de la spécificité CSS car les règles d'impression ne gagnent pas automatiquement contre les règles CSS non imprimables.

Dans votre cas, le -webkit-print-color-adjust: exactfonctionne. Cependant, vos background-colordéfinitions de couleurs et sont battues par d'autres CSS avec une spécificité plus élevée.

Bien que je n'approuve pas l' utilisation !importantdans presque toutes les circonstances, les définitions suivantes fonctionnent correctement et exposent le problème:

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

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

Voici le violon (et intégré pour faciliter la prévisualisation de l'impression).

purgatoire101
la source
Lorsque Print preview failed.j'ouvre le violon, je reçois le message dans Chrome v47.0.2526.106
piotr_cz
Mozilla l'a marqué comme non standard, donc les résultats sont incohérents et ne doivent pas être utilisés dans les sites de production developer.mozilla.org/en-US/docs/Web/CSS/…
Mike Young
Oui, cela fonctionne dans Chrome. Bootstrap css le remplaçait pour moi en utilisant des supports d'impression. Vous pouvez également prévisualiser et inspecter le mode d'impression à l'aide de l'onglet Rendu en bas de l'inspecteur Chrome Elements. Il existe une option pour Emuler CSS Media au cas où vous voudriez voir la pile de remplacement.
Corgalore
Fonctionne pour moi avec! Important en arrière
codemirror
75

Cette propriété CSS est tout ce dont vous avez besoin, cela fonctionne pour moi ... Lors de la prévisualisation dans Chrome, vous avez la possibilité de la voir en noir et blanc ( Couleur: Options - Couleur ou Noir et blanc ), donc si vous n'avez pas cette option, alors Je suggère de saisir cette extension Chrome et de vous faciliter la vie:

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

Le site que vous avez ajouté sur fiddle en a besoin dans votre css d'impression média (il vous suffit de l'ajouter ...

media print CSS dans le corps:

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

MISE À JOUR OK donc votre problème est bootstrap.css ... il a un support d'impression de média ainsi que vous .... vous supprimez cela et cela devrait vous donner de la couleur .... vous devez soit faire le vôtre ou rester avec bootstraps print css.

Lorsque je clique sur imprimer, je vois la couleur .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Riskbreaker
la source
l'extension fonctionne pour toutes les pages mais ne fonctionne pas pour mon code pourquoi jsfiddle.net/rajkumart08/TbrtD/1/embedded/result defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…
1
si tel est le cas, assurez-vous que votre bootstrap a webkit-print-color-adjust: exact; sur votre corps est une autre façon de vérifier ... dans les médias imprimés css bien sûr
Riskbreaker
son ne fonctionne pas defie.co/testing/twitter-bootstrap-558bc52/docs/examples/… je l'ai donné dans ce code
Vous ne l'avez pas ajouté dans la presse écrite comme je l'ai dit dans votre CSS interne: votre ligne 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;}....vous devez l'ajouter là-bas ...
Riskbreaker
Je l'ai de nouveau édité mais ne fonctionne toujours pas defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…
32

Chrome ne rendra pas la couleur d'arrière-plan ou plusieurs autres styles lors de l'impression si le paramètre de graphique d'arrière-plan est désactivé.

Cela n'a rien à voir avec css, @media ou la spécificité. Vous pouvez probablement pirater votre chemin, mais le moyen le plus simple d'obtenir du chrome pour afficher la couleur d'arrière-plan et d'autres graphiques est de cocher correctement cette case sous Plus de paramètres.

entrez la description de l'image ici

Travis J
la source
Hé, j'ai enfin réussi à faire un violon jsfiddle.net/qm7shrvf pour une raison quelconque, je ne peux pas obtenir le chrome pour rendre les arrière-plans verts ou rouges dans l'aperçu avant impression (je n'ai pas essayé de l'imprimer) Merci! (J'ai cependant observé que le fond noir de jsfiddle.net est rendu basé sur ce paramètre de chrome)
Eric
31

J'avais juste besoin d'ajouter l' !importantattribut sur la balise background-color pour qu'il apparaisse, je n'avais pas besoin de la partie webkit:

background-color: #f5f5f5 !important;

Puce
la source
C'est bien .. Puis-je connaître la raison pour laquelle la couleur n'est pas affichée sans donner un important @Flea
vimal kumar
Eh bien, je ne comprends pas pourquoi cela se produit, mais cela a résolu mon problème :-)
Shrikant
11

Si vous utilisez le bootstrap ou tout autre CSS tiers, assurez-vous de ne spécifier l'écran du support que sur celui-ci, afin de pouvoir contrôler le type de support d'impression dans vos propres fichiers CSS:

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

Vyacheslav Cotruta
la source
10

Votre CSS doit être comme ceci:

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

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

POUR CEUX QUI UTILISENT BOOTSTRAP.CSS, c'est la solution!

J'ai essayé toutes les solutions et elles ne fonctionnaient pas ... jusqu'à ce que je découvre que bootstrap.css avait un super ennuyeux @media printqui réinitialise toutes vos couleurs, couleurs d'arrière-plan, ombres, 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}

Donc, supprimez cette section de bootstrap.css (ou bootstrap.min.css)

Ou remplacez ces valeurs dans le CSS de la page que vous souhaitez imprimer par vous-même @media print

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

Utilisez ce qui suit dans votre @media printfeuille de style.

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

Voici quelques éléments à noter:

  • la couleur de fond est le repli absolu et est là pour la postérité principalement.
  • background-image utilise un pixel 1px x 1px de # 404040 transformé en PNG. Si l'utilisateur a activé les images, cela peut fonctionner, sinon ...
  • Définissez l'ombre de la boîte, si cela ne fonctionne pas ...
  • Bordure = 1/2 la hauteur et / ou la largeur désirée de la boîte, solide, couleur. Dans l'exemple ci-dessus, je voulais une boîte de 60 pixels de hauteur.
  • Remettez à zéro la hauteur / largeur en fonction de ce que vous contrôlez dans l'attribut de bordure.
  • La couleur de la police sera par défaut le noir sauf si vous utilisez! Important
  • Définissez la hauteur de ligne sur 0 pour corriger la boîte n'ayant pas de dimension physique.
  • Créez et hébergez vos propres fichiers PNG :-)
  • Si le texte du bloc doit être encapsulé, placez-le dans un div et positionnez-le en utilisant position: relative; et supprimez la hauteur de ligne.

Voir mon violon pour une démonstration plus détaillée.

Pete Fecteau
la source
3

Pour IE

Si vous utilisez IE, allez dans l'aperçu avant impression (clic droit sur le document -> aperçu avant impression), allez dans les paramètres et il y a l'option "imprimer la couleur et les images d'arrière-plan", sélectionnez cette option et essayez.

entrez la description de l'image ici

PADMAJA SONWANE
la source
2

Il y a un style dans les fichiers CSS d'amorçage sous @media print {* ,: après,: avant ....} qui a des styles de couleur et d'arrière-plan étiquetés! Important, qui suppriment toutes les couleurs d'arrière-plan sur tous les éléments. Tuez ces deux morceaux de CSS et cela fonctionnera.

Bootstrap prend la décision d'exécution que vous ne devriez jamais avoir de couleur d'arrière-plan dans les impressions, vous devez donc modifier leur CSS ou avoir un autre style! Important qui a une priorité plus élevée. Bon travail bootstrap ...

Taugenichts
la source
2

J'ai utilisé la réponse de purgatory101 mais j'ai eu du mal à conserver toutes les couleurs (icônes, arrière-plans, couleurs de texte, etc.), en particulier le fait que les feuilles de style CSS ne peuvent pas être utilisées avec des bibliothèques qui modifient dynamiquement les couleurs des éléments DOM. Voici donc un script qui modifie les styles des éléments ( background-colouret colour) avant l'impression et efface les styles une fois l'impression terminée. Il est utile d'éviter d'écrire beaucoup de CSS dans une @media printfeuille de style car cela fonctionne quelle que soit la structure de la page.

Il existe une partie du script spécialement conçue pour conserver la couleur des icônes FontAwesome (ou tout élément qui utilise un :beforesélecteur pour insérer du contenu coloré).

JSFiddle montrant le script en action

Compatibilité: fonctionne dans Chrome, je n'ai pas testé d'autres navigateurs.

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

Et puis modifiez la window.printfonction pour lui faire définir les styles avant l'impression et les réinitialiser après.

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

La partie qui trouve des chemins d'icônes pour créer CSS pour: avant les éléments est une copie de cette réponse SO

hilnius
la source
1
Cela fonctionne, merci (notez que vous devrez supprimer varde windowvotre dernier extrait de code)
adelriosantiago
1

Vous pouvez également utiliser la box-shadowpropriété.

Shreyan Bhowmick
la source
1

si vous utilisez Bootstrap . utilisez simplement ce code dans votre fichier css personnalisé. Bootstrap supprime toutes vos couleurs dans l'aperçu avant impression.

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}
ID Optimaz
la source
0

Si vous téléchargez Bootstrap sans l'option "Print media styles", vous n'aurez pas ce problème et vous n'aurez pas à supprimer manuellement le code "@media print" dans votre fichier bootstrap.css.

user2430846
la source
0

La meilleure solution pour cela si vous utilisez le bootstrap, il suffit donc de supprimer @media print {} tout le code à l'intérieur. et activer les graphiques d'arrière-plan à partir de plus de paramètres tout en prenant un aperçu avant impression.

Mohd. Shaizad
la source
Pourquoi supprimer tous les CSS d'impression lors de l'impression?
Munim Munna
C'est pour rendre la couleur visible pour l'impression
Mohd. Shaizad
-1

Je double charge mon fichier source css externe et change le media = "screen" en media = "print" et toutes les bordures de ma table ont été affichées

Essaye ça :

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

<link rel="stylesheet" media="screen" href="bootstrap.css" />
Isaac M
la source
1
cela pourrait être fait avec media = "all" au lieu de deux balises de lien
big_water