สีพื้นหลังไม่แสดงในตัวอย่างก่อนพิมพ์

ฉันพยายามพิมพ์หน้าเอกสาร ในหน้านั้นฉันให้ตารางสีพื้นหลัง เมื่อฉันดูตัวอย่างก่อนพิมพ์ในโครเมี่ยมการไม่แสดงผลบนคุณสมบัติสีพื้นหลัง ...

ดังนั้นฉันจึงลองคุณสมบัตินี้:

-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>zznn@abc.co</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>

คุณสมบัติ Chrome CSS -webkit-print-color-adjust: exact;ทำงานได้อย่างเหมาะสม

อย่างไรก็ตามการทำให้แน่ใจว่าคุณมี CSS ที่ถูกต้องสำหรับการพิมพ์มักจะยุ่งยาก มีหลายสิ่งที่สามารถทำได้เพื่อหลีกเลี่ยงปัญหาที่คุณมี ก่อนอื่นให้แยก CSS การพิมพ์ทั้งหมดของคุณออกจาก CSS หน้าจอของคุณ นี้จะกระทำผ่านทางและ@media print@media screen

บ่อยครั้งที่การตั้งค่า@media printCSS พิเศษบางอย่างนั้นไม่เพียงพอเพราะคุณยังคงมี CSS อื่นทั้งหมดของคุณเมื่อพิมพ์เช่นกัน ในกรณีเหล่านี้คุณเพียง แต่ต้องตระหนักถึงความเฉพาะเจาะจงของ CSS เนื่องจากกฎการพิมพ์จะไม่ชนะกฎ CSS ที่ไม่ใช่การพิมพ์โดยอัตโนมัติ

ในกรณีของคุณ-webkit-print-color-adjust: exactกำลังทำงานอยู่ อย่างไรก็ตามbackground-colorคำจำกัดความของคุณและสีกำลังถูกตีด้วย CSS อื่นที่มีความจำเพาะสูงกว่า

ในขณะที่ฉันไม่รับรองการใช้งาน!importantในเกือบทุกสถานการณ์คำจำกัดความต่อไปนี้ทำงานได้อย่างถูกต้องและเปิดเผยปัญหา:

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

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

นี่คือซอ (และฝังเพื่อความสะดวกในการแสดงตัวอย่างก่อนพิมพ์)

คุณสมบัติ CSS นั่นคือทั้งหมดที่คุณต้องการสำหรับฉัน ... เมื่อดูตัวอย่างใน Chrome คุณมีตัวเลือกให้ดู BW และสี ( สี: ตัวเลือก - สีหรือขาวดำ ) ดังนั้นหากคุณไม่มีตัวเลือกนั้น ฉันแนะนำให้คว้าส่วนขยาย Chrome นี้และทำให้ชีวิตของคุณง่ายขึ้น:

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

เว็บไซต์ที่คุณเพิ่มบนซอต้องการสิ่งนี้ในสื่อสิ่งพิมพ์ css ของคุณ (คุณมีเพียงแค่ต้องเพิ่ม ...

สื่อสิ่งพิมพ์ CSS ในเนื้อหา:

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

อัปเดต ตกลงดังนั้นปัญหาของคุณคือ bootstrap.css ... มันมีสื่อสิ่งพิมพ์ css เช่นเดียวกับที่คุณทำ .... คุณลบมันออกและนั่นควรจะทำให้คุณมีสี ... คุณต้องทำเองหรือติดกับ bootstraps พิมพ์ CSS

เมื่อฉันคลิกพิมพ์ที่นี่ฉันเห็นสี .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Chrome จะไม่แสดงสีพื้นหลังหรือสไตล์อื่น ๆ เมื่อพิมพ์หากปิดการตั้งค่ากราฟิกพื้นหลัง

สิ่งนี้ไม่เกี่ยวข้องกับ css, @media หรือ specificity คุณอาจแฮ็กทางของคุณได้ แต่วิธีที่ง่ายที่สุดในการรับโครเมี่ยมเพื่อแสดงสีพื้นหลังและกราฟิกอื่น ๆ คือการทำเครื่องหมายในช่องทำเครื่องหมายนี้อย่างถูกต้องภายใต้การตั้งค่าเพิ่มเติม

ฉันแค่ต้องเพิ่ม!importantคุณลักษณะลงในแท็กสีพื้นหลังเพื่อให้มันปรากฏขึ้นไม่จำเป็นต้องมีส่วน webkit:

background-color: #f5f5f5 !important;

หากคุณใช้ bootstrap หรือ CSS อื่น ๆ ของบุคคลที่สามตรวจสอบให้แน่ใจว่าคุณระบุหน้าจอสื่อบันทึกเฉพาะบนหน้าจอดังนั้นคุณจึงสามารถควบคุมประเภทสื่อสิ่งพิมพ์ในไฟล์ CSS ของคุณเอง:

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

CSS ของคุณต้องเป็นเช่นนี้:

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

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

สำหรับผู้ที่ใช้ 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)

หรือแทนที่ค่าเหล่านี้ใน css ของหน้าที่คุณต้องการพิมพ์ด้วยตัวคุณเอง @media print

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

ใช้สิ่งต่อไปนี้ใน@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;
}

ต่อไปนี้เป็นสิ่งที่ควรทราบ:

