网页局部打印以及如何设置打印机纸张大小

最新推荐文章于 2024-04-24 09:27:42 发布

en911

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量2.3k

点赞数 7

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_56281383/article/details/127446668

版权

最近在开发项目中，客户提出了一个需求，要求在后台系统可以打印出货的标签。

那该如何用代码实现在网页中局部打印废话不多说直接上代码

通过开始、结束标记（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;//重新给页面内容赋值；
        }

点击打印按钮出来的效果是这样：