js浏览器打印指定div
2020-07-24
加入收藏
1 页面
2 打印
3 关键代码
<script language="JAVAscript">
function printdiv(printpage) {
var headstr = '<html><head><title>销售发货单</title></head><body>';
var footstr = "</body>";
var newstr = document.getElementById(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
console.log(headstr + newstr + footstr)
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
完整代码如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<script language="JavaScript">
function printdiv(printpage) {
var headstr = '<html><head><title>销售发货单</title></head><body>';
var footstr = "</body>";
var newstr = document.getElementById(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
console.log(headstr + newstr + footstr)
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<h1>div前</h1>
<div id="div_print">
<div style="line-height: 30px; color:#000;" class=size16 align=center>
<strong>销售发货单-01</strong></div>
<table border=0 cellspacing=0 cellpadding=0 width="100%">
<tbody>
<tr>
<td width="43%">所在店铺：<span>XYZ-专卖店</span></td>
<td width="33%">发货单号：<span>2020050810372</span></td>
<td>快递单号：</td>
</tr>
<tr>
<td>收 件 人：<span>小明</span></td>
<td>网店单号：<span>74235823905643</span</td>
<td>发货日期：2020-5-10</td>
</tr>
<tr>
<td>电话号码：<span>13935429860 </span></td>
<td>收件人id：<span>小李飞刀</span></td>
<td> </td>
</tr>
</tbody>
</table>
<table border=1 cellspacing=0 cellpadding=1 width="100%" style="border-collapse:collapse" bordercolor="#333333">
<thead>
<tr>
<td width="10%">
<div align=center><b>表格页眉</b></div>
</td>
<td width="25%">
<div align=center><b>品名</b></div>
</td>
<td width="10%">
<div align=center><b>颜色</b></div>
</td>
<td width="10%">
<div align=center><b>规格</b></div>
</td>
<td width="10%">
<div align=center><b>数量</b></div>
</td>
<td width="15%">
<div align=center><b>单价</b></div>
</td>
<td width="20%">
<div align=center><b>金额</b></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td>名称01</td>
<td>浅灰色</td>
<td>185/10</td>
<td>1</td>
<td>248.00</td>
<td>248.00</td>
</tr>
<tr>
<td> 2</td>
<td>名称02</td>
<td>浅灰色</td>
<td>185/10</td>
<td>1</td>
<td>248.00</td>
<td>248.00</td>
</tr>
<tr>
<td> 3</td>
<td>名称03</td>
<td>浅灰色</td>
<td>185/10</td>
<td>1</td>
<td>248.00</td>
<td>248.00</td>
</tr>
<tr>
<td> 4</td>
<td>名称04</td>
<td>浅灰色</td>
<td>185/10</td>
<td>1</td>
<td>248.00</td>
<td>248.00</td>
</tr>
</table>
<input name="btn_print" type="button" onclick="printdiv('div_print');" value="打印" align=center>
</div>
<h1>div后</h1>
</body>
</html>
