jQuery列印指定區域Html頁面並自動分頁_jquery
- WBOY原創
- 2016-05-16 16:42:281505瀏覽
最近專案需要用到列印HTML頁面，需要指定區域列印，使用jquery.PrintArea.js 外掛程式
用法：
$("div#printmain").printArea();
但還是會列印DIV後面的內容，這裡可以使用CSS控制列印分頁
<div style="page-break-after: always;"></div>
有時候用CSS控制分頁了但還是會連續列印頁面，這裡就可以用上PrintArea 外掛中的屬性參數。
PrintArea部分原始碼：
var modes = { iframe : "iframe", popup : "popup" };
var defaults = { mode : modes.iframe,
popHt : 800,
popWd : 800,
popX : 200,
popY : 200,
popTitle : '',
popClose : false ,
twoDiv : '', //自已扩展的属性，为满足变态需求
pageTitle: ''};//自已扩展的属性，为满足变态需求
可以看出插件中定義的屬性格式為JSON，以下介紹部分屬性
modes定義了兩個屬性，指定popup時會開啟新窗口，可以視為列印預覽頁面，預設為iframe。
@popClose | [boolean] | (false),true 列印完成後是否已開閉預覽頁面，預設為false（未關閉）。
$("div#printmain").printArea({mode:"popup",popClose:true});
這樣就可以指定DIV列印了。
下面說一下我新增兩個屬性的用途
twoDiv：
需要列印的第二個DIV ，當然會是第二頁，這個頁面比較長，需要自動分頁，並且表格中每行都不一樣，有些行跨了多行，這裡打印出來，一行可能會打印在兩張紙上。
pageTitle：
第二個DIV分成多頁裡，每一頁的表頭都需要一樣，這個參數就是公用表頭。
這兩個參數都對應著頁面中的DIV，如：
<div id="pageTitle" style="display: none;">
頁面定義好後，我們來看看插件中是如何處理我們的頁面的。
writeDoc.open(); writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 writeDoc.close(); printWindow.focus(); printWindow.print();
以下是產生html的程式碼
html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";
插件中都定義了相義的方法，我沒有做任何修改，這裡我就不貼了。
以下是我的思路：
需在將一個DIV中的內容分成多頁，且一行不跨多頁，我們就得在生成html 程式碼上下功夫了。
先找出DIV中的所有行，當公共表頭加上這些行後高度達到一頁，就需要分頁了，這裡就有可以一頁中最後一行剛好跨了多頁，將這一行保存下來，放到下一頁。
每一頁產生完成後都需要在HTML標籤後面加上CSS分頁標記，這樣就印表機就會乖乖的分頁。
說明一下，產生的預覽頁面一頁就是一個HTML頁面，它有對應的表頭與DTD資訊。
有人可能明明預覽只有4頁，而列印出來總會多一頁，這時你需要檢驗一下你產生的頁面中分頁標記是不是在HTML標籤之前。
分面標記一定要在HTML標籤之後，這樣可以解決列印多打一頁問題。
PS：
下面我會傳上我修改過後的JS插件，由於我專案週期的原因，程式碼中很多部分都是寫死了，只是為了解決本次列印的問題。所在程式碼寫得很亂，希望大家將究著看
同事也希望哪位能夠再優化一下，使其通用。