请教大虾们一个问题,谢谢

pandarsok2000 2020-09-15 06:54:36
弹窗打印,但是弹窗中显示不了滚动条,不知道要怎么写,而且这种页面打印写法只支持IE,不知道有没有更好的兼容写法,谢谢了




<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>准考证打印</title>
<style type="text/css">
#sfzh {
font-family: Arial Black;
}
#wxtszw {
font-size: 14px;
line-height: 25px;
}
</style>
<style type="text/css">

#xbg1 {
border-collapse:collapse;
}
#xbg2 {
border-collapse:collapse;
}
#zw {
font-size: 15px;
}
#link {
color: #999;
text-decoration: none;
font-size: 14px;
}



</style>
</head>

<body>
<div id="print_id">

<table width="640" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td align="right"> </td>
</tr>
<tr>
<td align="center"><span style="text-align:center; font-size:24px; font-weight:bolder; line-height:40px;">XXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
</table>
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0" BGcolor="#000000" style="BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid;color:#FFFFFF;BORDER-top: #000000 1px solid; BORDER-bottom: #000000 1px solid;color:#FFFFFF">
<tr>
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" id="xbg1" style="border-collapse:collapse">
<tr bgcolor="#FFFFFF">
<td width="80" height="40" align="center">姓名</td>
<td width="130" height="40" style="padding-left:15px;"><strong>XXX</strong></td>
<td width="70" align="center" style="padding-left:5px;">性别</td>
<td width="35" align="center" style="padding-left:10x;"><strong>男</strong></td>
<td width="80" align="center" style="padding-left:5px;">出生年月</td>
<td width="100" align="center" style="padding-left:2px;"><strong>1980-02-14</strong></td>
<td width="90" rowspan="4" align="center" style="padding-left:8px;">贴一寸照处</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="80" height="40" align="center">准考证号</td>
<td width="130" height="40" style="padding-left:15px;"><strong>3302018390009</strong></td>
<td width="70" style="padding-left:15px;">身份证号</td>
<td colspan="3" id="sfzh" style="padding-left:15px;">330227198002147537</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="80" height="40" align="center">考试时间</td>
<td height="40" colspan="5" style="padding-left:15px;"><strong>2018年11月9日 10:00</strong></td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="80" height="40" align="center">考试地点</td>
<td height="40" colspan="5" style="padding-left:15px;"><strong>XXXXXXXXXXXXXXX</strong></td>
</tr>
</table>

</td>
</tr>
</table>
<table width="670" align="center" bgcolor="#333333" border="0" cellpadding="0" cellspacing="0" style="margin-top:30px;">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:14px;">
<tr bgcolor="#FFFFFF">
<td bgcolor="#FFFFFF" style="text-align:left; font-size:14px; font-weight:bolder; line-height:35px;"> <strong>温馨提示:</strong></td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left"><p id="wxtszw">
1. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。<br>
2. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。<br>
3.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。<br>
4. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
<strong>XXXXXXXXXXXXX:</strong><br>
1. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<Br>
2.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
3. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
4. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
5. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
6. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
7. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
8. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
</tr>
</table></td>
</tr>
</table>
</div>
<div style="text-align: width:730px;">
<br>
<table width="660" border="0" align="center">
<tr>
<td width="545" id="dyw"><a href="javascript:window.close()" id="link">打印完请及时关闭本页面</a></td>
<td width="85" align="right"><a href="javascript:doPrint(this.document.getElementById('print_id').innerHTML);" style="font-size:14px; color:#000; text-decoration:none;">【确认打印】 </a></td>
</tr>
</table>
</div>


<script language="JavaScript" type="text/JavaScript">
<!--
function doPrint(_html) {
if (window.print)
{
// var Div1 = this.document.getElementById("Holder");
//var Div2 = document.all.Div2.innerHTML;
// *****************************************************
// Div1、Div2即为你在打印的区域
// 这里根据你要打印的哪些内容,从原显示页面中用
// <div id=Div1>Div1.</div><div id=Div2>Div2</div>
// 等标示出来,要打印多少项目就标示多少
// *****************************************************
var css = '<style type="text/css" media=all>' +
'p { line-height: 120%}' +
'.ftitle { line-height: 120%; font-size: 18px; color: #000000}' +
'td { font-size: 15px; color: #000000}' +
'</style>' ;
// *****************************************************
// 定义打印用的CSS,具体你想打印出什么样的格式全看你自己
// 了,但要注意:如果此处有什么同网页中不一致的,可能打印
// 出来的页面同网页格式、字体可能会有所不同
// *****************************************************
var body ='<table width="100%" align="left" border="0" cellspacing="2" cellpadding="5">' +
' <tr> ' +
' <td class="fbody"> ' +
' <div align="left" class=ftitle>' + _html + '</div>'+
' </td>' +
' </tr>' +
'</table>';
// ******************************************************
// 在此处重新设置的打印格式,根据你的打印要求,将原显示的
// 网页的DIV内容重新组合,可以根据你原来的表格内容,去掉
// 不要打印的,你也可以能下面定义的noprint忽略掉你不想打
// 印的东西,只调用你要打印的内容,但这样被忽略掉的地方将
// 打印出空,不是很美观。表格宽度要同打印的纸张宽度匹配。
// ******************************************************
//var oldBody=document.body.innerHTML;
document.body.innerHTML = '<center>' + css + body + '</center>';
// ******************************************************
// 重设document.body,打印文档准备就绪
// ******************************************************
window.print();
window.history.go(0);
//document.body.innerHTML=oldBody;
// ******************************************************
// 调用打印命令,打印当前窗口内容。当你打印时其实是一张新
// 的网页了,但网页文件还是原先的。紧接着调用
// window.history.go(0),再回到打印前的页面,效果相当不差
// ******************************************************
}
}
-->
</script>

</body>
</html>



...全文
2019 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
尚稻山 2020-09-16
  • 打赏
  • 举报
回复
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
/*网页打印下的样式 用于隐藏一些不用打印的元素*/
@media print {
.no-print {
display: none;
}
}
</style>
<body>
<div style="text-align: center">
<span style="font-size: 2em">准考证</span>
<span>你写得太复杂了。。</span>
</div>
<div style="text-align: center">
<button class="no-print" style="margin:" onClick="window.print();">打印</button>
</div>
<!--可用于所有自带打印功能的浏览器-->
</body>
</html>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