PhantomJS PDF分页符

时间:2016-04-01 19:22:12

标签: pdf phantomjs page-break

我创建了一个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">&nbsp;</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">&nbsp;</div>');
  }
}

"<div style='border:1px solid black;height:1px'>"只是一个愚蠢的标记,可以找到我的分页符在PDF上的位置。 当我遍历long div的所有子节点时,应该创建分页符的对象的估计高度为1350px。

在Chrome中,我看到我总共有5页。 但是当它以PDF格式呈现时,页面数量会达到6或7,具体取决于字体大小,行高等。

这是页面的图像

div content runs over header

有谁知道问题的原因?以及如何解决它。

0 个答案:

没有答案