使用iframe不跳转页面直接弹出打印框

使用iframe 不跳转页面直接弹出打印框

打开模板页可以直接跳出打印，也可以在主页面通过点击事件使用iframe调用模板页面

主页面

<button type="button" id="printBtn">打印</button>
<iframe frameborder="0" src="" id="printFrame" style="width: 0;height: 0;"></iframe>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#printBtn").click(function() {
        $("#printFrame").attr('src', 'demo.html？id='+1);
    })
</script>

模板所在页面

<div class="main-box">
    <img id="barcode" />
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 转换一维码的插件 之前有写最简单的使用方法 https://blog.csdn.net/weixin_45810581/article/details/109404052 -->
<script src="JsBarcode.all.js"></script>
<script>
	function request(paras) {
        var url = location.href;
        var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
        var paraObj = {}
        for (i = 0; j = paraString[i]; i++) {
            paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
        }
        var returnValue = paraObj[paras.toLowerCase()];
        if (typeof(returnValue) == "undefined") {
            return "";
        } else {
            return returnValue;
        }
    }
    // 获取iframe传过来的值(也可作用于页面跳转获取传值)
    var id = request("id");
    
    var dataList = [10086, 12306, 12315, 12122]
    var printHtml = "";
    printHtmls = creatTB(dataList);
    function creatTB(checkMsg) {
        var html = "";
        for (i = 0; i < checkMsg.length; i++) {
            $("#barcode").JsBarcode(checkMsg[i]);
            html = html + $(".main-box").prop("outerHTML")
            //进行分页
            html = html + "<div id='page1' style='height:111px;page-break-after:always'></div>";
        }
        return html;
    }
    window.document.body.innerHTML = printHtmls; //需要打印的页面 
    setTimeout(function() {
        window.print();
        // location.reload();
    }, 500);
</script>