Phantomjs page-break-after：总是创建空格
Posted
技术标签:
【中文标题】Phantomjs page-break-after：总是创建空格【英文标题】：Phantomjs page-break-after: always creating spaces 【发布时间】：2014-01-18 05:35:17 【问题描述】：我遇到了 phantomjs（html 到 pdf）的问题，我有 1 个 html 页面，其中有 16 个 div，我愿意在每个页面上添加分页符，但是当我添加分页符后：总是在每个 div 上在 pdf 中它创建了很多空格，假设当我在 2 div 上添加空间并休息时没有分页符，那么空格很少，但是当添加空格 3、4、5 等时，空格会增加更多意味着每个页面都有很多空间，我该如何解决这个问题，提前谢谢。
这是我的代码
fs.readFile(__dirname + '/../pdf' + pdfpath, 'utf8', function (err, data)
// Render the page to variable.
var html = ejs.render(data, pdfJSON);
// Set this html as the content for the pdf file.
page.set('content', html);
var fileName = __dirname + '/pdfdata/' + f.formType + f.formId + '.pdf';
// Generate the pdf.
page.render(fileName);
);
这是我的html页面代码
<html>
<head>
<title>PreQual PDF Export</title>
<style type="text/css">
<!--
body font-family: Arial; font-size: 33.0px
.pos position: absolute; z-index: 0; left: 0px; top: 0px
.set-top top: 20px;
-->
</style>
</head>
<body >
<nobr>
<nowrap>
<div class="set-top" style="page-break-after: always;position:relative;left:50%;margin-left:-398px;width:928px;height:1170px;overflow:hidden">
<div style="position:absolute;left:0px;top:0px">
<img name="_1170:828" src="<%= baseUrl %>/pdf/prequal/page_001.jpg" border="0" usemap="#Map">
</div>
<div class="pos" id="_126:284" style="top:284;left:126">
<span id="_30.8" style=" font-family:Arial; font-size:30.8px; color:#fdfffd">
Prequal Documents for the</span>
</div>
<div class="pos" id="_126:323" style="top:323;left:126">
<span id="_30.8" style=" font-family:Arial; font-size:30.8px; color:#fdfffd">
procurement of Goods</span>
</div>
<div class="pos" id="_138:975" style="top:975;left:138">
<span id="_15.4" style="font-weight:bold; font-family:Arial; font-size: 14px; color:#fdfffd">
SAQ Return Date:<span><%= saqDate %></span></span>
</div>
<div class="pos" id="_492:975" style="top:975;left:492">
<span id="_15.4" style="font-weight:bold; font-family:Arial; font-size: 14px; color:#fdfffd">
Project Reference No. TCD<%= refNo %></span>
</div>
<div class="pos" id="_136:1092" style="top:1092;left:136">
<span id="_13.6" style="font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;">
<img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file1 %>" border="0" style="left:10px;" /></span>
</div>
<div class="pos" id="_267:1095" style="top:1095;left:267">
<span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;">
<img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file2 %>" border="0" style="left:10px;" /></span>
</div>
<div class="pos" id="_369:1095" style="top:1095;left:369">
<span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;">
<img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file3 %>" border="0" style="left:10px;" /></span>
</div>
<div class="pos" id="_480:1093" style="top:1093;left:480">
<span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;">
<img name="_1170:829" src="<%= baseUrl %>/providers/public/files/<%= file4 %>" border="0" style="left:10px;" /></span>
</div>
<div class="pos" id="_609:1094" style="top:1094;left:609">
<span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000;">
</span>
</div>
</div>
<!-- Page No 2 -->
<div class="set-top" style="page-break-after: always;position:relative;left:50%;margin-left:-398px;width:928px;height:1170px;overflow:hidden">
<div class="pos" id="_0:0" style="top:0">
<img name="_1170:827" src="<%= baseUrl %>/pdf/prequal/page_002.jpg" border="0" usemap="#Map"></div>
<div class="pos" id="_157:1357" style="top:200;left:157">
<span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#61c5c5">
Contents</span>
</div>
<div class="pos" id="_414:1348" style="top:200;left:414">
<span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#fcfcfc">
Part 01</span>
</div>
<div class="pos" id="_414:1392" style="top:240;left:414">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;">
INTRODUCTION</span>
</div>
<div class="pos" id="_154:1560" style="top:400;left:154">
<span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#fcfcfc">
Part 02</span>
</div>
<div class="pos" id="_414:1569" style="top:400;left:414">
<span id="_24.5" style=" font-family:Arial; font-size:24.5px; color:#fcfcfc">
Part 03</span>
</div>
<div class="pos" id="_154:1597" style="top:440;left:154">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;">
PASS / FAIL</span>
</div>
<div class="pos" id="_154:1615" style="top:460;left:154">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;">
REQUIREMENTS</span>
</div>
<div class="pos" id="_414:1607" style="top:440;left:414">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000;">
SELECTION CRITERIA</span>
</div>
</div></nowrap></nobr>
</body>
</html>
【问题讨论】：
【参考方案1】：试试这个
page.set( 'paperSize', width: 1200, height: 1500 );
【讨论】：
以上是关于Phantomjs page-break-after：总是创建空格的主要内容，如果未能解决你的问题，请参考以下文章
page-break-after 在 flexbox 中不起作用
page-break-before和page-break-after
应用CSS的page-break-after属性 实现WEB页面强制分页打印