JS实现页面部分内容打印，兼容IE

陈四喜

于 2021-02-20 16:22:35 发布

阅读量648

点赞数 1

文章标签： js

原文链接：https://blog.csdn.net/lebron3v/article/details/81952594

版权

JS实现页面部分内容打印，兼容IE

需要打印当前页面部分内容时，我这里采用了 iframe的方式（不考虑替换当前页面内容，再还原的方式，问题较多）

在html代码中添加iframe：

<iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>

<script type="text/javascript">  
        function printPage() {  
            //获取当前页的html代码  
            var bodyhtml = window.document.body.innerHTML;  
            //设置打印开始区域、结束区域  
            var startFlag = "<!--startprint-->";  
            var endFlag = "<!--endprint-->";  
            // 要打印的部分  
            var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag),   
                    bodyhtml.indexOf(endFlag));  
            // 生成并打印ifrme  
            var f = document.getElementById('printf'); 
            f.contentDocument.write(printhtml);
            f.contentDocument.close();
            f.contentWindow.print();
        }  
    </script>

但是在使用过程中发现，chrome打印预览的页面是没有问题的，但是IE浏览器打印了当前页面，非我们需要的部分内容，即打印的是iframe的父页面

所以对iframe框架进行focus，考虑到火狐浏览器对 **window.frames[‘printf’].print();**的不兼容，有了以下代码：

var f = document.getElementById('printf'); 
  f.contentDocument.write(printhtml);
  f.contentDocument.close();
window.frames['printf'].focus(); 
try{
　　window.frames['printf'].print();　　
}catch{
        f.contentWindow.print();
}