這個公司項目中的一個需求，效果是列印gmap裡一個彈出層的內容，由於頁面本身就已經有一個列印全頁內容的功能，本來是想能過改變列印樣式檔案來實現這個功能的，但發現如果使用者先列印這個彈出層的內容後，再列印全頁內容的時候，樣式檔案沒法變回原來的那個，也就是說沒法確定改回原來的那個樣式檔案的時間點，由於時間比較緊，所以用的是window.open方法實現的。現在項目接近尾聲，所以抽空寫了個iframe版的。這樣就沒用前面講到的問題了，也不用擔心使用者的瀏覽器屏蔽掉快顯視窗的問題了。
function printPartOfDocument() {this.init.apply(this, arguments)}printPartOfDocument.prototype = {init: function(o, part) {this.o = this.getId(o);this.part = this.getId(part);this.frame = '';this.printCss = '';var _this = this;this.addEvent(this.o, 'click',function() {_this.create()});},create: function() {var _this = this;if (!this.frame) {var oFrame = document.createElement('iframe');oFrame.setAttribute('id', 'printIframe');oFrame.style.position = 'absolute';oFrame.style.left = '-9999px';document.body.appendChild(oFrame);}if (!this.printCss) this.printCss = this.getPrintCss();setTimeout(function() {_this.frame = document.getElementById('printIframe'),d = _this.frame.contentWindow.document,h = d.getElementsByTagName('head')[0],b = d.getElementsByTagName('body')[0];for (var i = 0; i < _this.printCss.length; i++) {h.appendChild(_this.printCss[i]);}b.innerHTML = '';b.appendChild(_this.part.cloneNode(true));_this.frame.contentWindow.print();},0);},getPrintCss: function() {var styles = document.getElementsByTagName('head')[0].getElementsByTagName('link'),printCss = [];for (var i = 0; i < styles.length; i++) {var attr = styles[i].getAttribute('media');if (attr == 'all' || attr == 'print') printCss.push(styles[i].cloneNode(true));}return printCss;},getId: function(el) {return typeof el == 'string' ? document.getElementById(el) : el},addEvent: function(o, type, fn) {if (o.addEventListener) {o.addEventListener(type, fn, false)} else if (o.attachEvent) {o.attachEvent('on' + type,function() {fn.call(o, window.event)})}}}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><link href="global.css" rel="stylesheet" type="text/css"/><link href="print.css" rel="stylesheet" type="text/css" media="print" /><link href="print2.css" rel="stylesheet" type="text/css" media="all" /></head><body><a href="javascript:void(0)" title="print" id="print">print</a><div id="print_content"> <h1>只會列印這個div裡的內容，下面的層的內容不會被列印 </h1> <p>列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，列印測試文字，</p></div><div> <h1>這個層的內容不會被列印</h1> <p>這裡的內容不會被列印，這裡的內容不會被列印，這裡的內容不會被列印，這裡的內容不會被列印，這裡的內容不會被列印，</p></div><script type="text/javascript" src="printPartOfDocument.js"></script><script type="text/javascript">new printPartOfDocument('print','print_content');</script></body></html>
CSS:
print.css@charset "utf-8";/* CSS Document */body { background:#CCC;}print2.css：@charset "utf-8";/* CSS Document */body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#069;}div { color:#000; border:1px solid #ddd; margin:10px auto; padding:10px;}#print_content { border:1px solid red;},global.css自己隨便寫吧。
這個函數的思路通過js在頁面裡動態建立一個iframe標籤，然後將需要列印的內容clone到這個iframe裡面，再擷取頁面裡的media為”all”或者“print”的樣式檔案插入到iframe的head裡面，再將iframe約對定位，left:-9999px，達到在頁面上不顯示的目的。最後將這個iframe列印出來即可。由於考慮到需要列印的內容也是由js動態建立的，第二次列印的時候會將先前的內容清空。這個函數需求傳兩個參數，一是要執行列印事件的對象，二是指定要列印的內容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
