Kolor tła nie jest wyświetlany w podglądzie wydruku

223

Próbuję wydrukować stronę. Na tej stronie nadałem tabeli kolor tła. Gdy przeglądam podgląd wydruku w chromie, nie przyjmuje właściwości koloru tła ...

Więc wypróbowałem tę właściwość:

-webkit-print-color-adjust: exact; 

ale nadal nie pokazuje koloru.

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
źródło
1
Wygląda na to, że działa poprawnie: jsfiddle.net/tDggR/2 Używam wersji chromowanej 25
Jeremy Ninnes
Boże! Działa nawet w silniku
webview java8
Sprawdź moją odpowiedź stackoverflow.com/a/40087869/4251431
Basheer AL-MOMANI

Odpowiedzi:

416

Właściwość Chrome CSS -webkit-print-color-adjust: exact;działa poprawnie.

Jednak upewnienie się, że masz poprawny CSS do drukowania, może być często trudne. Można zrobić kilka rzeczy, aby uniknąć trudności. Najpierw oddziel wszystkie CSS wydruku od CSS ekranu. Odbywa się to za pomocą @media printi @media screen.

Często samo skonfigurowanie dodatkowego @media printCSS nie wystarcza, ponieważ podczas drukowania nadal masz wszystkie inne CSS. W takich przypadkach musisz tylko znać specyfikę CSS, ponieważ reguły drukowania nie wygrywają automatycznie z regułami CSS niezwiązanymi z drukowaniem.

W twoim przypadku -webkit-print-color-adjust: exactdziała. Jednak twoje background-colordefinicje i kolory są pobijane przez inne CSS o większej specyficzności.

Chociaż nie popieram używania !importantw prawie żadnych okolicznościach, następujące definicje działają poprawnie i ujawniają problem:

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

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

Oto skrzypce (i osadzone dla ułatwienia podglądu wydruku).

purgatory101
źródło
Kiedy otwieram skrzypce, dostaję Print preview failed.wiadomość w Chrome v47.0.2526.106
piotr_cz
Mozilla oznaczyła to jako niestandardowe, więc wyniki są niespójne i nie powinny być stosowane w witrynach produkcyjnych developer.mozilla.org/en-US/docs/Web/CSS/…
Mike Young
Tak, działa w Chrome. Bootstrap css zastąpił go dla mnie za pomocą mediów drukowanych. Możesz także wyświetlić podgląd i sprawdzić tryb drukowania za pomocą karty Rendering u dołu Inspektora elementów Chrome. Istnieje opcja Emuluj CSS Media na wypadek, gdybyś chciał zobaczyć stos zastępowania.
Corgalore
Działa dla mnie z! Ważne w tle
codemirror
75

Ta właściwość CSS jest wszystkim, czego potrzebujesz, działa dla mnie ... Podczas podglądu w Chrome możesz zobaczyć BW i kolor ( Kolor: Opcje - Kolor lub Czarno-biały ), więc jeśli nie masz tej opcji, to Sugeruję, aby pobrać to rozszerzenie Chrome i ułatwić Ci życie:

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

Witryna, którą dodałeś do skrzypiec, potrzebuje tego w css media print (musisz to tylko dodać ...

media drukuj CSS w treści:

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

AKTUALIZACJA OK, więc twój problem to bootstrap.css ... ma css z mediami, tak jak ty ... usuwasz to i powinno to dać ci kolor ... musisz zrobić to sam lub trzymać się bootstraps print css.

Po kliknięciu opcji Drukuj na tym widzę kolor .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Łamacz ryzyka
źródło
rozszerzenie działa na wszystkich stronach, ale nie działa na moim kodzie, dlaczego jsfiddle.net/rajkumart08/TbrtD/1/embedded/result defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…
1
w takim przypadku upewnij się, że twój bootstrap ma webkit-print-color-adjust: exact; na ciele jest inny sposób sprawdzenia ... w mediach drukowanych css oczywiście
Riskbreaker
Nie dodałeś go w mediach drukowanych, jak powiedziałem w swoim wewnętrznym html css: yout html line 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;}....musisz go tam dodać ...
Riskbreaker
Zredagowałem go jeszcze raz, ale nadal nie działa defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…
32

Chrome nie będzie renderować koloru tła ani kilku innych stylów podczas drukowania, jeśli ustawienie grafiki w tle jest wyłączone.

Nie ma to nic wspólnego z css, @media ani specyfiką. Prawdopodobnie możesz się zhakować, ale najłatwiejszym sposobem, aby chrom pokazał kolor tła i inną grafikę, jest odpowiednie zaznaczenie tego pola wyboru w sekcji Więcej ustawień.

wprowadź opis zdjęcia tutaj

Travis J
źródło
Hej, w końcu udało mi się zrobić skrzypce jsfiddle.net/qm7shrvf z jakiegoś powodu, nie mogę uzyskać chromu do renderowania zielonego lub czerwonego tła w podglądzie wydruku (chociaż nie próbowałem go wydrukować) Dzięki! (Zauważyłem jednak, że czarne tło strony jsfiddle.net jest renderowane na podstawie tego ustawienia chrome)
Eric
31

Musiałem tylko dodać !importantatrybut do znacznika koloru tła, aby się pojawił, nie potrzebowałem części webkit:

background-color: #f5f5f5 !important;

Pchła
źródło
W porządku .. Czy mogę poznać powód, dla którego kolor nie jest wyświetlany bez podania ważnego @Flea
vimal kumar
Cóż, nie rozumiem, dlaczego tak się dzieje, ale to rozwiązało mój problem :-)
Shrikant
11

Jeśli używasz bootstrap lub innego CSS innej firmy, upewnij się, że określasz tylko ekran multimediów, aby mieć kontrolę nad typem nośnika wydruku we własnych plikach CSS:

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

