Reputation: 255

window.print() does not include CSS style when fired up

I need to be able to print a part of a website that have master page in PDF format. This can be done by using Chrome print capability. However when I used below javascript, the CSS style is not included.

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

Below is my aspx code for my 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 style for this webpage. All the style is within '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
}

I use the exact javascript from my colleague but mine not working but his own does work.

Original website