2014年7月2日 星期三

於新視窗列印目標 DIV， 並保有CSS格式


工程蝨日前接到任務
網頁要有友善列印功能 
(都提供EXCEL下載給你們了…)
出錢的是老大 只好… 都給你們啦



在網路上找到幾篇相關的文章
都不符工程蝨的需求

直接把整個 body 替換成 div 的 html code 內容
完美列印，太漂亮了
列印完再把原本的body填回去
疑…?    我的 button 全死了

好吧 window.open() 開個新頁
把 div 丟過去
嗯…    沒有CSS 
真的是場…  災難


以下是工程蝨的解法 (需使用JQuery)
JavaScript Code
        function printpage(myDiv) {                        //隱藏不列印的元件(class="noprint")            $('.noprint').hide();
            //建立網頁複本            var $copyhtml = $("html").clone();            //複製css link            var $copycss = $copyhtml.find('head').find('link');            //複製css style            var styles = $copyhtml.find('head').html().match(/<style.*?>[\s\S]*?<\/style>/ig);            //清空head，填入css            $copyhtml.find('head').empty().append($copycss).append(styles);            //移除script            $copyhtml.find('script').remove();            //複本中替換body為目標div            $copyhtml.find('body').html($copyhtml.find('#' + myDiv).html());            //IE瀏覽器第一次載入時refresh頁面，確保完整套用樣式            $copyhtml.find('body').append(                '<script>'                 + 'if(!window.location.hash && navigator.userAgent.match("MSIE")) {'                + 'window.location = window.location + \'#loaded\';window.location.reload(); } '                + 'else { window.print(); setTimeout("window.close();",100); } '                             + '<\/script>'                );   
            //開新視窗，寫入HTML語法            var printPage = window.open("", "printPage");            printPage.document.open();            printPage.document.write("<html><head>");            printPage.document.write($copyhtml.find('head').html());            printPage.document.write("</head><body>");            printPage.document.write($copyhtml.find('body').html());            printPage.document.close("</body></HTML>");                        //復原隱藏的元件            $('.noprint').show();
            return false;        }
目前測試於chrome及IE都正常，FireFox嘛…  
FireFox是什麼 可以吃嗎?
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)