Blank page when certain size of content is reached

Question

The issue I am having is that whenever I try to create a PDF via CSS2PDF it works just fine, as soon as the div that I want to add has a certain length and CSS2PDF will just return a blank PDF.

Since it works until I reach that point it's not a problem of including the file.

Here's the js code that I use to use CSS2PDF inside a click-listener for a button:

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

Here's the html that I want to add to the PDF:

<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>

As soon as I remove 1 line it works again. For some reason it also does not automatically start a new page.

Edit: tl;dr: CSS2PDF gives blank page when content reaches a certain size, before reaching that size, it works. Also no auto-page-breaks.

Kevin Brown · Accepted Answer · 2018-01-16T18:21:56.233

0

It is likely because bootstrap-style reflexive layout (col-*) in resolved CSS map to a float. CSS2PDF basically converts HTML with resolved CSS into XSL FO and formats it. In XSL FO (and in any page-oriented language) a "float" cannot be larger than a page.

Try just formatting without the class="col-lg-12 col-md-12 col-sm-12 col-xs-12".

You would have the same problem if you are trying to format a page in three columns using col-md-4 for each column. These would resolve to three floats side-by-side and you cannot control their behavior if they are larger than a page, it would break the formatting. Even browsers have a hard time attempting to "print" that.

edited Jan 16 '18 at 18:21

answered Jan 16 '18 at 18:19

Kevin Brown

8,805
2
20
38

Thank you for your answer. I am not an expert in that topic and would be interested why it works fine until a certain height is reached. That made me assume that the bootstrap cols cannot be the problem but now I know. Thank you again! – Veake Jan 16 '18 at 18:20
I was able to solve the issue like you said. I only removed the bootstrap-col class from the div and everything is working as intended. Thank you very much for the help. – Veake Jan 16 '18 at 18:28

Blank page when certain size of content is reached

1 Answers1