पृष्ठभूमि का रंग प्रिंट पूर्वावलोकन में नहीं दिख रहा है

Question

मैं एक पृष्ठ मुद्रित करने का प्रयास कर रहा हूं। उस पेज में मैंने एक टेबल को बैकग्राउंड कलर दिया है। जब मैं क्रोम में प्रिंट का पूर्वावलोकन देखता हूं तो यह पृष्ठभूमि के रंग की संपत्ति पर नहीं ले रहा है ...

इसलिए मैंने इस संपत्ति की कोशिश की:

-webkit-print-color-adjust: exact; 

लेकिन फिर भी इसका रंग नहीं दिखा।

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>[e-mail]</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>

Comments

ऐसा लगता है कि यह ठीक से काम करता है: jsfiddle.net/tDggR/2 मैं क्रोम संस्करण 25 का उपयोग कर रहा हूं

— जेरेमी निन्ने

jsfiddle.net/rajkumart08/TbrtD/1/embedded/result इसकी क्यों यहां काम नहीं कर रहा

भगवान! यह java8 वेबव्यू इंजन

— ruX

मेरा उत्तर देखें stackoverflow.com/a/40087869/4251431

— बशीर AL-MOMANI

Answer 1

Chrome CSS संपत्ति -webkit-print-color-adjust: exact;उचित रूप से काम करती है।

हालांकि, यह सुनिश्चित करना कि आपके पास मुद्रण के लिए सही सीएसएस है, अक्सर मुश्किल हो सकता है। आपको होने वाली कठिनाइयों से बचने के लिए कई चीजें की जा सकती हैं। सबसे पहले, अपने सभी सीएसएस को अपनी स्क्रीन सीएसएस से अलग करें। यह @media printऔर के माध्यम से किया जाता है @media screen।

अक्सर समय बस कुछ अतिरिक्त @media printसीएसएस स्थापित करने के लिए पर्याप्त नहीं है क्योंकि आपके पास अभी भी अपने सभी अन्य सीएसएस शामिल हैं जब मुद्रण भी। इन मामलों में आपको सीएसएस विशिष्टता के बारे में पता होना चाहिए क्योंकि प्रिंट नियम स्वचालित रूप से गैर-प्रिंट सीएसएस नियमों के खिलाफ नहीं जीतते हैं।

आपके मामले में, -webkit-print-color-adjust: exactकाम कर रहा है। हालाँकि, background-colorउच्च विशिष्टता के साथ अन्य सीएसएस द्वारा आपकी और रंग परिभाषा को पीटा जा रहा है।

जबकि मैं लगभग किसी भी परिस्थिति में उपयोग करने का समर्थन नहीं करता!important , निम्नलिखित परिभाषाएँ ठीक से काम करती हैं और समस्या को उजागर करती हैं:

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

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

यहाँ फिडेल (और प्रिंट पूर्वावलोकन में आसानी के लिए एम्बेडेड ) है।

Comments

Print preview failed.फिडेल खोलते समय, मुझे क्रोम v47.0.2526.106 में संदेश मिल रहा है

— piotr_cz

मोज़िला ने इसे गैर-मानक के रूप में चिह्नित किया है, इसलिए परिणाम असंगत हैं और इसका उपयोग उत्पादन साइटों में नहीं किया जाना चाहिए। developer.mozilla.org/en-US/docs/Web/CSS/…

— माइक यंग

हां, यह क्रोम में काम करता है। बूटस्ट्रैप सीएसएस प्रिंट मीडिया का उपयोग करके मेरे लिए इसे ओवरराइड कर रहा था। आप क्रोम एलिमेंट्स इंस्पेक्टर के नीचे रेंडरिंग टैब का उपयोग करके प्रिंट मोड का पूर्वावलोकन और निरीक्षण भी कर सकते हैं। यदि आप ओवरराइड स्टैक को देखना चाहते हैं, तो Emulate CSS मीडिया के लिए एक विकल्प है।

— कॉरगलोर

मेरे साथ काम करता है

— कोडेमिरर

Answer 2