• พื้นหลังสีเป็นทางเลือกที่แน่นอนและมีไว้สำหรับลูกหลานส่วนใหญ่
• ภาพพื้นหลังใช้พิกเซล 1px x 1px ที่ # 404040 เป็น PNG หากผู้ใช้เปิดใช้งานรูปภาพอาจทำงานได้หากไม่ใช่ ...
• ตั้งค่ากล่องเงาหากไม่ได้ผล ...
• เส้นขอบ = 1/2 ความสูงและ / หรือความกว้างของกล่องที่คุณต้องการ, แข็ง, สี ในตัวอย่างด้านบนฉันต้องการกล่องความสูง 60px
• ลดความสูง / ความกว้างให้เป็นศูนย์โดยขึ้นอยู่กับสิ่งที่คุณควบคุมในคุณสมบัติของเส้นขอบ
• สีแบบอักษรจะเปลี่ยนเป็นสีดำยกเว้นว่าคุณใช้! สำคัญ
• ตั้งค่า line-height เป็น 0 เพื่อแก้ไขสำหรับกล่องที่ไม่มีมิติทางกายภาพ
• ทำและโฮสต์ PNG ของคุณเอง :-)
• หากข้อความในบล็อกต้องห่อให้วางใน div และจัดตำแหน่ง div โดยใช้ position: relative; และลบความสูงของบรรทัด

ดูซอของฉันสำหรับการสาธิตอย่างละเอียด

คุณแน่ใจหรือว่านี่เป็นปัญหาของ css มีบางโพสต์ใน google รอบปัญหานี้: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

อาจเกี่ยวข้องกับกระบวนการพิมพ์ ใน Safari ซึ่งเป็น webkit ด้วยมีช่องทำเครื่องหมายเพื่อพิมพ์ภาพพื้นหลังและสีในกล่องโต้ตอบเครื่องพิมพ์

สำหรับ IE

หากคุณใช้ IE ให้ไปที่ตัวอย่างก่อนพิมพ์ (คลิกขวาที่เอกสาร -> ตัวอย่างก่อนพิมพ์) ไปที่การตั้งค่าและมีตัวเลือก "พิมพ์สีและภาพพื้นหลัง" เลือกตัวเลือกนั้นแล้วลอง

มีสไตล์ในไฟล์ bootstrap css ภายใต้ @media print {* ,: after,: before .... } ที่มีสีและลักษณะพื้นหลังติดป้าย! สำคัญซึ่งจะลบสีพื้นหลังใด ๆ ในองค์ประกอบใด ๆ ฆ่า CSS สองชิ้นนั้นแล้วมันจะได้ผล

Bootstrap กำลังตัดสินใจดำเนินการที่คุณไม่ควรมีสีพื้นหลังใด ๆ ในงานพิมพ์ดังนั้นคุณต้องแก้ไข css ของพวกเขาหรือมีสไตล์ที่สำคัญอื่นที่สำคัญกว่า ดีมาก bootstrap ...

ฉันใช้คำตอบของ purgatory101แต่มีปัญหาในการรักษาทุกสี (ไอคอนพื้นหลังสีข้อความ ฯลฯ ... ) โดยเฉพาะอย่างยิ่งสไตล์ชีต CSS ไม่สามารถใช้กับไลบรารีที่เปลี่ยนสีขององค์ประกอบ DOM ได้แบบไดนามิก ดังนั้นนี่คือสคริปต์ที่เปลี่ยนลักษณะขององค์ประกอบ ( background-colourและcolour) ก่อนการพิมพ์และล้างสไตล์เมื่อพิมพ์เสร็จแล้ว มันมีประโยชน์ที่จะหลีกเลี่ยงการเขียน CSS จำนวนมากใน@media printสไตล์ชีทเพราะมันทำงานได้ทุกโครงสร้างของหน้า

มีส่วนหนึ่งของสคริปต์ที่ทำขึ้นเป็นพิเศษเพื่อให้สีของไอคอน FontAwesome (หรือองค์ประกอบใด ๆ ที่ใช้:beforeตัวเลือกเพื่อแทรกเนื้อหาที่มีสี)

JSFiddle แสดงสคริปต์ในการดำเนินการ

ความเข้ากันได้: ใช้งานได้ใน Chrome ฉันไม่ได้ทดสอบเบราว์เซอร์อื่น

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

ส่วนที่พบพา ธ ไอคอนเพื่อสร้าง CSS สำหรับ: ก่อนองค์ประกอบคือสำเนาจากคำตอบ SO นี้

คุณยังสามารถใช้box-shadowคุณสมบัติ

หากคุณใช้Bootstrapเพียงแค่ใช้รหัสนี้ในไฟล์ css ที่คุณกำหนดเอง Bootstrap จะลบสีทั้งหมดของคุณในหน้าตัวอย่างก่อนพิมพ์

@media print{
  .box-text {

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

หากคุณดาวน์โหลด Bootstrap โดยไม่มีตัวเลือก "ลักษณะสื่อสิ่งพิมพ์" คุณจะไม่มีปัญหานี้และไม่ต้องลบรหัส "@media print" ด้วยตนเองในไฟล์ bootstrap.css ของคุณ

ทางออกที่ดีที่สุดสำหรับสิ่งนี้หากคุณใช้ bootstrap ดังนั้นให้ทำสิ่งหนึ่งที่จะลบ@media print {}รหัสทั้งหมดภายในนี้ และเปิดใช้งานกราฟิกพื้นหลังจากการตั้งค่าเพิ่มเติมในขณะที่ดูตัวอย่างก่อนพิมพ์

ฉันเพิ่มไฟล์ซอร์ส css ภายนอกของฉันเป็นสองเท่าและเปลี่ยน media = "screen" เป็น media = "print" และแสดงเส้นขอบทั้งหมดสำหรับตารางของฉัน

ลองสิ่งนี้:

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

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