我有一個動態生成的html頁面，可以打印。使用CSS和/或jQuery打印頁面並使用分頁符
我想創建基於div部分的分頁符 - 任何給定的div - 如果它不完全適合頁面，則在它之前插入分頁符。從理論上講，從單個div到最多10個單詞的任何位置都可能適合單個打印頁面，所以我認爲在頁面加載後我需要使用jQuery來插入。
如果這是一個桌面應用程序，我想接近它是這樣的：
有沒有什麼方法可以使用jQuery，CSS，原始JavaScript或其他任何方法來使用此方案？
好的，我花了一天左右的時間來解決這個問題，所以我想發佈我的解決方案，以防萬一需要的答案。
一般來說這裏是我做的。
- >所謂的功能追加初始頁面的DOM - 這樣的事情
// assumes old_page_id is existing element in DOM, and var page_id = 1;
$j("<div class='page' id='" + page_id + "'><div class='print_area'></div></div>")
.insertAfter('#' + old_page_id);
- 的div>測量高度是頁面（在我的情況下，$（「頁面」）的高度（）;）
- >跑了一個函數來做到的div和新頁面插入 - 這樣的事情
$('div_class').each(
function() {
// measure height of $(this)
// add it to running total of used space on existing page
// if sum total exceeds remaining space, create new page, and add to that one
// if still room left, add to this one
}
);
注意，每個頁面的div（在我的案件中，class =「頁面」）在打印機樣式表有這樣的：
分頁 - 後：始終;
這是我得到了它，我想在打印機上創造了新的一頁。
運行上面jQuery的功能後，我躲在包含我想移動到打印頁面的div元素的原始部分。注意：我無法掩飾手之前本節，因爲我的jQuery的測量將不會產生有效的結果（在我的情況，我把所有的div一個div包裝內側的「hide_me」 ID和樣式設置爲高度：1px的;溢出：自動;）。
我意識到這是非常50000英尺看法，但希望它是對您有所幫助。
您可以隨時插入帶有CSS屬性{pageBreakBefore：'always'}或{pageBreakAfter：'always'}的空DIV標籤，並在jQuery中計算出通過檢查頁面邊界的點DIV的高度等等。但是，您需要對頁面內容有相當深入的瞭解，並可能將字體大小等指定爲「pt」而不是「px」。
在這裏看到一個類似的查詢，但：
不正是你所尋找的，但看看這個 http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml
隨着JS的額外破折號，可能是你想要嘗試實現的。
是啊，只是在閱讀之前發佈在這裏。這是一個步驟，但是因爲我可能在一個頁面上有多個div，所以該解決方案對我來說不起作用。不過謝謝。 – OneNerd 2011-02-02 18:29:19
你可以嘗試使用這個插件來打印頁面的元素。 http://www.recoding.it/wp-content/uploads/demos/jqprint-demo.htm
如果您遵循您對桌面應用程序建議的相同邏輯，這可能會有所幫助。你可以用div封裝你的「頁面」，這就是你要告訴jqPrint打印的內容。分頁符可能是另一個元素，也可能是一個div，但有一個類讓你知道它是分頁符。例如：
<div id="#page1" class="page">
...
</div>
</div id="#break1" class="break"> </div>
等。
然後
$('#page1').jqprint();
我不知道，如果你熟悉的jQuery。如果你不讓我們知道。
打印分頁的點，在我的腦海裏，是不分裂的東西不好。通常，最不經常分裂的是表格數據。因此，這是一種假設您已將<div>修改爲表格格式並將不應劃分爲<tbody>分組的行集合分組的方法。
我們要紀念的頁眉和頁腳代碼發現，我們並不一定希望它們出現的權利在那裏它們被描述
此調用本身在頁面加載，而是可以在打印前右稱爲。
<script>
$().ready(function() {
$('table.paged').each(function (i, o) {
BreakPages($(o));
})
});
function BreakPages(jSource) {
$('body').width("7in");
var perInch = $('body').width()/7.5;
var nPageHeight = 9 * perInch;
var jHeader = null;
var jFooter = null;
var jWrapper = jSource.clone().empty();
var jPage = null;
var iPage = 0;
jSource.after("<div></div>");
var jFixed = jSource.next();
function substed(jStuff) {
var jCopy = jStuff.clone();
jCopy.find('span.pageNo').html(" " + iPage + " ").removeClass('pageNo');
return jCopy;
}
jSource.children().each(
function (iChunk, oChunk) {
var jChunk = $(oChunk);
if (jChunk.hasClass('footer')) {
jFooter = jChunk;
}
if (jChunk.hasClass('header')) {
jHeader = jChunk;
jFooter = jChunk.nextUntil('.footer').last().next();
}
if (!jChunk.hasClass('sample')) {
var nHeight = jChunk.height();
if (jPage)
nHeight += jPage.height();
if (jFooter)
nHeight += jFooter.height();
if (nHeight > nPageHeight) {
if (jFooter)
jPage.append(substed(jFooter));
jPage.after("<p style='page-break-after:always; height:0; width:0'> </p>");
jPage = null;
}
if (!jPage) {
iPage++;
jPage = jWrapper.clone();
jFixed.append(jPage);
if (jHeader && jHeader !== jChunk)
jPage.append(substed(jHeader));
}
jPage.append(jChunk);
}
}
);
jFixed.find('span.pageCount').html(" " + iPage + " ");
jFixed.find('span.pageNo').html(" " + iPage + " ");
jSource.remove();
}
</script>
我們擺出了這樣分頁的表格。
<body>
<table>
<tbody class="header">
PAGE ONE HEADER
</tbody>
<tbody class="header sample">
LATER PAGE HEADER (IF RELEVANT)
</tbody>
<tbody class="together">
ROW GROUP 1
</tbody>
<tbody class="together">
ROW GROUP N
</tbody>
<tbody class="footer">
FOOTER
</tbody>
</table>
</body>
我們掃描整個<tbody>的東西和頁腳和註定跨頁的結束打破任何元素之前的標題。
我們用css類標記頁眉和頁腳，並通過將它們放在需要更改的行流中的位置來跟蹤更改頁眉和頁腳的可能性，但使用另一個css類保持它們不可見。
令人討厭的是頁面打破的一些實現只適用於嚴格的「塊」元素，所以它沒有在tbody上定義。因此我已將它應用於附加到每個頁表的<p>標記類。
此問題已被多次提出並以各種形式回答。這裏有一個例子：http://stackoverflow.com/questions/4760899/page-break-beforeauto-not-working-for-me-why/ – mVChr 2011-02-02 18:15:34
是的 - 檢查了一個出來，雖然沒有真正回答我的問題，但它是一個步驟。謝謝。 – OneNerd 2011-02-02 18:27:41