请教打印网页时,为什么有时会打印出重影?应该如何修复?

软件和网站开发以及相关技术探讨
回复
alober
帖子: 128
注册时间: 2010-07-13 17:04
送出感谢: 20 次
接收感谢: 0

请教打印网页时,为什么有时会打印出重影?应该如何修复?

#1

帖子 alober » 2018-07-04 17:52

访问同一个内网,有8台电脑,其中6台都能正常打印出想要的效果,但另2台打印时(打印预览时的效果也一样),有一台会打印出一条横线,另一台会打印出重影,打印出重影的如下图所示:
print_page.gif
请教这是什么原因?应该如何修复?要修改html代码吗?我在两个表格中间加了一个 p 标签,有 page-break-after: always; 想让它分页打印。如果去掉这个标签,打印预览时是正常的,但不能分页。

补充一下,这个打印出重影的地方,只有 th 标签所在的那行,其它行都没有重影。

原本的代码大致如下,表格内容是 js 从服务器获取的,没有写出来:

代码: 全选

<!DOCTYPE HTML>
<html>
<head>
<style>
.flup_address {
	width: 6cm;
}
.flup_name {
	width: 1.5cm;
}
.flup_phone {
	width: 2.8cm;
}
.flup_flag {
	width: 1cm;
}
.flup_danger {
	width: 2cm;
}
.flup_drug {
	width: 15.4cm;
}
.flup_other {
	width: 2cm;
}

.fflup_address {
	width: 6cm;
}
.fflup_name {
	width: 3cm;
}
.fflup_phone {
	width: 5cm;
}
.fflup_flag {
	width: 15cm;
}
th {
	text-align: center;
}

table.fflup tr {
    height: 2.5em;
}
</style>
<script>
function print_page() {
	// 清除顶部标题、设置时间等等
	$('.fflup_other').hide();
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="print_page();">打印</a></div>

<div class="collect" style="width: 29.7cm">
<table style="border-collapse: collapse; word-wrap: break-word; word-break: break-all; border: 1px solid #3E80B0; margin: 1px auto; width: 29.5cm">
<caption>一览表,团队:第<input id="team_num_str" type="text" value="" style="width: 1cm;" />团队,</span>成员<input type="text" size="12em" /><input id="flup_time_str" type="date" min="2018-01-01" max="2050-12-31" /></caption>
<thead>
<tr>
<th class="flup_address">住户地址</th>
<th class="flup_name">住户名</th>
<th class="flup_phone">联系电话</th>
<th class="flup_flag">标识</th>
<th class="flup_danger">危险</th>
<th class="flup_other">其它</th>
</tr>
</thead>
<tbody id="fset">

</tbody>
</table>
</div>

<p style="page-break-after: always;"> </p>

<div class="collect" style="border-width: 0; width: 29.7cm;">
<table class="fflup" style="border-collapse: collapse; word-wrap: break-word; word-break: break-all; border: 1px solid #3E80B0; margin: 1px auto; width: 29.5cm">
<caption><strong style="font-size: 1.5em; font-family: 黑体;">一览表</strong></caption>
<caption><span style="float: left;">入户时间:<span id="fflup_time"> </span></span><span style="float: right;">团队:第<span id="fflup_team_num"> </span>团队</span></caption>
<thead>
<tr>
<th class="fflup_name">姓名</th>
<th class="fflup_address">住户地址</th>
<th class="fflup_phone">联系电话</th>
<th class="fflup_flag">备注</th>
<th class="fflup_other">删除</th>
</tr>
</thead>
<tbody id="ffset">

</tbody>
</table>
</div>
</body>
</html>
回复

回到 “软件/网站开发”