it-swarm.com.de

Hintergrundfarbe wird in der Druckvorschau nicht angezeigt

Ich versuche eine Seite zu drucken. Auf dieser Seite habe ich eine Tabelle mit einer Hintergrundfarbe versehen .. Wenn ich die Druckvorschau in Chrom anschaue, nimmt sie nicht die Hintergrundfarbeigenschaft an ...

Also habe ich diese Eigenschaft ausprobiert:

-webkit-print-color-adjust: exact; 

aber es zeigt immer noch nicht die Farbe.

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>
183
user2045025

Die Chrome CSS-Eigenschaft -webkit-print-color-adjust: exact; funktioniert ordnungsgemäß.

Es kann jedoch oft schwierig sein, sicherzustellen, dass Sie das richtige CSS zum Drucken haben. Es können verschiedene Maßnahmen ergriffen werden, um die auftretenden Schwierigkeiten zu vermeiden. Trennen Sie zunächst alle Ihre Druck-CSS von Ihrem Bildschirm-CSS. Dies erfolgt über den @media print und @media screen.

Oft reicht es nicht aus, nur einen zusätzlichen @media print CSS-Code einzurichten, da Sie auch beim Drucken alle anderen CSS-Codes mit einbeziehen. In diesen Fällen müssen Sie lediglich die CSS-Spezifität kennen, da die Druckregeln nicht automatisch gegen Nicht-Druck-CSS-Regeln gewinnen.

In Ihrem Fall funktioniert der -webkit-print-color-adjust: exact. Ihre background-color - und Farbdefinitionen werden jedoch von anderen CSS mit höherer Spezifität übertroffen.

Während ich die Verwendung von !important in fast jedem Fall nicht befürworte, funktionieren die folgenden Definitionen ordnungsgemäß und decken das Problem auf:

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

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

Hier ist die Geige (und eingebettet für eine einfache Druckvorschau).

384
purgatory101

Diese CSS-Eigenschaft ist alles, was Sie brauchen. Es funktioniert für mich. Bei der Vorschau in Chrome haben Sie die Möglichkeit, BW und Farbe (Farbe: Optionen - Farbe oder Schwarzweiß) anzuzeigen. Wenn Sie diese Option haben, empfehle ich Ihnen, diese Chrome-Erweiterung zu verwenden, um Ihnen das Leben zu erleichtern:

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

Die Site, die Sie bei Fiddle hinzugefügt haben, benötigt dies in Ihrem Medien-Druck-CSS (Sie müssen es nur hinzufügen ... 

medien drucken CSS im Körper:

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

UPDATE OK, Ihr Problem ist also bootstrap.css ... es hat ein Medien-Druck-CSS, so wie Sie es tun .... Sie entfernen das und das sollte Ihnen Farbe geben .... Sie Müssen Sie entweder selbst machen oder mit bootstraps css drucken.

Wenn ich auf "Drucken" klicke, sehe ich Farbe .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

61
Riskbreaker

Ich musste nur das !important-Attribut in das Hintergrundfarben-Tag einfügen, damit es angezeigt wird. Ich brauchte den Webkit-Teil nicht: 

background-color: #f5f5f5 !important;

25
Flea

Chrome rendert beim Drucken keine Hintergrundfarbe oder mehrere andere Stile, wenn die Hintergrundgrafikeinstellung deaktiviert ist.

Dies hat nichts mit css, @media oder der Spezifität zu tun. Sie können sich wahrscheinlich damit herumhacken, aber der einfachste Weg, um Chrome die Hintergrundfarbe und andere Grafiken anzuzeigen, besteht darin, dieses Kontrollkästchen unter Weitere Einstellungen zu aktivieren.

 enter image description here

24
Travis J

Wenn Sie bootstrap oder ein anderes CSS von Drittanbietern verwenden, stellen Sie sicher, dass Sie nur den Medienbildschirm darauf angeben, sodass Sie den Druckmedientyp in Ihren eigenen CSS-Dateien steuern können:

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

9

Für diejenigen, die BOOTSTRAP.CSS verwenden, ist dies die Lösung!

Ich habe alle Lösungen ausprobiert und sie funktionierten nicht ... bis ich entdeckte, dass bootstrap.css einen ärgerlichen @media print hatte, der alle Farben, Hintergrundfarben, Schatten usw. zurücksetzt.

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

Entfernen Sie diesen Abschnitt entweder aus bootstrap.css (oder bootstrap.min.css).

Oder überschreiben Sie diese Werte in der css der Seite, die Sie in Ihrem eigenen @media print drucken möchten.

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

Verwenden Sie Folgendes in Ihrem @media print-Stylesheet.

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

Hier sind ein paar Dinge zu beachten:

  • hintergrundfarbe ist der absolute Rückfall und ist meistens für die Nachwelt da.
  • das Hintergrundbild verwendet ein 1px x 1px Pixel von # 404040, das in eine PNG-Datei umgewandelt wird. Wenn der Benutzer Bilder aktiviert hat, kann es funktionieren, wenn nicht ...
  • Setze den Box-Schatten, falls das nicht klappt ...
  • Rahmen = 1/2 der gewünschten Höhe und/oder Breite der Box, einfarbig, Farbe. Im obigen Beispiel wollte ich eine 60px Höhe Box.
  • Setzen Sie die Höhe/Breite auf Null, je nachdem, was Sie im Rahmenattribut steuern.
  • Die Schriftfarbe ist standardmäßig schwarz, sofern Sie nicht!
  • Legen Sie die Zeilenhöhe auf 0 fest, um die Box ohne physische Abmessung zu fixieren. 
  • Erstellen und hosten Sie Ihre eigenen PNGs :-)
  • Wenn der Text im Block umbrochen werden muss, setzen Sie ihn in ein div und positionieren Sie das div mit position: relative; und entfernen Sie die Zeilenhöhe.

