我创建了一个PDF报告,其中包含由phantomjs自动生成的标题。在报告中,我有一个长div,包含文本,空行,简单数据表等。 由于我认为phantomjs可能有分页问题,我手动计算分页符,将每个div的末尾的分页符拆分为多个div。
这是我在jQuery(document).ready()
中的计算//pagination the Notes pages
if (encData.pnotes && encData.pnotes.length > 0) {
pageCnt++;
var $notes = jQuery('<div id="pageNotes" class="notes" style="width:100%;margin-top:100px;border:1px solid red">' +
pNotesString + '</div>');
$body.append($notes);
var height = 0;
var children = $notes.children();
var p = children.slice(0);
var pages = [];
var counter = 0;
for (var i = 0; i < children.length; i++) {
if (height + children[i].offsetHeight < 1350)
height += children[i].offsetHeight;
else {
pages.push([counter, i]);
height = 0;
counter = i;
}
}
pages.push([counter, children.length]);
for (var i = 0; i < pages.length; i++) {
//first notes page
if (i == 0) {
$notes.children().slice(pages[i][1]).remove();
$notes.after('<div style="border:1px solid black;height:1px"></div><div id="pageNotesBreak" style="page-break-after:always"> </div>');
}
else {
pageCnt++;
var $new = jQuery('<div id="page' + pageCnt + '" class="notes" style="width:100%;margin-top:100px;border:1px solid blue"></div>');
$new.append(p.slice(pages[i][0], pages[i][1]));
$body.append($new);
$body.append('<div style="border:1px solid black;height:1px"></div><div id="pageBreak' + pageCnt + '" style="page-break-after:always"> </div>');
}
}
"<div style='border:1px solid black;height:1px'>"
只是一个愚蠢的标记,可以找到我的分页符在PDF上的位置。
当我遍历long div的所有子节点时,应该创建分页符的对象的估计高度为1350px。
在Chrome中,我看到我总共有5页。 但是当它以PDF格式呈现时,页面数量会达到6或7,具体取决于字体大小,行高等。
这是页面的图像
有谁知道问题的原因?以及如何解决它。