达到特定内容大小时的空白页面
Blank page when certain size of content is reached
我遇到的问题是，每当我尝试通过 CSS2PDF 创建 PDF 时，只要我想添加的 div 具有一定长度，CSS2PDF 就会 return 一个空白的 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.
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, 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, 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, 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.
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.
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.
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.
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>
<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.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
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 会给出空白页，在达到该大小之前，它可以工作。也没有自动分页符。
可能是因为 bootstrap 样式的自反布局 (col-*) 在已解析的 CSS 映射到浮动。 CSS2PDF 基本上将 HTML 与已解析的 CSS 转换为 XSL FO 并对其进行格式化。在 XSL FO（以及任何面向页面的语言）中，"float" 不能大于页面。
尝试只格式化而不使用 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"。
如果您尝试对每列使用 col-md-4 将页面设置为三列格式，您会遇到同样的问题。这些将解析为三个并排的浮动，如果它们大于页面，您将无法控制它们的行为，这会破坏格式。甚至浏览器也很难尝试 "print"。
我遇到的问题是，每当我尝试通过 CSS2PDF 创建 PDF 时，只要我想添加的 div 具有一定长度，CSS2PDF 就会 return 一个空白的 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.
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, 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, 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, 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.
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.
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.
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.
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>
<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.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
And some table to finish up the page for now.
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 会给出空白页，在达到该大小之前，它可以工作。也没有自动分页符。
可能是因为 bootstrap 样式的自反布局 (col-*) 在已解析的 CSS 映射到浮动。 CSS2PDF 基本上将 HTML 与已解析的 CSS 转换为 XSL FO 并对其进行格式化。在 XSL FO（以及任何面向页面的语言）中，"float" 不能大于页面。
尝试只格式化而不使用 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"。
如果您尝试对每列使用 col-md-4 将页面设置为三列格式，您会遇到同样的问题。这些将解析为三个并排的浮动，如果它们大于页面，您将无法控制它们的行为，这会破坏格式。甚至浏览器也很难尝试 "print"。