उस सीएसएस संपत्ति की आपको आवश्यकता है यह मेरे लिए काम करता है ... क्रोम में पूर्वावलोकन करते समय आपके पास इसे देखने के लिए विकल्प है BW और रंग ( रंग: विकल्प- रंग या काला और सफेद ) इसलिए यदि आपके पास वह विकल्प नहीं है, तो मैं इस क्रोम एक्सटेंशन को हथियाने और आपके जीवन को आसान बनाने का सुझाव देता हूं:

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

जिस साइट पर आपने फ़ेल्ड को जोड़ा है उसे आपके मीडिया प्रिंट सीएसएस में इसकी आवश्यकता है (आपके पास इसे बस जोड़ना होगा ...

मीडिया प्रिंट सीएसएस शरीर में:

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

अद्यतन ठीक है, इसलिए आपका मुद्दा बूटस्ट्रैप है। एसएमएस ... इसमें मीडिया प्रिंट सीएसएस है और साथ ही आप करते हैं .... आप इसे हटाते हैं और आपको रंग देना चाहिए .... आपको या तो स्वयं करना होगा या इसके साथ रहना होगा। बूटस्ट्रैप प्रिंट सीएसएस।

जब मैं इस पर प्रिंट क्लिक करता हूं तो मुझे रंग दिखाई देता है .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Comments

एक्सटेंशन सभी पृष्ठों के लिए काम करता है, लेकिन यह मेरे कोड के लिए काम नहीं करता है क्यों jsfiddle.net/rajkumart08/TbrtD/1/embedded/result defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…

अगर यह सुनिश्चित करें कि आपके बूटस्ट्रैप में वेबकिट-प्रिंट-रंग-समायोजन है: सटीक; आपके शरीर पर जांच करने का एक और तरीका है ... प्रिंट मीडिया सीएसएस में बेशक

— रिस्कब्रेकर

इसका काम नहीं करना defie.co/testing/twitter-bootstrap-558bc52/docs/examples/… मैंने इसे इस कोड में दिया है

आपने इसे प्रिंट मीडिया में नहीं जोड़ा था जैसा कि मैंने आपके html इनर css: yout 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;}....आपको इसे वहां जोड़ने की जरूरत है ...

— रिस्कब्रेकर

मैंने इसे फिर से संपादित किया है, लेकिन फिर भी काम नहीं कर रहा है defie.co/testing/twitter-bootstrap-558bc52/docs/examples/…

Answer 3

यदि क्रोम ग्राफ़िक्स सेटिंग बंद हो जाती है, तो मुद्रण करते समय Chrome पृष्ठभूमि-रंग या कई अन्य शैलियों को प्रस्तुत नहीं करेगा।

इसका css, @media, या विशिष्टता से कोई लेना-देना नहीं है। आप शायद इसके चारों ओर अपना रास्ता हैक कर सकते हैं, लेकिन पृष्ठभूमि-रंग और अन्य ग्राफिक्स दिखाने के लिए क्रोम प्राप्त करने का सबसे आसान तरीका अधिक सेटिंग्स के तहत इस चेकबॉक्स को ठीक से जांचना है।

Comments

हे, मैं अंत में किसी कारण के लिए एक fiddle jsfiddle.net/qm7shrvf बनाने के लिए चारों ओर हो गया हूं, मुझे प्रिंट पूर्वावलोकन में हरे या लाल पृष्ठभूमि को प्रस्तुत करने के लिए क्रोम नहीं मिल सकता है (मैंने वास्तव में इसे प्रिंट करने की कोशिश नहीं की है) धन्यवाद! (मैंने देखा कि jsfiddle.net की काली पृष्ठभूमि उस क्रोम सेटिंग के आधार पर प्रदान की जाती है)

— एरिक

Answer 4

मुझे !importantपृष्ठभूमि-रंग टैग पर विशेषता को जोड़ने की आवश्यकता है ताकि इसे दिखाने के लिए वेबकिट भाग की आवश्यकता न हो:

background-color: #f5f5f5 !important;

Comments

यही कारण है कि fine..May मैं कारण है कि रंग महत्वपूर्ण @Flea दिए बिना नहीं दिखाया गया है पता है

— विमल कुमार

अच्छी तरह से समझ में नहीं आता कि ऐसा क्यों हो रहा है लेकिन इसने मेरी समस्या हल कर दी है :-)

