JQuery Print, 透過JQuery列印出表單

今天要介紹的元件是JQuery的擴充套件,可以透過它列印出網頁上的一個元素,比如說一個<div>的內容,但是下面的內容會更衍生

範例將會印出一個任意排列好的版型,比如可以排好一張報名表列印出來

參考文件 :jQuery Print Plugin

 

步驟一 :下載 JQuery Print 並include到頁面上

下載Github上的專案,解壓縮後放到自己專案的資料夾上,並且include到頁面中

 

步驟二 :使用方式

依照作者的說明文件,可以這麼做,透過element.print()帶入列印參數就可以在瀏覽器上帶出列印畫面

 

步驟三 :印出一張表單

印要出表單我們必須要準備幾項東西

  1. 要印出的表單HTML
  2. 給JQuery print列印的element

首先假設我印要出來的表單HTML長這樣子,當然你們可以隨意的排版

接著下面的步驟將透過JQuery產生一個id=print_area的div,並且將要列印的html放入,print之後再將print_area移除掉

其中globalStyles: false 代表列印時不帶入網頁中的style,這樣可以避免列印出來的表單因為網頁上的css設定而有不一樣的外觀

iframe: false代表不透過iframe

以上這個做就會看到瀏覽器另外跳出視窗帶出直接列印的功能啦

JQuery Print

 

首頁 » 技術文章 » 其他類型 » JQuery Print, 透過JQuery列印出表單

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *