1. 程式人生 > >在Web中如何運用JavaScript實現列印功能

在Web中如何運用JavaScript實現列印功能

概述:在Web中想用JavaScript實現列印功能,需要一個瀏覽器控制元件WebBrowser。WebBrowser是IE內建的瀏覽器控制元件,無需使用者下載,只需要在頁面簡單的設定,就可以Dom方法獲取到該物件. 本文將詳細介紹如何運用WebBrowser實現列印功能。

  在Web中想用JavaScript實現列印功能,需要一個瀏覽器控制元件WebBrowser。WebBrowser是IE內建的瀏覽器控制元件,無需使用者下載,只需要在頁面簡單的設定,就可以Dom方法獲取到該物件.

  WebBrowser 控制元件為 WebBrowser ActiveX 控制元件提供了託管包裝。託管包裝使您可以在 Windows 窗體客戶端應用程式中顯示網頁。使用 WebBrowser 控制元件,可以複製應用程式中的 Internet Explorer Web 瀏覽功能,還可以禁用預設的 Internet Explorer 功能,並將該控制元件用作簡單的 HTML 文件檢視器。此外,可以使用該控制元件將基於 DHTML 的使用者介面元素新增到窗體中,還可以隱瞞這些元素在 WebBrowser 控制元件中承載的事實。通過這種方法,可以將 Web 控制元件和 WindowsCS 窗體控制元件無縫地整合到一個應用程式中。

  WebBrowser 控制元件包含多種可以用來實現 Internet Explorer 中的控制元件的屬性、方法和事件。例如,可以使用 Navigate 方法實現位址列,使用 GoBack、GoForward、Stop 和 Refresh 方法實現工具欄中的導航按鈕。可以處理 Navigated 事件,以便使用 Url 屬性的值更新位址列,使用 DocumentTitle 屬性的值更新標題欄。

  用WebBrowser實現列印方法如下:

  1.引入一個WebBrowser

  <object id=”WebBrowser” classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=”0″ width=”0″>

  </object>

  2. 隱藏不列印的頁面元素和分頁

  CSS有個Media 屬性,可以分開設定列印和顯示的格式。

  如 <style media=”print” type=”text/css”> …</style> 中間的格式將只在列印時起作用,不會影響顯示介面。

  所以可以設定

  <style media=”print” type=”text/css”>

  .Noprint{display:none;}

  .PageNext{page-break-after: always;}

  </style>

  然後給不想列印的頁面元素新增: ,那就不會出現在列印和列印預覽中了。 想分頁的地方新增: <div></div> 就可以了。

  3. 頁面設定和列印預覽

  常用的:

  WebBrowser.ExecWB(1,1) 開啟

  WebBrowser.ExecWB(2,1) 關閉現在所有的IE視窗,並開啟一個新視窗

  WebBrowser.ExecWB(4,1) 儲存網頁

  WebBrowser.ExecWB(6,1) 列印

  WebBrowser.ExecWB(7,1) 列印預覽

  WebBrowser.ExecWB(8,1) 列印頁面設定

  WebBrowser.ExecWB(10,1) 檢視頁面屬性

  WebBrowser.ExecWB(15,1) 撤銷

  WebBrowser.ExecWB(17,1) 全選

  WebBrowser.ExecWB(22,1) 重新整理

  WebBrowser.ExecWB(45,1) 關閉窗體無提示

  在ExtJs中實現列印

  簡單來說就是將要列印的innerHtml內賦值給window.document.body.innerHTM,然後呼叫window.focus():

  function doPrint(){

  var printArea=…….;//這個是取得要列印的那個元件

  window.document.body.innerHTML=printArea.innerHTML;

  window.focus();

  WebBrowser.ExecWB(6,6);

  }

  window.print()

  上面ExtJs列印程式碼用到了window.print() ,實際上,window.print() 是瀏覽器列印功能選單的一種程式呼叫。

  與點選列印功能選單一樣,不能精確分頁,不能設定紙型,套打的問題更加無從談起,只不 過,可以讓使用者不用去點選單,直接點選網頁中的一個按鈕,或一個連結裡面呼叫罷了。事實上,很多使用者都是採用這種方式列印,但 是這種方式最致命的缺點是不能設定列印引數,比如紙型,頁邊距,選擇印表機等等。

  需要指出的是這種方法提供一個列印前和列印後的事件onbeforeprint、onafterprint。可以在列印前的時候重新編輯一些格式,專門送 去列印,列印後又處理回來。

  分享一個國內列印工具 JatoolsPrinter:官方網站

  jatoolsPrinter (傑表.列印控制元件)是一款實現網頁套打的專用工具。作為web應用開發者,我們經常會遇到在瀏覽器中列印報表、票據的需求,這些需求瀏覽器本身的列印功能 一般不能滿足, 如精確分頁,套打等。這就需要有一種能解決常見的瀏覽器端列印問題的軟體工具,這也是 jatoolsPrinter 的研發背景。

  jatoolsPrinter 的特點是可以直接對web頁面進行精確的分頁列印。jatoolsPrinter 通過在網頁中嵌入控制元件,解決了web客戶端精確列印,批量列印,列印配置自動保留等問題。

  Related posts:

  JavaScript判斷瀏覽器型別及版本

  獲取XMLHttpRequest的步驟

  JavaScript中的閉包

  javascript 彈出子視窗