【HTML打印】HTML直接调用window下的打印机并执行打印任务（简单打印任务生成）
【HTML打印】HTML直接调用window下的打印机并执行打印任务（简单打印任务生成）
IT小马哥
发布于 2020-03-18 14:53:42
发布于 2020-03-18 14:53:42
今天有个朋友问我咋调用打印机,打印页面。
-----------------来自小马哥的故事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/page/index.css">
<title>window调用打印接口</title>
<style>
#pr{width:100px;height:40px;line-height:40px;text-align:center;background:#ccc;}
.box{width:600px; }
</style>
</head>
<body>
<div class="box">
<p>
<table style="width:100%;" cellpadding="2" cellspacing="0" border="1" bordercolor="#000000">
<tbody>
<tr>
<td colspan="6" style="text-align:center;">
物资出库信息
</td>
</tr>
<tr>
<td style="text-align:center;">
领料单号
</td>
<td style="text-align:center;">
<br />
</td>
<td style="text-align:center;">
<span>申请时间</span><br />
</td>
<td style="text-align:center;">
<br />
</td>
<td style="text-align:center;">
领料库房
</td>
<td style="text-align:center;">
<br />
</td>
</tr>
<tr>
<td style="text-align:center;">
<span>领料部门</span><br />
</td>
<td style="text-align:center;">
<br />
</td>
<td style="text-align:center;">
车辆编号
</td>
<td style="text-align:center;">
<br />
</td>
<td style="text-align:center;">
<br />
</td>
<td style="text-align:center;">
<br />
</td>
</tr>
<tr>
<td style="text-align:center;">
领料人
</td>
<td style="text-align:center;">
<br />
</td>
<td style="text-align:center;">
库管员
</td>
<td style="text-align:center;">
<br />
</td>
<td style="text-align:center;">
出库时间
</td>
<td style="text-align:center;">
<br />
</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">
备注
</td>
</tr>
<tr>
<td style="text-align:center;">
物质编号
</td>
<td style="text-align:center;">
<span>物质名称</span><br />
</td>
<td style="text-align:center;">
计量单位
</td>
<td style="text-align:center;">
物资单
</td>
<td>
<br />
</td>
<td>
<br />
</td>
</tr>
<tr>
<td>
<br />
</td>
<td>
<br />
</td>
<td>
<br />
</td>
<td>
<br />
</td>
<td>
<br />
</td>
<td>
<br />
</td>
</tr>
</tbody>
</table>
</p>
</div>
<div id="pr">点击打印</div>
</body>
</html>
<script>
function $(selector){
return document.querySelector(selector);
}
//获取整个页面
$("#pr").onclick =function(){
window.print();
}
/* 实现打印全部页面（也可以打印局部页面 - 看需求） ----
我是只打印baby里边的内容
获取我们定义的id
*/
$("#pr").onclick =function(){
var oldHtml = $("body").innerHTML;
var printbox = $(".box").innerHTML;
$("body").innerHTML = printbox;
window.print();
$("body").innerHTML = oldHtml;
}
</script> 我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=182do5sqcmvp7
本文由 小马哥 创作，采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读