인쇄 미리보기에 배경색이 표시되지 않음

페이지를 인쇄하려고합니다. 이 페이지에서 테이블에 배경색을 지정했습니다. 크롬에서 인쇄 미리보기를 볼 때 배경색 속성을 사용하지 않습니다 ...

그래서 나는이 속성을 시도했다 :

-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 print인쇄 할 때 다른 CSS를 모두 포함하기 때문에 일부 추가 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 및 Color ( Color : Options- Color 또는 Black and white ) 를 볼 수있는 옵션이 있으므로 해당 옵션이 없으면 이 Chrome 확장 프로그램을 가져 와서보다 편리하게 사용하시기 바랍니다.

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

바이올린에 추가 한 사이트는 미디어 인쇄 CSS에서 이것을 필요로합니다 (추가해야합니다 ...

본문에 미디어 인쇄 CSS :

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

UPDATE OK 그래서 문제는 bootstrap.css입니다 ... 미디어 인쇄 CSS가 있고 당신도 할 수 있습니다 .... 제거하고 색을 주어야합니다 .... 당신은 스스로 할 필요가 있습니다. 부트 스트랩은 CSS를 인쇄합니다.

이 인쇄를 클릭하면 색상이 보입니다 .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

배경 그래픽 설정이 꺼져 있으면 Chrome에서 인쇄시 배경색 또는 다른 여러 스타일을 렌더링하지 않습니다.

이것은 css, @media 또는 specificity와 관련이 없습니다. 주변을 해킹 할 수는 있지만 크롬이 배경색 및 기타 그래픽을 표시하는 가장 쉬운 방법은 추가 설정 에서이 확인란을 올바르게 선택하는 것입니다.

!important배경색 태그에 속성 을 추가하여 표시하려면 웹킷 부분이 필요하지 않았습니다.

background-color: #f5f5f5 !important;

부트 스트랩 또는 다른 타사 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;
}

다음은주의해야 할 사항입니다.

• 배경색은 절대 폴백이며 대부분 후손을 위해 존재합니다.
• background-image는 PNG로 만들어진 # 404040의 1px x 1px 픽셀을 사용합니다. 사용자가 이미지를 활성화 한 경우 작동하지 않을 수 있습니다.
• 작동하지 않으면 상자 그림자를 설정하십시오 ...
• 테두리 = 1/2, 원하는 높이 및 / 또는 상자 너비, 단색. 위의 예에서는 60px 높이 상자를 원했습니다.
• border 속성에서 제어하는 ​​것에 따라 heigh / width를 제로화하십시오.
• ! important를 사용하지 않으면 글꼴 색상은 기본적으로 검은 색
• 물리적 치수가없는 상자를 수정하려면 선 높이를 0으로 설정하십시오.
• 자신의 PNG를 만들고 호스팅하십시오 :-)
• 블록의 텍스트를 줄 바꿈 해야하는 경우 div에 넣고 position : relative; 선 높이를 제거하십시오.

더 자세한 데모는 내 바이올린 을 참조하십시오 .

이것이 CSS 문제입니까? 이 문제와 관련하여 Google에는 다음과 같은 게시물이 있습니다. http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

인쇄 프로세스와 관련이있을 수 있습니다. 웹킷 인 safari에는 프린터 대화 상자에 배경 이미지와 색상을 인쇄하는 확인란이 있습니다.

IE의 경우

IE를 사용하는 경우 인쇄 미리보기로 이동하십시오 (문서-> 인쇄 미리보기를 마우스 오른쪽 버튼으로 클릭). 설정으로 이동하여 "배경 색상 및 이미지 인쇄"옵션이 있으며 해당 옵션을 선택하고 시도하십시오.

부트 스트랩 CSS 파일에는 @media print {* ,: after, : before ....} 아래에! important라는 색상 및 배경 스타일이 있으며 모든 요소의 배경색을 제거하는 스타일이 있습니다. 이 두 조각의 CSS를 죽이면 작동합니다.

부트 스트랩 당신이해야하는 실행 의사 결정되어 결코 당신이 그들의 CSS를 편집하거나 우선 순위가 더 높은 또 다른! 중요한 스타일을 가지고해야하므로, 인쇄의 모든 배경색이 없다합니다. 좋은 직업 부트 스트랩 ...

나는 purgatory101의 대답을 사용 했지만 모든 색상 (아이콘, 배경, 텍스트 색상 등)을 유지하는 데 어려움을 겪었습니다. 특히 CSS 스타일 시트는 DOM 요소의 색상을 동적으로 변경하는 라이브러리와 함께 사용할 수 없습니다. 따라서 인쇄하기 전에 요소의 스타일 ( background-colour및 colour) 을 변경 하고 인쇄가 완료되면 스타일을 지우는 스크립트가 있습니다. @media print페이지 구조에 상관없이 스타일 시트 에 CSS를 많이 쓰지 않는 것이 좋습니다.

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

: before 요소에 대한 CSS를 작성하기위한 아이콘 경로를 찾는 부분은 이 SO 답변 의 사본입니다.

box-shadow속성을 사용할 수도 있습니다 .

Bootstrap 을 사용하는 경우 사용자 정의 CSS 파일 에서이 코드를 사용하십시오. 부트 스트랩은 인쇄 미리보기에서 모든 색상을 제거합니다.

@media print{
  .box-text {

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

"인쇄 용지 스타일"옵션없이 Bootstrap을 다운로드하면이 문제가 발생하지 않으며 bootstrap.css 파일에서 "@media print"코드를 수동으로 제거 할 필요가 없습니다.

부트 스트랩을 사용하는 경우 가장 좋은 해결책은 @media print {}를 제거 하면됩니다. 인쇄 미리보기를 수행하면서 더 많은 설정에서 배경 그래픽을 활성화 할 수 있습니다.

외부 CSS 소스 파일을 두 번로드하고 media = "screen"을 media = "print"로 변경하면 내 테이블의 모든 테두리가 표시됩니다.

이 시도 :

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

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