最近在开发项目中，客户提出了一个需求，要求在后台系统可以打印出货的标签。
那该如何用代码实现在网页中局部打印废话不多说直接上代码
通过开始、结束标记（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.innerHTMLwindow.print(); //调用浏览器的打印功能打印指定区域window.document.body.innerHTML = bdhtml;//重新给页面内容赋值；}
点击打印按钮出来的效果是这样：
但是问题就来了，客户在打印标签的时候，选择打印一张，但是会打出很多空白的标签。
像是这样：
一开始我一直觉得是自己代码的问题，客户提供的尺寸是70mmx40mm，我设置表格标签的大小也是70mmx40mm，最后发现不是代码的问题。而是在打印时，打印机纸张大小的问题。
操作步骤如下：
1.在控制面板中选择查看设备和打印机
2.选中打印机点击上面的打印服务器属性
3.在打印服务器属性的弹出框中设置好参数保存规格
4在打印机上右键，点击打印首选项
5.选择刚刚保存好的规格作为首选项
6.在项目的网页中就可以选择你刚刚设置规格的进行打印了
如果觉得《网页局部打印以及如何设置打印机纸张大小》对你有帮助，请点赞、收藏，并留下你的观点哦！
