jquery – Phantomjs page-break-after:总是创建空格

前端之家收集整理的这篇文章主要介绍了jquery – Phantomjs page-break-after:总是创建空格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我面临着phantomjs的问题(html到pdf),我有1个html页面,有16个div,我愿意在每个上添加分页符,但是当我添加page-break-after时:总是在每个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" height="1170" width="828" 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 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></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 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></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 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></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 %>" height="50" width="50" border="0" style="left:10px;" alt="No Image"/></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" height="1170" width="827" 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>

解决方法

试试这个
page.set( 'paperSize',{ width: 1200,height: 1500} );
原文链接:/jquery/178375.html

猜你在找的jQuery相关文章