我遇到的问题是,每当我尝试通过 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.
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 在内容达到一定大小时给出空白页,在达到该大小之前,它可以工作。也没有自动分页符。