javascript - 当内容达到一定大小时出现空白页

Question

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

因为它一直有效，直到我达到这一点，所以包含文件不是问题。

下面是我在按钮的点击监听器中使用 CSS2PDF 的 js 代码:

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-*) 映射到 float 。 CSS2PDF 基本上将具有已解析 CSS 的 HTML 转换为 XSL FO 并对其进行格式化。在 XSL FO(以及任何面向页面的语言)中，“ float ”不能大于页面。

尝试仅格式化而不使用 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"。

如果您尝试对每列使用 col-md-4 将页面格式化为三列，您也会遇到同样的问题。这些将解析为并排的三个 float ，如果它们大于页面，您将无法控制它们的行为，这会破坏格式。即使浏览器也很难尝试“打印”它。