打印如何实现分页以及设置打印指定区域

2023年1月2日 154次阅读 来源: 子非双鱼

打印如何实现分页

设置打印区域      style=”page-break-before:always”

   getReportData(requestParams, function (data) {
            if (data.length > 0) {
                let reportOperator = data[data.length-1];
                for (let i = 0; i < data.length - 1; i++) {
                    document.getElementById("top").innerHTML += ('<div style="page-break-before:always"> <iframe  class=\"iframe\" ' +
                        'src=\"/ureport/preview?_u=rptdesign:ucb_blood_type.ureport.xml&_t=0&barcode=' + data[i] + '&reportOperator=' + reportOperator +'&reportDate=' + getNowFormatDate() +
                        '\"></iframe> </div>');
                }
            }
        });

打印指定区域

将 不打印区域css 设置  .noPrint{ display:none}

    <style>
        @page {
            size: A4;
            margin: 0;
        }

        @media print {
            .noPrint {
                display: none;
            }
        }

        body, html {
            margin: 0;
            width: auto;
        }

        .iframe {
            width: 100%;
            margin-top: 50px;
            height: 800px;
            border: 0;
        }
    </style>
</head>
<body>
<div class="noPrint" style="margin-top: 40px;margin-left: 10px">
    <span style="margin-left: 180px">条码号开始：</span>
    <span><input id="barCodeBegin" type="text"></span>
    <span style="margin-left: 5px">条码号结束：</span>
    <span><input id="barCodeEnd" type="text"></span>
    <span style="margin-left: 10px;"><input style="width: 60px;background: #7ac23c" type="submit" value="查询"
                                            onclick="doSearch()"></span>
    <span style="margin-left: 10px;"><input style="width: 60px;background:red" class="noPrint" type="submit" value="打印"
                                            onclick="printPag()"></span>
</div>
<div id="top"></div>

</body>

 

    原文作者：子非双鱼
    原文地址: https://blog.csdn.net/qq_40192441/article/details/108884144
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