JS實現Web中指定內容的保存與打印功能

背景

首先,說說文章的背景。最近手中的一個項目,因爲需求中要求提供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

html 代碼

<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>

js 代碼

<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 頁面打印指定內容其實就這麼簡單。只要找對好的工具,什麼都不是事!

相關文章
相關標籤/搜索