— श्रीकांत

Answer 5

यदि आप बूटस्ट्रैप या किसी अन्य तृतीय पक्ष CSS का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आप मीडिया स्क्रीन को केवल उस पर निर्दिष्ट करते हैं, इसलिए आपके पास अपनी CSS फाइलों में प्रिंट मीडिया प्रकार का नियंत्रण है:

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

Answer 6

आपका CSS इस तरह होना चाहिए:

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

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

Answer 7

BOOTSTRAP.CSS का उपयोग करने के लिए, यह ठीक है!

मैंने सभी समाधानों की कोशिश की है और वे काम नहीं कर रहे थे ... जब तक मुझे पता नहीं चला कि bootstrap.css में एक सुपर कष्टप्रद है @media printजो आपके सभी रंगों, पृष्ठभूमि-रंगों, छायाओं आदि को रीसेट करता है ...

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

तो या तो इस खंड को bootstrap.css (या bootstrap.min.css) से हटा दें

या जिस पेज को आप खुद प्रिंट करना चाहते हैं, उसके सीएसएस में इन वैल्यूज को ओवरराइड करें @media print

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

Answer 8

अपनी @media printस्टाइल शीट में निम्नलिखित का उपयोग करें ।

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

यहाँ कुछ ध्यान देने योग्य बातें हैं:

• पृष्ठभूमि-रंग निरपेक्ष गिरावट है और ज्यादातर पोस्टरिटी के लिए है।
• पृष्ठभूमि-छवि PNG में बने # 404040 के 1px x 1px पिक्सेल का उपयोग करती है। यदि उपयोगकर्ता के चित्र सक्षम हैं तो यह काम कर सकता है, यदि नहीं ...
• बॉक्स-छाया सेट करें, अगर यह काम नहीं करता है ...
• बॉर्डर = 1/2 आपकी वांछित ऊंचाई और / या बॉक्स की चौड़ाई, ठोस, रंग। ऊपर के उदाहरण में मुझे 60px ऊंचाई वाला बॉक्स चाहिए था।
• सीमा विशेषता में जो आप नियंत्रित कर रहे हैं उसके आधार पर शून्य / चौड़ाई को शून्य करें।
• जब तक आप उपयोग नहीं करेंगे तब तक फ़ॉन्ट का रंग काला हो जाएगा
• भौतिक आयाम नहीं होने वाले बॉक्स के लिए ठीक करने के लिए लाइन-ऊंचाई को 0 पर सेट करें।
• अपनी खुद की PNG :-) बनाएं और होस्ट करें
• यदि ब्लॉक में पाठ को लपेटने की आवश्यकता है, तो इसे एक div में रखें और स्थिति का उपयोग करके div को स्थिति दें: सापेक्ष; और लाइन-ऊंचाई को हटा दें।

अधिक विस्तृत प्रदर्शन के लिए मेरी फ़ाइडल देखें ।

Answer 9

क्या आपका यकीन है कि यह एक सीएसएस मुद्दा है? इस मुद्दे के आसपास Google पर कुछ पोस्ट हैं: http://productforums.google.com/forum/# ​​-category-topic/chrome/discuss-chrome/eMlLBcKqd2s

यह प्रिंट प्रक्रिया से संबंधित हो सकता है। सफारी पर, जो कि वेबकिट भी है, प्रिंटर संवाद में पृष्ठभूमि छवियों और रंगों को प्रिंट करने के लिए एक चेकबॉक्स है।

Answer 10

IE के लिए

यदि आप IE का उपयोग कर रहे हैं, तो प्रिंट पूर्वावलोकन पर जाएं (दस्तावेज़ पर राइट क्लिक करें -> प्रिंट पूर्वावलोकन), सेटिंग्स पर जाएं और "प्रिंट पृष्ठभूमि का रंग और चित्र" विकल्प है, उस विकल्प का चयन करें और प्रयास करें।

Answer 11

@Media प्रिंट के तहत बूटस्ट्रैप css फाइलों में एक शैली है {*,: के बाद,: इससे पहले ....} जिसमें रंग और पृष्ठभूमि शैलियों को लेबल किया गया है - महत्वपूर्ण, जो किसी भी तत्व पर किसी भी पृष्ठभूमि रंग को हटाते हैं। सीएसएस के उन दो टुकड़ों को मारें और यह काम करेगा।

