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

J’essaie d’imprimer une page. Dans cette page, j’ai donné une couleur de fond à une table. 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 toujours sa ne montre pas la couleur.

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

La propriété Chrome CSS -webkit-print-color-adjust: exact; travaille de manière appropriée.

Cependant, s’assurer que vous avez le bon CSS pour l’impression est souvent compliqué. Plusieurs choses peuvent être faites pour éviter les difficultés que vous rencontrez. Tout d’abord, séparez toutes vos feuilles CSS d’impression de votre écran CSS. Cela se fait via l’ @media print et @media screen .

Souvent, il suffit de configurer des @media print CSS d’ @media print supplémentaires, car tous vos autres @media print CSS sont également inclus lors de l’impression. Dans ce cas, il vous suffit de connaître la spécificité CSS car les règles d’impression ne sont pas automatiquement gagnantes par rapport aux règles CSS non imprimées.

Dans votre cas, -webkit-print-color-adjust: exact fonctionne. Cependant, vos définitions de couleur d’ background-color et de couleur sont éliminées par d’autres CSS plus spécifiques.

Bien que je n’approuve pas l’ utilisation de !important dans 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).

Cette propriété CSS est tout ce dont vous avez besoin pour que cela fonctionne pour moi … Lors de la prévisualisation dans Chrome, vous avez la possibilité de le voir BW et Color ( 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 simplifier la vie:

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

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

médias imprimés CSS dans le corps:

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

UPDATE OK, donc votre problème est bootstrap.css … il a un css d’impression de médias aussi bien que vous …. vous le supprimez et cela devrait vous donner la couleur …. vous devez soit faire votre propre ou restr avec bootstraps print css.

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

Je voulais juste append l’atsortingbut !important à la balise background-color pour qu’il apparaisse, n’a pas besoin de la partie webkit:

background-color: #f5f5f5 !important;

Chrome ne restitue pas les couleurs d’arrière-plan ou plusieurs autres styles lors de l’impression si les parameters graphiques d’arrière-plan sont désactivés.

Cela n’a rien à voir avec css, @media ou la spécificité. Vous pouvez probablement le contourner, mais le moyen le plus simple pour que chrome affiche la couleur d’arrière-plan et les autres graphiques consiste à cocher correctement cette case sous Plus de parameters.

entrer la description de l'image ici

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

  

Utilisez les éléments suivants dans votre feuille de style d’impression @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; } 

Voici quelques points à noter:

  • background-color est le repli absolu et est la plupart du temps disponible pour la postérité.
  • background-image utilise un pixel 1px x 1px de # 404040 transformé en PNG. Si l’utilisateur dispose d’images activées, cela peut fonctionner, sinon …
  • Définissez l’ombre de la boîte si cela ne fonctionne pas …
  • Bordure = 1/2 de la hauteur et / ou largeur désirée de la boîte, solide, couleur. Dans l’exemple ci-dessus, je voulais une boîte de hauteur de 60px.
  • Zéro sur la hauteur / largeur en fonction de ce que vous contrôlez dans l’atsortingbut border.
  • La couleur de la police par défaut sera 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 PNG 🙂
  • Si le texte dans le bloc doit être emballé, placez-le dans un div et positionnez le div en utilisant la position: relative; et supprimer la hauteur de ligne.

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

Êtes-vous sûr qu’il s’agit d’un problème CSS? Il y a quelques articles sur Google à ce sujet: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Cela peut être lié au processus d’impression. Sur Safari, qui est également Webkit, il existe une case à cocher pour imprimer des images et des couleurs d’arrière-plan dans la boîte de dialog de l’imprimante.

Votre CSS doit être comme ceci:

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

J’ai utilisé la réponse de purgatory101 mais j’ai eu du mal à garder toutes les couleurs (icons, arrière-plans, couleurs de texte, etc.), surtout que les feuilles de style CSS ne peuvent pas être utilisées avec des bibliothèques qui modifient dynamicment les couleurs des éléments DOM. Par conséquent, voici un script qui modifie les styles de l’élément ( background-colour et 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 feuille de style d’ @media print car elle fonctionne quelle que soit la structure de la page.

Une partie du script est spécialement conçue pour conserver la couleur des icons FontAwesome (ou tout élément utilisant un sélecteur :before 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 += '.' + $.sortingm(classNames).replace(/\s/gi, '.'); } css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }'; }); $('head').append(''); } function resetIconColors() { $('#print-icons-style').remove(); } 

Ensuite, modifiez la fonction window.print pour la définir avant impression et réinitialisation.

 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’icons pour créer des CSS pour: avant les éléments est une copie de cette réponse SO

Il y a un style dans les fichiers css bootstrap sous @media print {*,: after,: before ….} dont les styles de couleur et d’arrière-plan sont étiquetés! Important, ce qui supprime les couleurs d’arrière-plan sur tous les éléments. Tuez ces deux morceaux de css et ça va marcher.

Bootstrap prend la décision d’exécuter, car 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 la plus haute priorité. Bon travail bootstrap …

Vous pouvez également utiliser la propriété box-shadow .

POUR CEUX QUI UTILISENT BOOTSTRAP.CSS, c’est le correctif!

J’ai essayé toutes les solutions et elles ne fonctionnaient pas … jusqu’à ce que je découvre que bootstrap.css avait une @media print super agaçante qui réinitialise toutes vos couleurs, couleurs de fond, 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, soit supprimer cette section de bootstrap.css (ou bootstrap.min.css)

Ou remplacez ces valeurs dans le CSS de la page que vous souhaitez imprimer dans votre propre @media print

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

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

Je double charger 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 :