当达到一定大小的内容时，空白页

Question

我遇到的问题是，每当我尝试通过CSS2PDF创建PDF时，它就会正常工作，只要我想添加的div有一定的长度，CSS2PDF就会返回一个空白的PDF。

因为它在我到达那个点之前是有效的，所以包含该文件并不是一个问题。

下面是js代码，用于在按钮的单击侦听器中使用CSS2PDF：

return xepOnline.Formatter.Format('main',{embedLocalImages: 'true'});

下面是我想添加到PDF中的html：

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="main" style="margin-top: 20px;">
 <div class="entry" data-entry="5">
 <h2>This is the title of the example-report</h2>
 <h3>Subtitle, decent, but can also be <b>bold</b></h3>
 <div class="wysiwyg-text-align-justify">This is a block of text, copied to represent a longer text.&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.&nbsp;&nbsp;
 This is a block of text, copied to represent a longer text.
 This is a block of text, copied to represent a longer text.
 This is a block of text, copied to represent a longer text.
 This is a block of text.
 </div>
 </div>
 <div class="entry" data-entry="7">
 <p>Another text block to explain the image above.&nbsp;
 Another text block to explain the image above.&nbsp;
 Another text block to explain the image above.&nbsp;
 Another text block to explain the image above.&nbsp;
 Another text block to explain the image above.&nbsp;
 Another text block to explain the image above.&nbsp;
 Another text block to explain the image above.&nbsp;
 Another text block to explain the image above.
 Another text block to explain the image above.
 Another text block to explain the image above.
 Another text block to explain the image above.
 </p>
 </div>
 <div class="entry" data-entry="8">
 <h3>A heading for the following graph and table!<br></h3>
 </div>
 <div class="entry" data-entry="10">
 <p class="wysiwyg-text-align-justify">Some text for the diagram above.&nbsp;
 Some text for the diagram above.&nbsp;
 Some text for the diagram above.
 Some text for the diagram above.&nbsp;
 Some text for the diagram above.<br>
 </p>
 <p class="wysiwyg-text-align-justify">
 Some text for the diagram above. 
 Some text for the diagram above. 
 Some text for the diagram above.
 Some text for the diagram above. 
 Some text for the diagram above.
 <br>
 </p>
 </div>
 <div class="entry" data-entry="12">
 <p>And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.&nbsp;
 And some table to finish up the page for now.
 </p>
 </div>
 <div class="entry" data-entry="14">
 <table id="resultTable" class="table table-hover table-striped table-bordered">
 <thead>
 <tr id="headerFill">
 <td>#</td>
 <td>Kommune</td>
 <td>Value Befolkning</td>
 </tr>
 </thead>
 <tbody id="containerFill">
 <tr class="row0">
 <td>1</td>
 <td>Gällivare</td>
 <td>17956</td>
 </tr>
 <tr class="row1">
 <td>2</td>
 <td>Vallentuna</td>
 <td>32785</td>
 </tr>
 <tr class="row2">
 <td>3</td>
 <td>Upplands Väsby</td>
 <td>43891</td>
 </tr>
 <tr class="row3">
 <td>4</td>
 <td>Stockholm</td>
 <td>935619</td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="entry" data-entry="17">
 <h2>Test</h2>
 <h3>Subtitle maybe I will find out what's causing the issue soon....</h3>
 </div>
</div> 

一旦我删除1行，它就会再次工作。由于某些原因，它也不会自动启动新页面。

编辑：tl;dr：当内容达到一定大小时，CSS2PDF会给出空白页面，在达到这个大小之前，它会工作。也没有自动分页。

Answer 1

这很可能是因为已解析的CSS映射中的引导样式自反布局(col-*)映射到一个浮点。CSS2PDF基本上将已解析的CSS转换为XSL并对其进行格式化。在XSL FO (以及任何面向页面的语言)中，"float“不能大于一个页面。

尝试只格式化没有class="col-lg-12 col-md-12 col 12 col-xs-12“。

如果您试图为每一列使用col-md-4格式化三列中的页面，您就会遇到同样的问题。这些决议将解决三个并行浮动，你不能控制他们的行为，如果他们是大于一个页面，这将打破格式。即使是浏览器也很难尝试“打印”。