我的页面不是"打印机友好"所以我的用户要求打印一个显示搜索结果的表格的选项。我创建了一个打印机友好页面,它通过一个按钮打开并从原始表中填充。新页面显示" zebra条纹"根据需要从原始表中。但是,当我拉出打印预览(浏览器菜单>文件>打印预览)时,条带化已经消失。字体更改显示。所有其他样式更改都会显示出来但影响条纹的TR阴影不会转换。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta http-equiv="expires" value="Thu, 16 Mar 2000 11:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<script type="text/javascript" src="/pkc/jscripts/jquery_current.js"></script>
<title>Product Knowledge Center - Results</title>
<style>
body{
font-family: arial;
}
div{
font-size: 12pt;
}
.odd{ background: #DDDDDD; }
.even{ background: #FFFFFF; }
.hdrSpan{
width: 200px;
display: inline;
float: left;
}
</style>
</head>
<body>
<div id="divHeader">
<span class="hdrSpan">Line</span>
<span id="spnLine"></span><br />
<span class="hdrSpan">Company</span>
<span id="spnCompany"></span><br />
<span class="hdrSpan">State</span>
<span id="spnState"></span><br />
<span class="hdrSpan">Eff. Date</span>
<span id="spnEffDt"></span>
</div>
<br />
<hr />
<div id="divResults">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#spnLine").text(window.opener.$('[name="Line"] option:selected').text());
$("#spnCompany").text(window.opener.$('[name="Company"] option:selected').text());
$("#spnState").text(window.opener.$('[name="State"] option:selected').text());
$("#spnEffDt").text(window.opener.$('[name="effectiveDate"]').val());
$("#divResults").html(window.opener.$("#idResults").html());
$("#resultsTbl tr").removeAttr("onclick");
});
</script>
</body>
</html>
正如我希望的那样,代码非常直观且简单。我只是不明白为什么条纹没有出现在印刷版上。
答案 0 :(得分:4)
您无能为力,因为此选项取决于用户在打印网页时直接配置它。 理想情况下,用户应决定是否要在打印时使用更多或更少的墨水。
Webkit浏览器有一个解决方法:您可以通过在CSS中添加以下代码来强制进行背景色打印:
-webkit-print-color-adjust: exact;
在Firefox和IE上,您可以通过选中页面配置对话框中的选项来设置它。
答案 1 :(得分:2)
打印机设置通常包括打印背景颜色/图像的选项。
这是最好的答案 - 到目前为止(15分钟?)。而且我要将它标记为我使用过的那个。我在页面加载时添加了一个警告,告诉用户如何在打印输出上进行条带化,现在我要进入下一个问题......