首先,說說文章的背景。最近手中的一個項目,因爲需求中要求提供Web界面的打印功能,固然若是沒有打印機,還能夠提供保存到本地。項目組長把這個「小任務」分給了我。本着努力爲組長分憂解難的思想,領了任務以後,就立刻開始了工做。javascript
剛開始的時候,組長給了一個工具(jatoolsprinter)讓我研究,我用了一個多小時的時間,作出了一個簡單的Demo,而後就是各類的測試,因爲 web 打印須要瀏覽器安裝 ActiveX 組件,在隨後的測試中,我用了幾款瀏覽器,甚至把安全級別都調到了最低的要求, ActiveX 組件的安裝老是不成功,以後的幾個小時也在一直調這個問題。終於,它打破了我耐心的底線,就這樣被我「無情」的給拋棄了。html
吃過晚飯回來以後,我就開始走上了尋找新大陸的征途中,還好,個人運氣不錯,web 打印這個功能仍是很經常使用的。很快我就有了一個新的解決方案。在簡單的瞭解了一下官方的說明以後,找了一個文檔看了看,此次我吸收了上次的教訓,我先把官方提供的插件製做成了 CAB,並且立刻就展開了測試,經過測試,我發現這一款工具在各版本瀏覽器的兼容性表現仍是不錯的,至於功能方面,我須要的他都提供了,並且額外的功能也是不少的,足夠咱們開發使用了。對了,不得不提的是,他對瀏覽器安裝 ActiveX 組件還提供了另一種方法,首先檢測有沒有安裝插件,未檢測到插件時,自動提示,並給出下載插件的地址,這裏的插件使用的是 exe 格式的,這樣就避免了瀏覽器安全設置的問題。java
組件名稱:Lodop(提供下載)web
須要引入的文件:lodop.cab(本身製做的)、LodopFuncs.js(必須的)、install_lodop32.exe(可選的,官方提供的exe格式插件)瀏覽器
須要在頁面中加入對象引用安全
點擊安裝以後,瀏覽器就會自動的安裝,而後就能夠看到下面的提示了。app
首先是打印功能ide
<span style="font-family:Microsoft YaHei;font-size:12px;"><html> <head> <title>測試Web頁面打印功能</title> </head> <style> .title { font-family: Arial, Vernada, Tahoma, sans-serif; font-size: 30px; color: #00008B; background-color: White; text-decoration: underline } .normal { font-family: Arial, Vernada, Tahoma, Helvetica, sans-serif; font-size: 14px; color: #444444; text-decoration: none; line-height: 180%; } #page1 div { font-size: 12px;font-family:Arial; } .tab1{border:solid 1px #bbd4e8;} .tab1 td,th {border:solid 1px #bbd4e8;font-size: 12px;font-family:Arial;line-height:21px;text-align:center} .tab1 td.tdnumber{text-align:right} .tab1 #lastPageFooter td,.tab1 #everyPageFooter td{text-align:left} .tab1 .green {color:#090} .tab1 .red{color:red} #myEveryFooter,#myLastFooter{display:none;color:#0066cc;font-weight:700;background-color:#e8f2fe} span.src{font-size:9pt;margin-left:100px;} </style> <object classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" codebase="lodop.cab#version=5,0,5,7" width=200 height=50 > </object><br/> <body> <input type="button" value="打印預覽" onClick="prn1_preview();"> <input type="button" value="直接打印" onClick="prn1_print();"> <input type="button" value="選擇打印機" onClick="prn1_printA();"> <div id="form1" style="position:relative;width:227mm;height:80mm" autoBreakTable='dt_1'> <table id="dt1" class="tab1" cellSpacing="0" cellPadding="0" style='border-collapse:collapse;width:683px;' headerRows='2' everyFooter='myEveryFooter' lastFooter='myLastFooter'> <caption style='font-size:36px;height:60px;font-family:Microsoft YaHei;color:#a7c0dc' class='first-only'>股票投資營收明細 </caption> <thead class="h101"> <tr> <th style="padding: 0px; width: 32px; white-space: nowrap;" rowSpan="2">序號</th> <th style="padding: 0px; width: 62px; white-space: nowrap;" rowSpan="2"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">股票代碼</a></th> <th style="padding: 0px; width: 65px; white-space: nowrap;" rowSpan="2">股票簡稱</th> <th style="padding: 0px; width: 70px; white-space: nowrap;" rowSpan="2">相關資料</th> <th style="padding: 0px; width: 58px;" rowSpan="2"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">每股收<br>益(元)</a></th> <th style="padding: 0px; width: 196px;" colSpan="3">營業收入</th> <th style="padding: 0px; width: 193px;" colSpan="3">淨利潤</th> </tr> <tr> <th style="padding: 0px; width: 70px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">營業收入<br>(萬元)</a> </th> <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">同比增加<br>(%)</a> </th> <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">季度環比<br>增加(%)</a> </th> <th style="padding: 0px; width: 66px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">淨利潤<br>(萬元)</a> </th> <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">同比增加<br>(%)</a> </th> <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">季度環比<br>增加(%)</a> </th> </tr> </thead> <tbody> <tr> <td>1</td> <td><a href="#">300184</a></td> <td><a href="#">力源信息</a></td> <td> <nobr> <a style="color: rgb(255, 0, 0);" href="#">詳細</a> <a href="#">股吧</a> </nobr> <td class="tdnumber"><span>0.0600</span></td> <td class="tdnumber"><span>7225.38</span></td> <td class="tdnumber"><span class="red">15.69</span></td> <td class="tdnumber"><span class="green">-10.65</span></td> <td class="tdnumber"><span>563.83</span></td> <td class="tdnumber"><span class="red">79.25</span></td> <td class="tdnumber"><span class="red">90.00</span></td> </tr> <tr class="odd"> <td>2</td> <td><a href="#">300094</a></td> <td><a href="#">國聯水產</a></td> <td> <nobr> <a style="color: rgb(255, 0, 0);" href="#">詳細</a> <a href="#">股吧</a> </nobr> <td class="tdnumber"><span>-0.0200</span></td> <td class="tdnumber"><span>38563.77</span></td> <td class="tdnumber"><span class="red">57.53</span></td> <td class="tdnumber"><span class="green">-12.89</span></td> <td class="tdnumber"><span>-871.34</span></td> <td class="tdnumber"><span class="red">70.47</span></td> <td class="tdnumber"><span class="red">93.48</span></td> </tr> </tbody> </table> </div> </body> </html></span>
<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript" src="LodopFuncs.js"></script> <script type="text/javascript"> var LODOP; //聲明爲全局變量 // 打印預覽 function prn1_preview() { CreateOneFormPage(); LODOP.PREVIEW(); }; // 直接打印 function prn1_print() { CreateOneFormPage(); LODOP.PRINT(); }; // 選擇打印機 function prn1_printA() { CreateOneFormPage(); LODOP.PRINTA(); }; // 建立打印頁面 function CreateOneFormPage(){ LODOP=getLodop(); LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表單一"); LODOP.SET_PRINT_STYLE("FontSize",18); LODOP.SET_PRINT_STYLE("Bold",1); LODOP.ADD_PRINT_HTM(10,20,500,5000,document.getElementById("form1").innerHTML); }; </script></span>
點擊,打印預覽以後,就會出現下面的效果:工具
固然,你還能夠選擇打印機,在打印預覽裏邊也能夠進入這個頁面,只須要點擊設置便可。測試
而後是保存功能
html 代碼相同,這裏就再也不重複貼了
怎麼樣,很簡單吧!web 頁面打印指定內容其實就這麼簡單。只要找對好的工具,什麼都不是事!