兼容IE浏览器的PrintArea

最新推荐文章于 2020-12-21 05:14:01 发布

原创最新推荐文章于 2020-12-21 05:14:01 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#PrintArea #IE兼容

本文介绍了一种兼容IE与Chrome的打印预览方案，通过判断浏览器类型选择不同的打印方式。对于IE浏览器，采用新开窗口模拟打印预览；对于Chrome浏览器，则直接使用内置打印功能。

最近遇到，PrintArea在Chrome中有打印预览，在IE中并不会有打印预览，但是又必须对IE兼容，IE浏览器必须和对方提供的思路完全一致（IE中使用右键打印）。故更改了一下打印方式。

1 原有chrome打印。

（1）引入Jquery框架后，由于打印的一种选项中是选中ifream，先写个ifream

 <iframe class="CenterBox" id="frame" style="overflow-x:hidden"></iframe>

（2）然后向ifream中填充内容，采用的是点击按钮的形式进行加载，

    function YuLan(recID) {
            $(".CenterBox").attr("src", "ChkView/YuLan?RecID=" + recID);
        }

（3）写个打印按钮

<button class="btn btn-primary" type="button" onclick="Print()">打印</button>

由此触发打印

（4）打印方法：

    function Print() {
            var iframe = document.getElementById('frame');
            //iframe.contentWindow.document.getElementById('printBox').style.overflow = 
              //"inherit";
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
        }

-------------------------------------------------------------------------------------------------------------------------------

使用PrintArea在IE浏览器会直接进入打印选项，并不能进行预览，客户要求必须按照他自己做的程序实现：点击打印，转到打印预览，右键进行打印。故选择了新打开一个预览界面，来模拟打印预览。为了保证Chrome的体验，判断当前浏览器是Chrome还是IE。先来demo。

（1）

function isIE(){

  if (window.navigator.userAgent.indexOf("MSIE")>=1)

  return true;

   else

   return false;

}

e10及以上不支持ie浏览器的判断了，因为ie11已经不支持document.all了，下面是支持ie11的版本的，当然ie6-8也是支持的

function isIE() { //ie?

 if (!!window.ActiveXObject || "ActiveXObject" in window)

  return true;

  else

  return false;

 }

注：判断IE部分来自：http://www.jb51.net/article/76296.htm

那么接下来就可以写判断了。上代码：

     function Print() {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
               
                var iframe = document.getElementById('frame');
                var src = $(iframe).attr("src");
                var url = window.location.href;
                var usedUrl = url.substring(0, url.indexOf("CCheck"));
                var thisUrl = usedUrl + "CCheck/" + src + "";
                window.open(thisUrl);
            }
            else {
                var iframe = document.getElementById('frame');
                iframe.contentWindow.focus();
                iframe.contentWindow.print();
            }
        }

修改了原Print（）方法，如果不是IE浏览器，使用原方法，如果是IE浏览器，获得ifream 并获取其src。

截取、拼接Url，使用windows.open(thisUrl)直接打开新页面。

注：需要打印的页面，可以直接拼接Url就可以打开，也就是使用get请求返回界面。