使用CSS打印特定div [英] Printing of specific div with CSS
本文介绍了使用CSS打印特定div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从我的网页打印一个特定的div，其中的样式应用于div中的内容。但是当我打印页面时，它不打印样式。
以下是我的代码：
Java脚本代码：
I want to print a specific div from my webpage with styles applied on content in div.But when i print the page it does not print with styles.
Following is my code:
Java script code:
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementById('report');
var popupWin = window.open('', '_blank', 'width=300,height=300');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
链接CSS文件：
@section css {
< link href =@ Url.Content（../../ Content / print.css） =stylesheetmedia =print/>
}
CSS文件：
Linking CSS file:
@section css {
<link href="@Url.Content("../../Content/print.css")" rel="stylesheet" media="print"/>
}
CSS File:
/*
Table Style - This is what you want
------------------------------------------------------------------ */
@media print
{
table.table1 a:link
{
color: #666;
font-weight: bold;
text-decoration: none;
}
.table1 a:visited
{
color: #999999;
font-weight: bold;
text-decoration: none;
}
.table1 a:active, .table1 a:hover
{
color: #bd5a35;
text-decoration: underline;
}
.table1
{
font-family: Calibri;
color: Black;
font-size: 12px;
text-shadow: 1px 1px 0px #fff;
background: #eaebec; /*margin:20px;*/
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
.table1 th
{
/*padding:21px 25px 22px 25px;*/
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
height: 15px;
font-weight: bold;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
.table1 th:first-child
{
text-align: left; /*padding-left:20px;*/
}
.table1tr:first-child th:first-child
{
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
}
.table1 tr:first-child th:last-child
{
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
}
.table1 tr
{
text-align: left;
padding-left: 10px;
}
.table1 tr td:first-child
{
text-align: left;
padding-left: 10px;
border-left: 0;
}
.table1 tr td
{
height: 10px;
padding: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.table1 tr.even td
{
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.table1 tr:last-child td
{
border-bottom: 0;
}
.table1 tr:last-child td:first-child
{
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.table1 tr:last-child td:last-child
{
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.table1 tr:hover td
{
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}
.list
{
margin-left: 80px;
}
#nonPrintable{display:none;}
}
推荐答案
您好，
修改printDiv代码，以便在生成的弹出窗口html中包含对css的引用。目前你的代码只写有问题的div的html。
问候，
Hello,
Modify your printDiv code so that in the resulting popup window html the reference to css is also included. Currently you code only writes the html of the div in question.
Regards,
试试这个......;）< br $>
try this...;)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementById('divToPrint');
var popupWin = window.open('', '_blank', 'width=300,height=300');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
</head>
<body >
other contents
<div id="divToPrint">
<div style="width:200px;height:300px;background-color:teal;">
This is the div to print
</div>
</div>
<div>
<input type="button" value="print" onclick="PrintDiv();" />
</div>
</body>
</html>
function showPopup() {
var myDiv = document.getElementById('bodyWrapper');
var newWindow = window.open('', 'SecondWindow', 'toolbar=0,stat=0');
var style = newWindow.document.createElement('link');
style.type = "text/css";
style.rel = "stylesheet";
style.href = "http://host/css/style.css";
style.media = "all";
newWindow.document.write("<html><body " +
"class='responsive light2012-home-switcher home switcher' " +
" önload='window.print()'>" +
myDiv.innerHTML +
"</body></html>");
newWindow.document.getElementsByTagName("head")[0].appendChild(style);
newWindow.document.close();
}
Regards
这篇关于使用CSS打印特定div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
