最近在开发项目中,客户提出了一个需求,要求在后台系统可以打印出货的标签。
那该如何用代码实现在网页中局部打印废话不多说直接上代码
通过开始、结束标记(startprint、endprint)来实现局部打印
html代码:
<body>
<!--startprint--> //开始打印标识字符串
<div id="box" align="center">
<table id="taaaable" border="1" style="font-family:'微软雅黑';border:1px solid black;font-weight:600;" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" colspan="2"></td>
</tr>
<tr>
<td class="SUO wrap" style="width:30%">订单号:</td>
<td style="width:70%"><span class="orderNum01 SUO"></span></td>
</tr>
<tr>
<td class="SUO wrap" style="width:30%">文件名:</td>
<td style="width:70%"><span class="filename01 SUO"></span></td>
</tr>
<tr>
<td class="SUO wrap" style="width:30%">尺寸:</td>
<td style="width:70%"><span class="chicun SUO"></span></td>
</tr>
<tr>
<td class="SUO wrap" style="width:30%">订单数量:</td>
<td style="width:70%">
<input type="text" placeholder="请输入" id="PCBnum" class="shuru SUO" />
<span id="PCBnums" class="shuru SUO"></span>
</td>
</tr>
<tr>
<td class="SUO wrap" style="width:30%">包装数量:</td>
<td style="width:70%">
<input type="text" placeholder="请输入" id="num" class="shuru SUO" />
<span id="nums" class="shuru SUO"></span>
</td>
</tr>
<tr>
<td class="SUO wrap" style="width:30%">检验人:</td>
<td style="width:70%">
<input type="text" id="ren" placeholder="请输入" class="shuru SUO" />
<span id="rens" class="shuru SUO"></span>
</td>
</tr>
<tr>
<td class="SUO wrap" style="width:30%">出货日期:</td>
<td style="width:70%">
<%-- <input type="date" />--%>
<input type="text" placeholder="请输入" id="date" class="shuru SUO" />
<span id="dates" class="shuru SUO"></span>
<%-- <div id="date" class="SUO shuru"></div>--%>
</td>
</tr>
</table>
</div>
<!--endprint--> //结束打印标识字符串
<div id="showPrinws" style="position: fixed"><a href="/admin/other/label.aspx" onclick="printsPage();" style="color: white;" class="dy">打印</a></div>
</body>
js代码:
function printsPage() {
var bdhtml = window.document.body.innerHTML;
var sprnstr = "<!--startprint-->"; //开始打印标识字符串有17个字符
var eprnstr = "<!--endprint-->"; //结束打印标识字符串
var prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给body.innerHTML
window.print(); //调用浏览器的打印功能打印指定区域
window.document.body.innerHTML = bdhtml;//重新给页面内容赋值;
}
点击打印按钮出来的效果是这样:
但是问题就来了,客户在打印标签的时候,选择打印一张,但是会打出很多空白的标签。
像是这样:
一开始我一直觉得是自己代码的问题,客户提供的尺寸是70mmx40mm,我设置表格标签的大小也是70mmx40mm,最后发现不是代码的问题。而是在打印时,打印机纸张大小的问题。
操作步骤如下:
1.在控制面板中选择查看设备和打印机
2.选中打印机点击上面的打印服务器属性
3.在打印服务器属性的弹出框中设置好参数保存规格
4在打印机上右键,点击打印首选项
5.选择刚刚保存好的规格作为首选项
6.在项目的网页中就可以选择你刚刚设置规格的进行打印了