Wiaczesław Cotruta
źródło
10

Twój CSS musi wyglądać tak:

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

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}
Miguel Angel Mendoza
źródło
8

DLA TYCH ZA POMOCĄ BOOTSTRAP.CSS, to jest poprawka!

Wypróbowałem wszystkie rozwiązania i one nie działały ... dopóki nie odkryłem, że bootstrap.css ma bardzo irytujące, @media printktóre resetuje wszystkie kolory, kolory tła, cienie itp.

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

Więc albo usuń tę sekcję z bootstrap.css (lub bootstrap.min.css)

Lub zastąp te wartości w css strony, którą chcesz wydrukować na swoim @media print

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

Wykorzystaj następujące elementy w swoim @media printarkuszu stylów.

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

Oto kilka rzeczy, na które należy zwrócić uwagę:

  • kolor tła jest absolutną rezerwą i występuje głównie dla potomności.
  • Obraz w tle używa piksela 1 x 1 x 1 x 404040, który został przekształcony w PNG. Jeśli użytkownik ma włączone obrazy, może działać, jeśli nie ...
  • Ustaw cień pola, jeśli to nie zadziała ...
  • Obramowanie = 1/2 żądanej wysokości i / lub szerokości pudełka, pełne, kolorowe. W powyższym przykładzie chciałem mieć pudełko o wysokości 60 pikseli.
  • Zeruj wysokość / szerokość w zależności od tego, co kontrolujesz w atrybucie granicy.
  • Kolor czcionki będzie domyślnie ustawiony na czarny, chyba że użyjesz! Ważne
  • Ustaw wysokość linii na 0, aby naprawić pole, które nie ma wymiaru fizycznego.
  • Twórz i przechowuj własne PNG :-)
  • Jeśli tekst w bloku musi się zawijać, umieść go w div i ustaw div za pomocą position: relative; i usuń wysokość linii.

Zobacz moje skrzypce, aby uzyskać bardziej szczegółową demonstrację.

Pete Fecteau
źródło
3

Dla IE

Jeśli korzystasz z IE, przejdź do podglądu wydruku (kliknij prawym przyciskiem myszy dokument -> podgląd wydruku), przejdź do ustawień i jest dostępna opcja „wydrukuj kolor tła i obrazy”, wybierz tę opcję i spróbuj.

wprowadź opis zdjęcia tutaj

PADMAJA SONWANE
źródło
2

W plikach css bootstrap znajduje się styl pod @media print {* ,: after,: before ....}, który ma style kolorów i tła oznaczone! Ważne, które usuwają kolory tła z dowolnych elementów. Zabij te dwa kawałki css, a to zadziała.

Bootstrap podejmuje decyzję, że nigdy nie powinieneś mieć żadnego koloru tła na wydrukach, więc musisz edytować ich css lub mieć inny! Ważny styl, który ma wyższy priorytet. Dobra robota bootstrap ...

Taugenichts
źródło
2

Użyłem odpowiedzi purgatory101, ale miałem problem z zachowaniem wszystkich kolorów (ikon, tła, kolorów tekstu itp.), Szczególnie, że arkuszy stylów CSS nie można używać z bibliotekami, które dynamicznie zmieniają kolory elementu DOM. Dlatego oto skrypt, który zmienia style elementu ( background-colouri colour) przed drukowaniem i czyści style po zakończeniu drukowania. Przydatne jest unikanie pisania dużej ilości CSS w @media printarkuszu stylów, ponieważ działa on niezależnie od struktury strony.

Istnieje część skryptu, która została stworzona specjalnie w celu utrzymania koloru ikon FontAwesome (lub dowolnego elementu, który używa :beforeselektora do wstawiania kolorowej zawartości).

JSFiddle pokazujący skrypt w akcji

Kompatybilność: działa w Chrome, nie testowałem innych przeglądarek.

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

A następnie zmodyfikuj window.printfunkcję, aby ustawić style przed wydrukowaniem i zresetować po.

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

Część, która znajduje ścieżki ikon do utworzenia CSS: przed elementami jest kopią tej odpowiedzi SO

wilno
źródło
1
Działa, dziękuję (pamiętaj, że będziesz musiał usunąć varz windowostatniego fragmentu kodu)
adelriosantiago
1

Możesz także skorzystać z box-shadowwłaściwości.

Shreyan Bhowmick
źródło
1

jeśli używasz Bootstrap. po prostu użyj tego kodu w swoim niestandardowym pliku css. Bootstrap usuwa wszystkie kolory w podglądzie wydruku.

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}
ID Optimaz
źródło
0

Jeśli pobierzesz Bootstrap bez opcji „Style nośnika wydruku”, nie będziesz mieć tego problemu i nie będziesz musiał ręcznie usuwać kodu „@media print” w pliku bootstrap.css.

użytkownik2430846
źródło
0

Najlepsze rozwiązanie, jeśli używasz bootstrap, więc po prostu usuń @media print {} cały kod z tego kodu. i włącz więcej opcji grafiki w tle podczas wykonywania podglądu wydruku.

Mohd. Shaizad
źródło
Po co usuwać cały druk CSS podczas drukowania?
Munim Munna
Dzięki temu kolor będzie widoczny na wydruku
Mohd. Shaizad
-1

Podwójnie ładuję zewnętrzny plik źródłowy css i zmieniam media = "screen" na media = "print", a wszystkie obramowania mojej tabeli zostały pokazane

Spróbuj tego :

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

<link rel="stylesheet" media="screen" href="bootstrap.css" />
Izaak M.
źródło
1
można to zrobić za pomocą media = "all" zamiast dwóch tagów linków
big_water