我想在我的页面中打印一个特定的 div。为此，我使用以下代码:
<script type="text/javascript">
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('<style type="text/css" media="all">.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}</style>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
<asp:Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClientClick="javascript:printDiv('mydiv')" />
HTML 表格:
<table style="width: 899px;" align="center" cellpadding="4" cellspacing="3">
<tr>
<td style="width: 50%;">
<%-- <asp:Label ID="lblcandidateid" runat="server" Text="Label" CssClass="design1" ></asp:Label>--%>
</td>
<td style="width: 50%">
<%--<asp:Image ID="candidateimg" runat="server" ImageUrl="img/avatar1_small.jpg" ImageAlign="Right" Width="90px" Height="83px" />--%></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design" style="background-color: #A4A4A4;">Personal Details</b>
<%-- <asp:Label ID="txtcandidatename" runat="server" Text="Label" CssClass="design1">
</asp:Label>--%>
</td>
</tr>
<tr>
<td><b class="design">Name: </b><asp:Label ID="txtcandidatename" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
<td><b class="design">Nationality: </b><asp:Label ID="txtnationality" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td><b class="design">Languages: </b><asp:Label ID="txtlanguage" runat="server" Text="Label" CssClass="design1"></asp:Label>
</td>
<td><b class="design">Current Address: </b><asp:Label ID="txtcurrentaddress" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td><b class="design">Marital Status: </b><asp:Label ID="txtmaritalstatus" runat="server" Text="Label"></asp:Label>
</td>
<td><b class="design">Date of Birth: </b><asp:Label ID="txtdob" runat="server" Text="Label" CssClass="design1"></asp:Label>
</td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Objective</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcandidateobjective" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Profile</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcareerprofile" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Key Areas of Expertise</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtskills" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Professional Experience</b></td>
</tr>
<tr>
<td>
<asp:Label ID="txtcompanyname" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
<td>
<asp:Label ID="txtdate" runat="server" Text="Label" CssClass="design1" align="right"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2"><i class="design">
<asp:Label ID="txttitle" runat="server" Text="Label" CssClass="design1"></asp:Label></i>
</td>
</tr>
<tr>
<td colspan="2"><b class="design"><i>Key Responsibilities</i></b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtkeyresponsibilities" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design"><i>Key Achievements</i></b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtkeyachievements" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Education</b></td>
</tr>
<tr>
<td colspan="2"><b class="design">Education: </b>
<asp:Label ID="txteducation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Location: </b>
<asp:Label ID="txtlocation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Major: </b>
<asp:Label ID="txtmajor" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Year of Passing: </b>
<asp:Label ID="txtpassing" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Certification</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcertification" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">References</b></td>
</tr>
<tr>
<td>Will be presented upon request</td>
</tr>
</table>
我在打印窗口中遇到这样的情况:
但这是我最初的设计:
但是当它打印时，它不会采用为每个标签或 TD 指定的任何 CSS 样式。请帮我解决这个问题。谢谢。
最佳答案
尝试使用 document.createElement('style') 创建 sytle 元素。
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
var style = document.createElement('style');
var css = '.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}';
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head = WindowObject.document.head || WindowObject.document.getElementsByTagName('head')[0];
head.appendChild(style);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
关于javascript - 为什么使用 Window.Print() 打印后不显示 CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36171027/