彈窗列印，但是彈窗中顯示不了滾動條，不知道要怎么寫,而且這種頁面列印寫法只支持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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/49644.html
標籤：JavaScript
上一篇：萌新求指點，這道題不會寫
下一篇：能在微信小程式上實作地圖可視化嗎