前端JS打印功能
嘿嘿 小伙伴们以下代码直接 ctrl+C 复制到html页面即可打印
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面实现打印功能</title>
<style type="text/css">
body {
min-width: 1200px;
color: #333;
}
.table-wrp{
border: 1px solid #000000;
}
#check_list {
border: 1px solid #000000;
border-width: 1px 0 0;
margin:50px 0;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
word-break: break-all;
word-wrap: break-word;
}
.table-wrp .table th {
font-weight: 400;
text-align: left;
background: #fafafa;
color: #f00;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
#check_list th, #check_list td {
padding: 13px 0;
text-align: center;
border-bottom: 1px solid #000000;
}
#check_list th:not(:first-child), #check_list td:not(:first-child) {
border-left: 1px solid #000000 !important;
}
</style>
</head>
<body>
<div id="page">
<div class="bt" style="width:1000px; margin:0 auto; margin-bottom:20px;">
<button onclick="pu.doPrint()" class="noprint">打印</button>
</div>
<!--startprint-->
<div class="table-wrp" style="width:1000px; margin:0 auto;">
<table class="table" id="check_list">
<thead>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">物品名称</th>
<th rowspan="2">型号规格</th>
<th rowspan="2">单位</th>
<th rowspan="1" colspan="3" style="text-align: center">账存</th>
<th rowspan="2">盘点数量</th>
<th rowspan="1" colspan="2" style="text-align: center">盘盈（+）盘亏（-）</th>
<th rowspan="2" style="min-width: 150px;">差异说明</th>
<th rowspan="2" colspan="2">盘点月份</th>
</tr>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td name="inventory_id">14</td>
<td name="warehouse_goods_name">矿泉水</td>
<td name="benchmark_specification">箱</td>
<td name="benchmark_unit">瓶</td>
<td name="zc_number">1</td>
<td name="zc_price">2</td>
<td name="zc_money">2</td>
<td name="physical_inventory">1</td>
<td name="py_pk_number">-499</td>
<td name="py_pk_money">-998</td>
<td name="differences_that">1</td>
<td name="inventory_month">2019-12</td>
</tr>
<tr>
<td name="inventory_id">13</td>
<td name="warehouse_goods_name">冰红茶</td>
<td name="benchmark_specification">瓶</td>
<td name="benchmark_unit">瓶</td>
<td name="zc_number">2</td>
<td name="zc_price">5</td>
<td name="zc_money">10</td>
<td name="physical_inventory">2</td>
<td name="py_pk_number">-338</td>
<td name="py_pk_money">-1690</td>
<td name="differences_that">2</td>
<td name="inventory_month">2019-12</td>
</tr>
<tr>
<td name="inventory_id">12</td>
<td name="warehouse_goods_name">被套</td>
<td name="benchmark_specification">件</td>
<td name="benchmark_unit">件</td>
<td name="zc_number">3</td>
<td name="zc_price">40</td>
<td name="zc_money">120</td>
<td name="physical_inventory">3</td>
<td name="py_pk_number">-257</td>
<td name="py_pk_money">-10280</td>
<td name="differences_that">3</td>
<td name="inventory_month">2019-12</td>
</tr>
</tbody>
</table>
</div>
<!--endprint-->
</div>
</body>
</html>
<script>
var pu = {
doPrint:function() {
bdhtml=window.document.body.innerHTML; //获取当前页的html代码
sprnstr="<!--startprint-->"; //设置打印开始区域
eprnstr="<!--endprint-->";//设置打印结束区域
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);//从开始代码向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
}
}
</script>
扫一扫
5121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
