天天看點

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

在此之前,我一般使用比較好用的LODOP來執行列印的操作,這個在我之前有很多文章都有涉及,這個控件是一個ActiveX的控件,需要下載下傳安裝後就可以在頁面是進行列印的排版設計,預覽,列印等操作,還是很友善的一個控件,是以都很适合普通内容的列印,證件的套打等操作。

不過随着浏覽器技術的更新,這個插件在Chrome或者FireFox上好像不受支援了,基本上摒棄了這種插件的處理方式了。例如如果我在頁面上需要列印對話框裡面的内容,如下所示。

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

如果按正常使用LODOP的方式來進行處理的話,那麼會得到Chrome浏覽器的提示,并且這個不管你重新下載下傳安裝、更新LODOP控件,都會繼續這個錯誤提示的。

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

有了上面的問題,我們引入一個新的列印方式,也就是JQuery插件來實作我們所需要頁面内容的列印操作。

這個插件的使用非常簡潔友善,首先需要在頁面裡面引入對應的JS檔案,如下所示。

我們再在頁面頂部增加兩個按鈕,如列印和導出操作,代碼如下所示

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

然後我們還需要聲明一個DIV用來放置顯示的Web頁面内容,這樣也友善對它調用進行列印操作。

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

我們列印的處理代碼也很簡單,就是直接對層進行列印處理就可以了,可以看到下面的使用代碼非常簡單。

列印執行後,IE和Chrome都會彈出一個列印預覽對話框,确認是否進行列印的操作。

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

有時候,為了友善業務處理,我們一般也可以提供給使用者一個導出列印内容的操作,如下所示代碼就是把列印的内容導出到Word裡面給使用者加工等用途。

上面的操作,主要就是調用了MVC的控制器方法進行處理,傳入一個id就可以把内容提取出來,然後把它生成所需的Word内容即可。

其中我們可以在書簽裡面定義或者檢視一些書簽的資訊,如下圖所示。

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

這樣我們在代碼裡面,就可以擷取資訊并指定這個Word模闆了。

WORD模闆的内容,可以使用文本替換方式,如下所示。

也可以使用書簽BookMark方式查詢替換,如下代碼所示。

對于主體的HTML内容,這需要特殊對待,一般需要使用插入HTML的專用方式進行寫入内容,否則就顯示HTML代碼了,使用專用HTML方法寫入的内容,和我們在網頁上看到的基本沒有什麼差異了。如下代碼所示。

整個導入WORD文檔的方法就是利用這些内容的整合,實作一個标準文檔的生成,這種業務文檔是固定模闆的,是以很适合在實際業務中使用,比起使用其他方式自動生成的HTML檔案或者文檔,有更好的可塑性和美觀性。

整個代碼如下所示。

最後導出的WORD文檔就是模闆化的具體文檔内容了,WORD預覽界面如下所示。

基于Metronic的Bootstrap開發架構經驗總結(9)--實作Web頁面内容的列印預覽和儲存操作

如果有興趣,可以繼續參考系列文章:

<a href="http://www.cnblogs.com/wuhuacong/p/4757984.html">基于Metronic的Bootstrap開發架構經驗總結(1)-架構總覽及菜單子產品的處理</a>

<a href="http://www.cnblogs.com/wuhuacong/p/4759564.html">基于Metronic的Bootstrap開發架構經驗總結(2)--清單分頁處理和插件JSTree的使用</a>

<a href="http://www.cnblogs.com/wuhuacong/p/4774396.html">基于Metronic的Bootstrap開發架構經驗總結(5)--Bootstrap檔案上傳插件File Input的使用</a>

<a href="http://www.cnblogs.com/wuhuacong/p/4777720.html">基于Metronic的Bootstrap開發架構經驗總結(7)--資料的導入、導出及附件的檢視處理</a>

繼續閱讀