問題:
使用window.print();打印頁面,將不需要的數據隱藏,將需要的數據顯示,打印完成之后將剛才隱藏的數據還原,顯示的數據隱藏,
谷歌瀏覽器、部分ie能一氣呵成, 火狐瀏覽器以及少數ie瀏覽器出現了:執行到window.print();時后面的js還未開始執行,類似與alert的阻塞,要等到用戶點完頁面彈出的打印框才會執行,這樣導致隱藏的數據沒有顯示,顯示的數據沒有隱藏,
解決辦法:
網上找了很多種方法,
https://segmentfault.com/a/1190000006236133
這個鏈接里有寫使用ifrme作為打印的頁面
<table align="center" class="ml70"> <tbody> <tr> <td colspan="8"> <div align="center"> <b><span >不打印的內容部分//////////////////////</span></b></div> <div> </tr> </tbody> </table> <a href="#" onclick="javascript:history.back(1); event.returnValue=false"> << 返回</a><br /> <!--startprint--> <br /> <table align="center" class="ml70"> <tbody> <tr> <td colspan="8"> <div align="center"> <b><span >//////////////////////要打印的內容部分//////////////////////</span></b></div> <div> </tr> </tbody> </table> <!--endprint--> <input type="button" value="打印" onClick="printPage()" /> <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>
但是使用這個方法,在ie瀏覽器下, f.contentWindow.print();打印的是iframe的父頁面,
如何解決ie中iframe的打印呢, 繼續找!
https://yq.aliyun.com/ziliao/69150
ie情況下 printf 為打印的iframe的id
window.frames['printf'].focus();
window.frames['printf'].print();
但是使用這個方法在火狐瀏覽器中直接保錯
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(); }
解決!
