Пустая страница при достижении определенного размера контента

Question

Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я пытаюсь создать PDF с помощью CSS2PDF, он работает просто отлично, как только div, который я хочу добавить, имеет определенную длину, а CSS2PDF просто возвращает пустой PDF.

Так как он работает, пока я не достигну этой точки, проблема не в том, чтобы включить файл.

Вот код js, который я использую, чтобы использовать CSS2PDF внутри прослушивателя для кнопки:

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

Вот HTML, который я хочу добавить в 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> 

Как только я удаляю 1 строку, она снова работает. По некоторым причинам он также не запускает новую страницу автоматически.

Редактировать: tl; dr: CSS2PDF выдает пустую страницу, когда контент достигает определенного размера, до достижения этого размера, он работает. Также нет автоматических разрывов страниц.

Answer 1

Это вероятно потому, что рефлексивный макет в стиле бутстрапа (col-*) в разрешенном CSS-карте отображается на float. CSS2PDF в основном конвертирует HTML с разрешенным CSS в XSL FO и форматирует его. В XSL FO (и на любом странично-ориентированном языке) "float" не может быть больше страницы.

Попробуйте просто отформатировать без class="col-lg-12 col-md-12 col-sm-12 col-xs-12".

У вас возникнет та же проблема, если вы попытаетесь отформатировать страницу в три столбца, используя col-md-4 для каждого столбца. Они разрешат до трех поплавков бок о бок, и вы не сможете контролировать их поведение, если они больше страницы, это нарушит форматирование. Даже браузерам трудно "напечатать" это.