javascript - window.print() 启动时不包含 CSS 样式

Question

我需要能够打印具有 PDF 格式母版页的网站的一部分。这可以通过使用 Chrome 打印功能来完成。但是，当我在下面使用 javascript 时，不包含 CSS 样式。

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

下面是我网站的 aspx 代码；

<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 样式。所有样式都在“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
}

我使用我同事的 javascript，但我的不工作，但他自己的工作。

原网站

window.print() 的结果

Answer 1

打印时的背景色可以由用户浏览器控制，有可能“背景色打印”已经关闭。

你也可以用

强制覆盖

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

应该可以在 Chrome 中运行，但尚未在其他浏览器中测试过。

将它与 Hackermans 的答案结合起来，那么你就不需要两个 css 文件了

@media print { \\do stuff }