Siehe meine Geige für eine detailliertere Demonstration.

6
Pete Fecteau

Dein CSS muss so sein:

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

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

Sind Sie sicher, dass dies ein CSS-Problem ist? Zu Google gibt es einige Beiträge zu diesem Problem: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Es kann sich auf den Druckvorgang beziehen. Auf Safari, dem Webkit, gibt es ein Kontrollkästchen, um Hintergrundbilder und Farben im Druckerdialogfeld zu drucken.

5
Bertrand

Ich habe die Antwort von purgatory101 verwendet hatte aber Schwierigkeiten, alle Farben (Symbole, Hintergründe, Textfarben usw.) zu erhalten, insbesondere, dass CSS-Stylesheets nicht mit Bibliotheken verwendet werden können, die die Farben des DOM-Elements dynamisch ändern. Daher gibt es hier ein Skript, das die Stile des Elements (background-colour und colour) vor dem Drucken ändert und die Stile löscht, sobald der Druckvorgang abgeschlossen ist. Das Schreiben von CSS in ein @media print-Stylesheet ist sinnvoll, da es unabhängig von der Seitenstruktur funktioniert.

Es gibt einen Teil des Skripts, der speziell dafür entwickelt wurde, die Farbe der FontAwesome-Symbole beizubehalten (oder jedes Element, das einen :before-Selektor zum Einfügen von farbigem Inhalt verwendet).

JSFiddle zeigt das Skript in Aktion

Kompatibilität: funktioniert in Chrome, ich habe andere Browser nicht getestet.

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

Ändern Sie dann die window.print-Funktion, um die Stile vor dem Drucken festzulegen und sie danach zurückzusetzen.

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

Der Teil, in dem Symbolpfade gefunden werden, um CSS zu erstellen: vor Elementen ist eine Kopie von diese SO - Antwort

2
hilnius

Sie können auch die box-shadow-Eigenschaft verwenden.

1

In den bootstrap-css-Dateien unter @media print {* ,: after,: before ...} gibt es einen Stil, der die Farb- und Hintergrundstile! Töte diese zwei Stücke von css und es wird funktionieren.

Bootstrap trifft die Ausführungsentscheidung, dass Sie niemals eine Hintergrundfarbe für Ausdrucke haben sollten. Sie müssen also die CSS bearbeiten oder einen anderen! Wichtigen Stil mit höherer Priorität verwenden. Gut gemacht, Bootstrap ...

1
Taugenichts

Für IE

Wenn Sie IE verwenden, gehen Sie zur Druckvorschau (klicken Sie mit der rechten Maustaste auf das Dokument -> Druckvorschau), gehen Sie zu den Einstellungen und es gibt die Option "Hintergrundfarbe und Bilder drucken", wählen Sie diese Option und versuchen Sie es.

 enter image description here 

0
PADMAJA SONWANE

Die beste Lösung für dieses Problem ist, wenn Sie bootstrap verwenden. Entfernen Sie also @media print {} all den Code. und aktivieren Sie Hintergrundgrafiken mit weiteren Einstellungen, während Sie eine Druckvorschau erstellen.

0
Mohd. Shaizad

Wenn Sie Bootstrap ohne die Option "Druckmedienstile" herunterladen, tritt dieses Problem nicht auf und Sie müssen den Code "@media print" in Ihrer Datei bootstrap.css nicht manuell entfernen.

0
user2430846

wenn Sie Bootstrap verwenden, verwenden Sie diesen Code einfach in Ihrer benutzerdefinierten CSS-Datei. Bootstrap entfernt alle Ihre Farben in der Druckvorschau.

@media print{
  .box-text {

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