iframe打印信息

xingxing12323

已于 2022-04-12 09:57:59 修改

阅读量1.7k

点赞数

分类专栏： # html 文章标签： javascript html 前端

于 2022-03-17 13:20:10 首次发布

本文链接：https://blog.youkuaiyun.com/xingxing12323/article/details/123547739

版权

html 专栏收录该内容

2 篇文章

订阅专栏

html页面利用iframe打印信息

html内容
js 内容

html内容

<div id="xxx" style="display: none;"><iframe id='printID'><html><head></head><body></body></html></iframe></div>
<button onclick="printIframe('张三','371581199302142345');">点我</button>

js 内容

	//IE打印回调信息。
	function iePrintcb(arg) {
        arg.print();
        document.getElementById("xxx").style.display = "none";
    }
    /*打印信息。*/
    function printIframe(name,idcard) {
        //向iframe插入一个内容，供打印
        var iframe = document.getElementById("printID");
        var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
        var content = "<div>"+name+"<br>"+idcard+"</div>";
        iframedoc.body.innerHTML = content ;

        //区分浏览器，选择调用的处理方法
        if(navigator.userAgent.toUpperCase().indexOf("TRIDENT")!=-1){
            //IE必须让iframe在页面展示，并且focus后才能打印
            document.getElementById("xxx").style.display = "block";
            //ie必须focus以后才能打印。
            window.frames["printID"].focus();
            //给机器一个20毫秒的等待时间。确保光标能够focus
            setTimeout(iePrintcb,20,window.frames["printID"]);
        }else{
            iframe.contentWindow.print();
        }
    }