最近遇到,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请求返回界面。