Css样式表无法在打印页面中使用 [英] Css stylesheet not working in print page
本文介绍了Css样式表无法在打印页面中使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里我的问题是我设计一个页面用于在asp中打印但是当我加载该页面时它加载了css但是当我尝试在javascript css中打印该页面时未加载
这里我的代码
< html xmlns = http://www.w3.org/1999/xhtml >
< head >
< link rel = 快捷图标 h ref = Images\abileweb.ico / >
<％ - < meta charset = utf-8> - ％>
< link rel = < span class =code-keyword> stylesheet href = css / invoice.css >
< style type = text / css >
.style1 {width：100％;}
< / style >
< < span class =code-leadattribute> script type = text / javascript >
函数PrintPanel（）{
var panel = document.getElementById（<％ = panelprint.ClientID < span class =code-pagedirective>％> ）;
var printWindow = window.open（''，''，''）;
printWindow.document.write（'< html > < head > ; < title > 打印发票< / title > '）;
printWindow.document.write（'< / head > < body > '）;
printWindow.document.write（panel.innerHTML）;
printWindow.document.write（'< / body > < / html > '）;
printWindow.document.close（）;
setTimeout（function（）{
printWindow.print（）;
}，500）;
返回false;
}
< / script >
< / head >
< body >
< 表格 id = form1 runat = server >
< asp：按钮 ID = btnprint runat = server 文本 = print OnClientClick = PrintPanel（）; CssClass = button2 / >
< asp：面板 ID = panelprint runat = server >
< div >
< header >
< h1 > ; 发票< / h1 >
< 地址 >
< p style = font-family：Arial;字体重量：粗体; font-size：medium; > Abile Business Solutions Pvt Ltd < / p >
< p > & nbsp; A 1/3 Kush Kumar Road，Nungambakkam，Chennai，Tamilnadu，India < / p >
< p > & ;电话号码：+ 91-44-44117595 < / p >
< / address >
< span > < img alt = src = Images / Abillog.jpg > < / span < span class =code-keyword>>
< / header >
< article >
< 地址 >
< < span class =code-leadattribute> div style = line-height：16px >
< span class =code-keyword>< p style = font-family：Arial; font-size：small; > & nbsp; < asp：标签 ID = lblname runat = server > < / asp：Label > < / p >
< p < span class =code-attribute> style = font-size：12px; font-weight：normal; > & nbsp; < asp：标签 ID = lbladdress runat = server > < / asp：Label > < / p >
< p < span class =code-attribute> style = font-size：12px; font-weight：normal; > < asp：标签 ID = lblphone runat = 服务器 > < / asp：标签 > < / p >
< / div >
< / address >
< table class = meta >
< tr >
< > 发票＃< / span > < / th >
< td > < span contenteditable > < asp：标签 ID = lblinvoiceno runat = server 字体粗体 = 真 ForeColor = 红色 > < / asp：Label > < / span > < / td >
< / tr >
< tr >
< th > < span > 日期< / span > < / th >
< td > < span contenteditable > < asp：Label ID = lbldate runat = 服务器 > < / asp：Label > < / span > < / td > ;
< / tr >
< / table >
< 表 class = 库存 >
< asp：Repeater ID = Repeater1 runat = server >
< HeaderTemplate >
< thead >
< tr >
< th > < span contenteditable > 数量< / span > < / th >
< th > < span contenteditable > 说明< / span > < span class =code-keyword>< / th >
< th > < span contenteditable > ; 单价< / span > ; < / th >
< th > < span < span class =code-attribute> contenteditable > 总< / span > < / th >
< / tr >
< / thead >
< / HeaderTemplate >
< ItemTemplate >
< tbody >
< tr < span class =code-keyword>>
< td > < span contenteditable > <％ #Eval（ 数量）％> < / span > < / td >
< td > < span < span class =code-attribute> contenteditable style = font-weight：bold; > <％ #Eval（ 类别）％> < / span > < br / >
< span contenteditable > & nbsp;& nbsp; Sno：<％ #Eval（ serialnumber）％> < / span > < / td >
< td > < span data-prefix > <％ #Eval（ price）％> < / span > < / span > < ; / td >
< td > < span data-prefix > <％ #Eval（ tot）％> < / span > < / td >
< / tr >
< / tbody >
< / ItemTemplate >
< / asp：Repeater >
< / table >
< table class = 余额 >
< tr >
< th > < span > 折扣< / span > < / th >
< td > < span data-prefix > < asp：标签 ID = lbldiscount runat = server > < / asp：Label > < / span < span class =code-keyword>> < / td >
< / tr >
< tr >
< th > < span > 小计< / span > < / th >
< td > < span 数据前缀 > < asp：标签 ID = lblsubtotal runat < span class =code-keyword> = server > < / asp：标签 > < / span > < / td >
< / tr &g t;
< tr >
< th > < span contenteditable>Tax Rate</span>< /th>
<td><< span class=\"code-leadattribute\">span data-prefix></span><span style=\"float:left\"><asp:Label ID=\"lbltax\" runat=\"server\">< /asp:Label></span>
<span>Rs.<asp:Label ID=\"lbltaxamount\" runat=\"server\"></asp:Label></span& gt;
</td>
</tr>
<tr>
<th><span contenteditable>Grand Total</span></th>
<td><span data-prefix> <asp:Label ID=\"lblgrandtotal\" runat=\"server\" Font-Bold=\"True\"></asp:Label></span></td>
</tr>
</table>
</article>
</div>
<div class=\"Invoice_Footer\">
<table class=\"style1\" style=\"border-style:dotted;\">
<tr>
<td colspan=\"2\" style=\"background:#F7F7F7;\"><p style=\"font-weight:bold; margin:0 3.2in;\">Bank Details</p></td>
</tr>
<tr>
<th><span>Account Name</span>
<td>
<asp:Label ID=\"lblaccountname\" runat=\"server\"></asp:Label>
</td>
</tr>
<tr><th><span>Account Number</span></th>
<td>
<asp:Label ID=\"lblaccountnumber\" runat=\"server\"></asp:Label>
</td>
</tr>
<tr><th><span>Bank</span></th>
<td>
<asp:Label ID=\"lblbank\" runat=\"server\"></asp:Label>
< /td>
</tr>
<tr>
<th><span>Branch Details</span></th>
<td>
<asp:Label ID=\"lblbranchdetails\" runat=\"server\"></asp:Label>
</td>
</tr>
<tr>
<th><span>SWFT Code</span></th>
<td>
<asp:Label ID=\"lblifsccode\" runat=\"server\"></asp:Label>
</td>
</tr>
<tr>
<td colspan=\"2\" style=\"background:#F7F7F7;\"><p style=\"font-weight:bold; margin:0 2.9in;\">Terms and Conditions</p></td>
</tr>
<tr>
<td colspan=\"2\">1. <asp:Label ID=\"lblterms1\" runat=\"server\"></asp:Label>
</td>
</tr>
<tr>
<td colspan=\"2\">2. <asp:Label ID=\"lblterms2\" runat=\"server\"></asp:Label>
</td>
</tr>
</table>
<br />
<hr class=\"linehr\" />
<br />
<p align=\"center\" style=\"font-size:small;\">Thank You For Your Business!</p>
</div>
</asp:Panel>
</form>
</body>
</html> Your javascript function is opening a new window, and creating a new document which doesn’t contain any link to your stylesheet.
Update your function so that it adds the relevant stylesheet link to the new document:
function PrintPanel() {
var panel = document.getElementById(\"<%=panelprint.ClientID %>\");
var printWindow = window.open('', '', '');
printWindow.document.write('<html><head><title>Print Invoice</title>');
// Make sure the relative URL to the stylesheet works:
printWindow.document.write('<base href=\"' + location.origin + location.pathname + '\">');
// Add the stylesheet link and inline styles to the new document:
printWindow.document.write('<link rel=\"stylesheet\" href=\"css/invoice.css\">');
printWindow.document.write('<style type=\"text/css\">.style1{width: 100%;}</style>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow。 document .close（）;
setTimeout（ function （）{
printWindow.print（）;
}， 500 ）;
return false ;
}</base>
hi,
Here my problem is i design one page for printing in asp but when i load that page it loaded with css but when i try to print that page in javascript css not loaded
here my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="Images\abileweb.ico" />
<%--<meta charset="utf-8">--%>
<link rel="stylesheet" href="css/invoice.css">
<style type="text/css">
.style1{width: 100%;}
</style>
<script type = "text/javascript">
function PrintPanel() {
var panel = document.getElementById("<%=panelprint.ClientID %>");
var printWindow = window.open('', '', '');
printWindow.document.write('<html><head><title>Print Invoice</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 500);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="btnprint" runat="server" Text="print" OnClientClick="PrintPanel();" CssClass="button2"/>
<asp:Panel ID="panelprint" runat="server">
<div>
<header>
<h1>Invoice</h1>
<address>
<p style=" font-family:Arial; font-weight:bold; font-size:medium;">Abile Business Solutions Pvt Ltd </p>
<p> A 1/3 Kush Kumar Road,Nungambakkam, Chennai, Tamilnadu, India</p>
<p> Phone No : +91-44-44117595</p>
</address>
<span><img alt="" src="Images/Abillog.jpg"></span>
</header>
<article>
<address>
<div style=" line-height:16px">
<p style="font-family:Arial; font-size:small;"> <asp:Label ID="lblname" runat="server"></asp:Label></p>
<p style="font-size:12px; font-weight:normal;"> <asp:Label ID="lbladdress" runat="server"></asp:Label></p>
<p style="font-size:12px; font-weight:normal;"><asp:Label ID="lblphone" runat="server"></asp:Label></p>
</div>
</address>
<table class="meta">
<tr>
<th>Invoice #</span></th>
<td><span contenteditable> <asp:Label ID="lblinvoiceno" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label></span></td>
</tr>
<tr>
<th><span>Date</span></th>
<td><span contenteditable><asp:Label ID="lbldate" runat="server"></asp:Label></span></td>
</tr>
</table>
<table class="inventory">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<thead>
<tr>
<th><span contenteditable>Qty</span></th>
<th><span contenteditable>Description</span></th>
<th><span contenteditable>Unit Price</span></th>
<th><span contenteditable>Total</span></th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td><span contenteditable><%#Eval("quantity") %></span></td>
<td><span contenteditable style=" font-weight:bold;"><%#Eval("category") %></span><br />
<span contenteditable> Sno: <%#Eval("serialnumber")%></span></td>
<td><span data-prefix><%#Eval("price") %></span></span></td>
<td><span data-prefix><%#Eval("tot") %></span></td>
</tr>
</tbody>
</ItemTemplate>
</asp:Repeater>
</table>
<table class="balance">
<tr>
<th><span>Discount</span></th>
<td><span data-prefix><asp:Label ID="lbldiscount" runat="server"></asp:Label></span></td>
</tr>
<tr>
<th><span>Sub Total</span></th>
<td><span data-prefix><asp:Label ID="lblsubtotal" runat="server"></asp:Label></span></td>
</tr>
<tr>
<th><span contenteditable>Tax Rate</span></th>
<td><span data-prefix></span><span style="float:left"><asp:Label ID="lbltax" runat="server"></asp:Label></span>
<span>Rs.<asp:Label ID="lbltaxamount" runat="server"></asp:Label></span>
</td>
</tr>
<tr>
<th><span contenteditable>Grand Total</span></th>
<td><span data-prefix> <asp:Label ID="lblgrandtotal" runat="server" Font-Bold="True"></asp:Label></span></td>
</tr>
</table>
</article>
</div>
<div class="Invoice_Footer">
<table class="style1" style="border-style:dotted;">
<tr>
<td colspan="2" style="background:#F7F7F7;"><p style="font-weight:bold; margin:0 3.2in;">Bank Details</p></td>
</tr>
<tr>
<th><span>Account Name</span>
<td>
<asp:Label ID="lblaccountname" runat="server"></asp:Label>
</td>
</tr>
<tr><th><span>Account Number</span></th>
<td>
<asp:Label ID="lblaccountnumber" runat="server"></asp:Label>
</td>
</tr>
<tr><th><span>Bank</span></th>
<td>
<asp:Label ID="lblbank" runat="server"></asp:Label>
</td>
</tr>
<tr>
<th><span>Branch Details</span></th>
<td>
<asp:Label ID="lblbranchdetails" runat="server"></asp:Label>
</td>
</tr>
<tr>
<th><span>SWFT Code</span></th>
<td>
<asp:Label ID="lblifsccode" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="background:#F7F7F7;"><p style="font-weight:bold; margin:0 2.9in;">Terms and Conditions</p></td>
</tr>
<tr>
<td colspan="2">1. <asp:Label ID="lblterms1" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">2. <asp:Label ID="lblterms2" runat="server"></asp:Label>
</td>
</tr>
</table>
<br />
<hr class="linehr" />
<br />
<p align="center" style="font-size:small;">Thank You For Your Business!</p>
</div>
</asp:Panel>
</form>
</body>
</html> 解决方案
Your javascript function is opening a new window, and creating a new document which doesn't contain any link to your stylesheet.
Update your function so that it adds the relevant stylesheet link to the new document:
function PrintPanel() { var panel = document.getElementById("<%=panelprint.ClientID %>"); var printWindow = window.open('', '', ''); printWindow.document.write('<html><head><title>Print Invoice</title>'); // Make sure the relative URL to the stylesheet works: printWindow.document.write('<base href="' + location.origin + location.pathname + '">'); // Add the stylesheet link and inline styles to the new document: printWindow.document.write('<link rel="stylesheet" href="css/invoice.css">'); printWindow.document.write('<style type="text/css">.style1{width: 100%;}</style>'); printWindow.document.write('</head><body >'); printWindow.document.write(panel.innerHTML); printWindow.document.write('</body></html>'); printWindow.document.close(); setTimeout(function () { printWindow.print(); }, 500); return false; }</base>
这篇关于Css样式表无法在打印页面中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