बूटस्ट्रैप निष्पादन का निर्णय ले रहा है कि आपको प्रिंट में कभी भी पृष्ठभूमि का रंग नहीं होना चाहिए , इसलिए आपको उनके सीट्स को संपादित करना होगा या एक और महत्वपूर्ण शैली रखनी होगी जो एक उच्च मिसाल है। अच्छी नौकरी बूटस्ट्रैप ...

Answer 12

मैंने purgatory101 के उत्तर का उपयोग किया था, लेकिन सभी रंगों (आइकन, पृष्ठभूमि, पाठ रंग आदि ...) को रखने में परेशानी थी, खासकर सीएसएस स्टाइलशीट का उपयोग पुस्तकालयों के साथ नहीं किया जा सकता है जो डोम तत्व के रंगों को गतिशील रूप से बदलते हैं। इसलिए यहां एक स्क्रिप्ट है जो मुद्रण से पहले तत्व की शैलियों ( background-colourऔर colour) को बदल देती है और मुद्रण करने के बाद शैलियों को साफ करती है। @media printस्टाइलशीट में बहुत सीएसएस लिखने से बचने के लिए उपयोगी है क्योंकि यह पृष्ठ संरचना जो भी काम करता है।

स्क्रिप्ट का एक हिस्सा है जो विशेष रूप से FontAwesome आइकन्स का रंग (या कोई भी तत्व जो :beforeसामग्री चयन करने के लिए चयनकर्ता का उपयोग करता है) को रखने के लिए बनाया गया है ।

एक्शन में स्क्रिप्ट दिखाते हुए JSFiddle

संगतता: क्रोम में काम करता है, मैंने अन्य ब्राउज़रों का परीक्षण नहीं किया।

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

और फिर window.printफ़ंक्शन को संशोधित करने के बाद इसे सेट करने और रीसेट करने से पहले शैलियों को सेट करें।

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

तत्वों के लिए सीएसएस बनाने के लिए आइकन पथ को खोजने वाला हिस्सा: तत्वों से पहले इस एसओ उत्तर से एक प्रति है

Comments

यह काम करता है, धन्यवाद (ध्यान दें कि आपको अपने अंतिम कोड स्निपेट varसे हटाने की आवश्यकता होगी window)

— adelriosantiago

Answer 13

आप box-shadowसंपत्ति का उपयोग भी कर सकते हैं।

Answer 14

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं । अपने कस्टम css फ़ाइल में इस कोड का उपयोग करें। बूटस्ट्रैप प्रिंट पूर्वावलोकन में आपके सभी रंगों को हटा देता है।

@media print{
  .box-text {

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

Answer 15

यदि आप "प्रिंट मीडिया शैलियों" विकल्प के बिना बूटस्ट्रैप को डाउनलोड करते हैं, तो आपको यह समस्या नहीं होगी और आपको अपने बूटस्ट्रैप.कैंस फ़ाइल में "@मीडिया प्रिंट" कोड को मैन्युअल रूप से नहीं निकालना होगा।

Answer 16

इसके लिए सबसे अच्छा समाधान यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो बस एक चीज़ को हटाएं @media प्रिंट {} इसके अंदर का सभी कोड। और प्रिंट पूर्वावलोकन के दौरान अधिक सेटिंग्स से पृष्ठभूमि ग्राफिक्स सक्षम करें।

Comments

प्रिंट करते समय सभी प्रिंट सीएसएस को क्यों हटाएं?

— मुनीम मुन्ना

यह रंग को प्रिंट के लिए दृश्यमान बनाना है

— मो। शैजाद

Answer 17

मैं अपनी बाहरी सीएसएस स्रोत फ़ाइल को डबल लोड करता हूं और मीडिया = "स्क्रीन" को मीडिया = "प्रिंट" में बदल देता हूं और आपकी तालिका की सभी सीमाओं को दिखाया गया है

इसे इस्तेमाल करे :

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

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

Comments

यह दो लिंक टैग्स के बजाय मीडिया = "सभी" के साथ किया जा सकता है

— big_water