Фон
У меня есть простая система создания документов, которая является частью приложения Python Django. Для загрузки в формате PDF используется функция печати в pdf Chromium, выполняемая из контейнера Docker путем передачи URL-адреса страницы документа из приложения Django.
HTML-код редактируется с использованием TinyMCE.
Проблема
Над некоторыми изображениями появляются большие пропуски без очевидной разницы между теми, которые имеют, и теми, у которых нет пропусков.
Я установил границы вокругHTML-теги разных цветов, чтобы попытаться увидеть, что содержит пустое пространство:
- div: красный
- p: зеленый
- span: синий
- img: черный
- тд: оранжевый
доказательства
В браузере выглядит оскорбительный раздел страницы:
Полученный файл PDF выглядит следующим образом с большим разрывом в середине:
HTML-код для этого раздела:
<div class="content flex None">
<div class="docsection flex">
<div class="wrapper">
<div class="header" style="position: relative;">
<!-- the trigger element if no value set yet -->
<a href="" id="docsection_title70-btn" class="text-darken-2 inplace-editor-trigger error" style="" data-for="docsection_title70">
Add title
</a>
<!-- the actual output content if there is any yet -->
<h2 class="inplace-editor-content
tooltip
title" data-position="top" data-tooltip="Click to edit" data-for="docsection_title70">
</h2>
</div>
<div class="copy tinymce" style="position: relative;">
<!-- the trigger element if no value set yet -->
<a href="" id="docsection_content70-btn" class="text-darken-2 inplace-editor-trigger error" style="display: none;" data-for="docsection_content70">
Add content
</a>
<!-- the actual output content if there is any yet -->
<div class="inplace-editor-content
tooltip
" data-position="top" data-tooltip="Click to edit" data-for="docsection_content70">
<table style="border-collapse: collapse; width: 98.811%; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td>
<h2 style="text-align: center;"><strong><span style="color: #34495e;">Clients bring briefs</span></strong></h2>
</td>
<td>
<h2 style="text-align: center;"><strong><span style="color: #34495e;">Teams get together</span></strong></h2>
</td>
</tr>
</tbody>
</table>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="data:image/png;base64,blahblahblah-image-data" width="848" height="455"></p>
</div>
</div>
</div>
</div>
</div>
Есть идеи, почему существует такой разрыв с, по-видимому, без контейнера ???