为什么使用Window.Print（）打印后没有显示CSS？
[英]Why no CSS showing after printing using Window.Print()?
问题描述
我想在我的页面中打印一个特定的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样式。 请帮帮我。 谢谢。
2 个解决方案
解决方案1
0 2016-03-23 06:22:06
尝试使用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();
}
解决方案2
0 2016-03-23 07:07:40
好的，这是您的工作代码，我添加了具有小测试样式的测试表，并更新为您的html
<Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClick="printDiv('mydiv')" />click</button>
<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">#mydiv{color:red;font-size:30px; background-color: #1a4567 !important;-webkit-print-color-adjust: exact; }</style>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln('<div id="mydiv"><table><tr><td>table for test</td></tr></table></div>');
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
注意：我只是替换了这一行WindowObject.document.writeln(DocumentContainer.innerHTML);
直接使用html
并且我在样式中添加了小的CSS属性
-webkit-print-color-adjust: exact;
显示在移动浏览器中打印页面出现问题，使用reactjs的window.print在移动浏览器中不支持
[英]Showing There was a problem with printing the page in mobile browsers, window.print using reactjs is not supporting in mobile browsers
使用window.print（）打印时不打印输入字段的文本
[英]text of input field is not printing while print using window.print()
Angular 4-使用window.print（）打印Material MDDialog组件的html文档后，我的应用程序冻结
[英]Angular 4 - my app freezes after printing html document of Material MDDialog component using window.print()
为什么 window.print() 打印整个页面而不是提到的 div
[英]Why is window.print() printing the whole page instead of the mentioned div
使用window.print（）时表格单元格的背景颜色不能打印
[英]while using window.print() the background colors for table cells not printing
如何使用window.print（）在javascript中传递页面的打印范围？
[英]How to pass printing range of pages in javascript using window.print()?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
javascript：window.print（）未显示要打印的条形码
使用window.print打印后对话框未关闭
显示在移动浏览器中打印页面出现问题，使用reactjs的window.print在移动浏览器中不支持
使用window.print（）打印时不打印输入字段的文本
Angular 4-使用window.print（）打印Material MDDialog组件的html文档后，我的应用程序冻结
为什么 window.print() 打印整个页面而不是提到的 div
使用window.print（）时表格单元格的背景颜色不能打印
使用Window.print时如何自定义打印？
如何使用window.print（）在javascript中传递页面的打印范围？
无法在window.print（）上的CSS
相关标签