通过window.print() 打印页面 及 遇到的坑

在IE11下 通过打印页面时候发现 bootstrap.Css文件会影响到window.print()的css样式,发生冲突 ，

解决方法：[这是在下的现在的看法，可能对于前段理解还不够，还未找到更好的方法]

1.style里覆盖bootstrap.css 里关于 print的代码

2.不用bootstrap

我是通过iframe来创建，自定义了样式 通过css，直接通过<style> 或者 标签上 都可以

要背景色等样式需要设置一下页面的浏览器。

 

 

<div>
    <button id="printBtn" type="button" style="width:110px;height:25px; 
        onclick="printPage()">打印</button>
    <iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>
</div>

var hkey_root, hkey_path, hkey_key;
hkey_root = "HKEY_CURRENT_USER";
hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; //网页打印时设置清空页眉页脚     
function setup_null() {
    try {
        var RegWsh = new ActiveXObject("WScript.Shell");
        hkey_key = "header";
        RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
        hkey_key = "footer";
        RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
    } catch (e) {}
}

function setup_default() { //网页打印时设置页眉页脚默认值        
    try {
        var RegWsh = new ActiveXObject("WScript.Shell");
        hkey_key = "header";
        RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&w&b页码，&p/&P");
        hkey_key = "footer";
        RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&u&b&d");
    } catch (e) {}
}

function doPrint(printDiv) {
    try {
        setup_null();
        newwin = window.open("", "newwin", "height=" + window.screen.height + ",width=" + window.screen.width +
            ",toolbar=no,scrollbars=auto,menubar=no");
        newwin.document.body.innerHTML = document.getElementById(printDiv).innerHTML;
        newwin.window.print();
        newwin.window.close();
        setup_default();
    } catch (e) {}
}

function printPage() { //获取当前页的html代码 
	$("#btnDiv").css("display","none");
    setup_null();
    bdhtml = window.document.body.innerHTML;
    sprnstr = "<!--start-->";
    eprnstr = "<!--end-->";
    printhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
    printhtml = printhtml.substring(0, printhtml.indexOf(eprnstr));
    f = document.getElementById('printf');
    f.contentDocument.write(printhtml); //写入到新的iframe窗口
    f.contentDocument.close();
    f.contentWindow.print(); //在新的iframe窗口调用浏览器打印机
    
    $("#btnDiv").css("display","block");
}

参考: https://www.cnblogs.com/30go/p/9788990.html