jQuery列印Html頁面主動分頁
阿新 • • 發佈：2019-01-07
用到列印HTML頁面，須要指定區域列印，應用jquery.PrintArea.js 外掛
用法：
但還是會列印DIV後面的內容，這裡可以應用CSS把握列印分頁
有時用CSS把握分頁了但還是會連氣兒列印頁面，這裡就可以用上PrintArea 外掛中的屬性引數。
PrintArea專案組原始碼：
可以看出外掛中定義的屬性格局為JSON，下面介紹專案組屬性
modes定義了兩個屬性，指定popup時會開啟新視窗，可以視為列印預覽頁面，預設為iframe。
＠popClose | [boolean] | （false），true 列印完成後是否開閉預覽頁面，預設為false（不封閉）。
如許就可以指定DIV列印了。
下面說一下我新增兩個屬性的用處
twoDiv：
須要列印的第二個DIV ，當然會是第二頁，這個頁面鬥勁長，須要主動分頁，並且表格中每行都不一樣，有些行跨了多行，這裡打印出來，一行可能會列印在兩張紙上。
pageTitle：
第二個DIV分成多頁裡，每一頁的表頭都須要一樣，這個引數就是公用表頭。
這兩個引數都對應著頁面中的DIV，如：
頁面定義好後，我們看看外掛中是如何處理懲罰我們的頁面的。
下面是生成html的程式碼
外掛中都定義了相義的辦法，我沒有做任何批改，這裡我就不貼上了。
下面是我的思路：
需在將一個DIV中的內容分成多頁，且一行不跨多頁，我們就得在生成html 程式碼高低工夫了。
起首找出DIV中的所有行，當公共表頭加上這些行後高度達到一頁，就須要分頁了，這裡就有可以一頁中最後一行正好跨了多頁，將這一行儲存下來，放到下一頁。
每一頁生成完成後都須要在HTML標籤後面加上CSS分頁標識表記標幟，如許就印表機就會乖乖的分頁。
申明一下，生成的預覽頁面一頁就是一個HTML頁面，它有對應的表頭與DTD資訊。
有人可能明明預覽只有4頁，而打印出來總會多一頁，這時你須要查驗一下你生成的頁面平分頁標識表記標幟是不是在HTML標籤之前。
分面標識表記標幟必然要在HTML標籤之後，如許可解決列印多打一頁題目。
用法：
$（"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標籤之後，如許可解決列印多打一頁題目。