1

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

4

1 回答 1

0

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

尝试在没有 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" 的情况下进行格式化。

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

于 2018-01-16T18:19:01.933 回答