通過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