首頁 > 開發者 > 網站開發

jQuery列印Html頁面自動分頁

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：des   style   http   java   使用   os   art   問題   

  最近項目中需要用到列印HTML頁面，需要指定地區列印，使用jquery.PrintArea.js 外掛程式

用法：

Javascript代碼  
  1. $("div#printmain").printArea();  



但還是會列印DIV後面的內容，這裡可以使用CSS控制列印分頁

Css代碼  
  1. <div style="page-break-after: always;"></div>  



有時用CSS控制分頁了但還是會連續列印頁面，這裡就可以用上PrintArea 外掛程式中的屬性參數。


PrintArea部分源碼：

Javascript代碼  
  1. var modes = { iframe : "iframe", popup : "popup" };  
  2. var defaults = { mode     : modes.iframe,  
  3.                     popHt    : 800,  
  4.                     popWd    : 800,  
  5.                     popX     : 200,  
  6.                     popY     : 200,  
  7.                     popTitle : ‘‘,  
  8.                     popClose : false ,  
  9.                     twoDiv   : ‘‘, //自已擴充的屬性，為滿足變態需求  
  10.                     pageTitle: ‘‘};//自已擴充的屬性，為滿足變態需求  



可以看出外掛程式中定義的屬性格式為JSON，下面介紹部分屬性

modes定義了兩個屬性，指定popup時會開啟新視窗，可以視為預覽列印頁面，預設為iframe。

@popClose | [boolean] | (false),true  列印完成後是否開閉預覽頁面，預設為false（不關閉）。

Javascript代碼  
  1. $("div#printmain").printArea({mode:"popup",popClose:true});  


這樣就可以指定DIV列印了。

下面說一下我新增兩個屬性的用途
twoDiv：
        需要列印的第二個DIV ，當然會是第二頁，這個頁面比較長，需要自動分頁，並且表格中每行都不一樣，有些行跨了多行，這裡列印出來，一行可能會列印在兩張紙上。

pageTitle：
        第二個DIV分成多頁裡，每一頁的表頭都需要一樣，這個參數就是公用表頭。

這兩個參數都對應著頁面中的DIV，如：

Html代碼  
  1. <div id="pageTitle" style="display: none;">  


頁面定義好後，我們看看外掛程式中是如何處理我們的頁面的。

Javascript代碼  
  1. writeDoc.open();  
  2. writeDoc.write(html); //打找一個視窗關寫視窗中的HTML代碼   
  3. writeDoc.close();  
  4.   
  5. printWindow.focus();  
  6. printWindow.print();  



下面是產生html的代碼

Javascript代碼  
  1. html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";  


外掛程式中都定義了相義的方法，我沒有做任何修改，這裡我就不粘貼了。


下面是我的思路：
       需在將一個DIV中的內容分成多頁，且一行不跨多頁，我們就得在產生html 代碼上下功夫了。

       首先找出DIV中的所有行，當公用表頭加上這些行後高度達到一頁，就需要分頁了，這裡就有可以一頁中最後一行剛好跨了多頁，將這一行儲存下來，放到下一頁。

       每一頁產生完成後都需要在HTML標籤後面加上CSS分頁標記，這樣就印表機就會乖乖的分頁。
     
       說明一下，產生的預覽頁面一頁就是一個HTML頁面，它有對應的表頭與DTD資訊。

       有人可能明明預覽只有4頁，而列印出來總會多一頁，這時你需要檢驗一下你產生的頁面中分頁標記是不是在HTML標籤之前。
       分面標記一定要在HTML標籤之後，這樣可解決列印多打一頁問題。

PS：  
       下面我會傳上我修改過後的JS外掛程式，由於我項目周期的原因，代碼中很多部分都是寫死了，只是為瞭解決本次列印的問題。所在代碼中寫得很亂，希望大家將究著看
      
       同事也希望哪位能夠再最佳化一下，使之通用。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More