首頁 > 網際網路

如何使用jquery外掛jqprint列印指定內容?

2019-12-12 15:28:27

在網頁系統中,有時候需要列印一些指定的內容,使用jquery的外掛jqprint就能容易的實現效果

1

使用jqprint外掛需要用到兩個js檔案,jquery.js和jqprint.js,本文使用jquery-1.11.3.min.js,jquery.jqprint-0.3.js版本的js原始檔


2

開啟vscode,建立一個測試頁面,假設叫做 WebPrint.html,儲存到上一步js檔案的同級目錄,用於演示指定區域列印的頁面。然後,將第一步的兩個js檔案引入到測試頁面中


3

在測試頁面中,新增一個table表格,在表格的前後都新增一些文字,本文演示只列印表格,不列印其前後的文字。在測試頁面的頂部新增一個名字叫做【列印】的按鈕,當點選這個按鈕的時候,呼叫瀏覽器的列印功能。

注意:此處設定的樣式也包含在列印區域內,列印區域的分頁建議使用div


4

在瀏覽器中執行測試頁面的效果如下,跟預想的一樣,一個按鈕,一段文字,一個表格,再接著一段文字


5

在測試頁面的底部新增js程式碼,係結【列印】按鈕的點選事件,當點選按鈕時,呼叫jqprint的print方法


6

在瀏覽器中執行測試頁面,然後點選【列印】按鈕,就會彈出預覽列印介面,假設table太寬的話,一頁列印不完整就會換頁,因此,儘量縮小內容的寬度,保證在一頁中列印完整


7

如果本機有連線上印表機,在預覽列印介面點選【列印】就能直接將結果列印出來了



IT145.com E-mail:sddin#qq.com