Web打印解決方案之普通報表打印功能
做過很多的Web項目,大多數(shù)在打印頁面內(nèi)容的時候,采用的都是通過Javascript調(diào)用系統(tǒng)內(nèi)置的打印方法進(jìn)行打印,也就是調(diào)用PrintControl.ExecWB(?,?)實現(xiàn)直接打印和打印預(yù)覽功能。打印的效果及控制性雖然不是很好,但是也能勉強使用,應(yīng)付一般的打印還是可以的了。
代碼如下所示:
代碼
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->//調(diào)用PrintControl.ExecWB(?,?)實現(xiàn)直接打印和打印預(yù)覽功能。(直接用系統(tǒng)提供的print()方法打印無法隱藏某些區(qū)域) //preview:是否顯示預(yù)覽。null/false:不顯示,true:顯示 function printPage(preview) { try { var content=window.document.body.innerHTML; var oricontent=content; while(content.indexOf("{$printhide}")>=0) content=content.replace("{$printhide}","style='display:none'"); if(content.indexOf("ID=\"PrintControl\"")<0) content=content+"<OBJECT ID=\"PrintControl\" WIDTH=0 HEIGHT=0 CLASSID=\"CLSID:8856F961-340A-11D0-A96B-00C04FD705A2\"></OBJECT>"; window.document.body.innerHTML=content; //PrintControl.ExecWB(7,1)打印預(yù)覽,(1,1)打開,(4,1)另存為,(17,1)全選,(10,1)屬性,(6,1)打印,(6,6)直接打印,(8,1)頁面設(shè)置 if(preview==null||preview==false) PrintControl.ExecWB(6,1); else PrintControl.ExecWB(7,1); //OLECMDID_PRINT=7; OLECMDEXECOPT_DONTPROMPTUSER=6/OLECMDEXECOPT_PROMPTUSER=1 window.document.body.innerHTML=oricontent; } catch(ex){ alert("執(zhí)行Javascript腳本出錯。"); } } function printConten(preview, html) { try { var content=html; var oricontent=window.document.body.innerHTML; while(content.indexOf("{$printhide}")>=0) content=content.replace("{$printhide}","style='display:none'"); if(content.indexOf("ID=\"PrintControl\"")<0) content=content+"<OBJECT ID=\"PrintControl\" WIDTH=0 HEIGHT=0 CLASSID=\"CLSID:8856F961-340A-11D0-A96B-00C04FD705A2\"></OBJECT>"; window.document.body.innerHTML=content; //PrintControl.ExecWB(7,1)打印預(yù)覽,(1,1)打開,(4,1)另存為,(17,1)全選,(10,1)屬性,(6,1)打印,(6,6)直接打印,(8,1)頁面設(shè)置 if(preview==null||preview==false) PrintControl.ExecWB(6,1); else PrintControl.ExecWB(7,1); //OLECMDID_PRINT=7; OLECMDEXECOPT_DONTPROMPTUSER=6/OLECMDEXECOPT_PROMPTUSER=1 window.document.body.innerHTML=oricontent; } catch(ex){ alert("執(zhí)行Javascript腳本出錯。"); } }
上面兩個函數(shù)放在一個Js文件中,在頁面內(nèi)容中通過應(yīng)用該腳本文件并調(diào)用進(jìn)一步封裝的函數(shù)即可打印指定部分的內(nèi)容:
<script language="javascript"> function Print(preview) { var text = document.getElementById("content").innerHTML; printConten(preview, text); }
打印的效果大致如下圖所示,如果打印的頁面在框架頁面中,那么需要選定“僅打印選定框架”的選項。
采用此種方法,不需要安裝任何控件,具有很好的兼容優(yōu)勢,不過出來的報表內(nèi)容,好像控制起來會比較麻煩一些,特別對于一些報表方面的打印,需要輸出復(fù)雜的內(nèi)容是,也有一定的缺陷,但總體來說,也是一個較好的選擇。
后來在需要做一些證件套打方面的工作,這個控件就做不到了,因此需要一種方法或者控件,能夠較好處理套打方面的事情。
無意間,發(fā)現(xiàn)一個比較好的打印控件,支持各種格式的打印,還有我關(guān)心的證件套打功能,功能強大,使用也很簡單的,非常值得推薦。
應(yīng)用這個控件,普通報表的打印效果如下所示:
上面兩個報表的打印其實都差不多,都是打印部分的HTML內(nèi)容,不過后者看起來要好一點,而且提供很完善的報表功能設(shè)置。
代碼大致如下所示。
代碼
<script language="javascript"> function Print(preview) { var text = document.getElementById("content").innerHTML; printConten(preview, text); } </script> <script language="javascript" src="http://www.cnblogs.com/Scripts/CheckActivX.js"></script> <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> </object> <script language="javascript"> var LODOP = document.getElementById("LODOP"); //這行語句是為了符合DTD規(guī)范 CheckLodop(); </script> <script language="javascript" type="text/javascript"> function Preview() {//打印預(yù)覽 CreateLicenseData(); LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1); LODOP.PREVIEW(); }; function Setup() {//打印維護(hù) 給用戶調(diào)整位置 CreateLicenseData(); LODOP.PRINT_SETUP(); }; function Design() {//打印設(shè)計 開發(fā)人員設(shè)置內(nèi)容和位置 CreateLicenseData(); LODOP.PRINT_DESIGN(); }; function CreateLicenseData() { LODOP.PRINT_INIT("查詢報表"); LODOP.ADD_PRINT_HTM(20, 40, 610, 900, document.all("content").innerHTML); LODOP.PREVIEW(); } </script>
很多時候,我們也沒的內(nèi)容,都是通過CSS來控制美觀的,所以有時候,我們打印部分HTML,沒有這些樣式的話,那么出來的Table格式和字體,可能都會發(fā)生變化,不太好看。那么就需要進(jìn)行HTML的樣式設(shè)置。
如果給打印內(nèi)容設(shè)置了樣式,那么出來的界面效果就好很多了。
設(shè)置樣式的代碼如下所示。
代碼
<script language="javascript" type="text/javascript"> function Preview() {//打印預(yù)覽 CreateLicenseData(); LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1); LODOP.PREVIEW(); }; function CreateLicenseData() { LODOP.PRINT_INIT("申請?zhí)幚韱?); var strBodyStyle = "<link type='text/css' rel='stylesheet' /><style><!--table { border:1;background-color: #CBCBCC } td {background-color:#FFFFFE;border: 1; } th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>"; var strFormHtml = strBodyStyle + "<body>" + document.getElementById("content").innerHTML + "</body>"; LODOP.ADD_PRINT_HTM(20, 40, 610, 900, strFormHtml); LODOP.PREVIEW(); } </script>
以上所述是小編給大家介紹的Web打印解決方案之普通報表打印功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級數(shù)據(jù)格式,可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對象有兩個方法:stringify()和parse()。在簡單的情況下,這兩個方法分別可以將JavaScript序列化為JSON字符串,以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項。2021-05-05分享js粘帖屏幕截圖到web頁面插件screenshot-paste
這篇文章主要為大家分享了js粘帖屏幕截圖到web頁面插件screenshot-paste的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03JavaScript之面向?qū)ο骭動力節(jié)點Java學(xué)院整理
JavaScript的面向?qū)ο缶幊毯痛蠖鄶?shù)其他語言如Java、C#的面向?qū)ο缶幊潭疾惶粯?。下面通過本文給大家介紹js面向?qū)ο笾R,包括面向?qū)ο蟮膬蓚€基本概念,一起看看吧2017-06-06BootStrap Table復(fù)選框默認(rèn)選中功能的實現(xiàn)代碼(從數(shù)據(jù)庫獲取到對應(yīng)的狀態(tài)進(jìn)行判斷是否為選中狀態(tài))
本文通過實例代碼給大家介紹了BootStrap Table復(fù)選框默認(rèn)選中功能(從數(shù)據(jù)庫獲取到對應(yīng)的狀態(tài)進(jìn)行判斷是否為選中狀態(tài)),代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-07-07網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js
網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js...2007-05-05