window.print（）在启动时不包含CSS样式

我需要能够打印具有PDF格式母版页的网站的一部分。这可以通过使用Chrome打印功能来完成。但是，当我使用下面的JavaScript，CSS样式不包括在内。window.print（）在启动时不包含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（）的结果

来源

2017-04-20 Fahmieyz

也许，print' – Hackerman

我没有看到，在我的同事的代码......但我会尝试 – Fahmieyz

尝试添加@media屏幕，打印但不起作用 – Fahmieyz

打印可以通过用户的浏览器进行控制时，背景颜色，它是可能的“背景色打印“已关闭。你

也可以强制覆盖与

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

在Chrome应该工作，但在其他浏览器没有测试。

这一切再加Hackermans回答，那么你并不需要两个css文件

@media print { \\do stuff }

用`@media屏幕

来源

2017-04-20 03:12:42

我尝试添加到当前的CSS文件，但它不起作用 – Fahmieyz

window.print（）在启动时不包含CSS样式

回答

相关问题