window.print() enthält keine CSS-Stil, wenn gefeuert

Question

Ich muss in der Lage, einen Teil einer Website, die Master-Seite im PDF-Format haben drucken. Dies kann durch Verwendung der Chrome-Druckfunktion erfolgen. Wenn ich jedoch unter Javascript verwendete, ist der CSS-Stil nicht enthalten.

<link type="text/css" href="~/StyleSheet.css" rel="stylesheet" /> 
<link type="text/css" href="~/StyleSheet.css" rel="stylesheet" media="print" /> 
<script type="text/javascript" src="../Scripts/jquery-3.1.1.min.js"></script> 
<script type="text/javascript"> 
function printDiv(obj) 
{ 
    var printContents = document.getElementById(obj).innerHTML; 
    var originalContents = document.body.innerHTML; 

    printContents = document.getElementById('banner').innerHTML + printContents; 
    document.body.innerHTML = printContents; 

    window.print(); 

    document.body.innerHTML = originalContents; 
} 

Unten ist mein aspx Code für meine Website;

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> 
    <div id="banner"> 
     <asp:Image ID="imgBanner" runat="server" Height="75px" ImageUrl="~/Misc/Banner/Dashboard.jpg" /> 
    </div> 
</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server"> 
    <div class="topbar-divider-right"> 
     Print Dashboard as: 
     <asp:Button ID="btnPDF" CssClass="btn btn-default" runat="server" Text="PDF" OnClientClick="javascript:return printDiv('divPrintDashboard');" /> 
    </div> 
</asp:Content> 
<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server"> 
    <div id="divPrintDashboard"> 
     ...Content... 
    </div> 
</asp:Content> 

CSS-Stil für diese Webseite. Die ganze Stil ist in ‚divPrintDashboard‘

/*Dashboard*/ 
@media sceen, print { 
    .head-dashboard { 
     background-color: black; 
     color: white; 
     /*font-weight: bold;*/ 
     border:1px solid gray; 
     padding-left: 5px 
    } 
    .tbl-row-RM-dashboard td:nth-child(3), 
    .tbl-row-RM-dashboard td:nth-child(4), 
    .tbl-row-RM-dashboard td:nth-child(5), 
    .tbl-row-RM-dashboard td:nth-child(6), 
    .tbl-row-RM-dashboard td:nth-child(7) { 
     width: 50px 
    } 
    .tbl-comp-count th { 
     min-width: 75px 
    } 
    .tbl-comp-count tr:last-child { 
     border-top: 2px solid black; 
     border-bottom: double 
    } 
} 

.head-dashboard { 
    background-color: black; 
    color: white; 
    border:1px solid gray; 
    padding-left: 5px 
} 
.tbl-row-RM-dashboard td:nth-child(3), 
.tbl-row-RM-dashboard td:nth-child(4), 
.tbl-row-RM-dashboard td:nth-child(5), 
.tbl-row-RM-dashboard td:nth-child(6), 
.tbl-row-RM-dashboard td:nth-child(7) { 
    width: 50px 
} 
.tbl-comp-count th { 
    min-width: 75px 
} 
.tbl-comp-count tr:last-child { 
    border-top: 2px solid black; 
    border-bottom: double 
} 

Ich verwende die genaue Javascript von meinem Kollegen, aber mir nicht funktioniert, aber seine eigene funktioniert.

Original-Website

Das Ergebnis aus window.print()

Answer 1

Die Hintergrundfarbe beim Drucken kann durch den Browser-Benutzer gesteuert werden und es ist möglich, „Hintergrundfarbe Drucken "wurde ausgeschaltet.

Sie können auch Überschreibungen zwingen

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

Sollte in Chrome arbeiten, aber nicht in anderen Browsern getestet.

Kombinieren Sie diese mit Hackermans beantworten, dann müssen Sie nicht zwei CSS-Dateien

@media print { \\do stuff }