Chromium print-to-pdf 在圖像上方添加空間

Question

的背景

我有一個簡單的文檔制作系統，它是 Python Django 應用程序的一部分。 The PDF download uses Chromium's print-to-pdf function running from a Docker container by passing in the URL of the document page from the Django app.

HTML 使用 TinyMCE 進行編輯。

問題

一些圖像上方出現了較大的間隙，有間隙的圖像和沒有間隙的圖像之間沒有明顯差異。

我在 HTML 標記周圍設置了不同顏色的邊框，以嘗試查看包含空白區域的內容：

• div：紅色
• p：綠色
• 跨度：藍色
• 圖：黑色
• td：橙色

證據

頁面的違規部分在瀏覽器中如下所示：

生成的 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>

任何想法為什么似乎沒有容器的間隙存在？？？

Answer 1

在簡化了 HTML 之后，問題就消失了，直到我刪除了調試邊框，並且 PDF 中的空白空間又回來了……將邊框減少到幻燈片頂部父級上的 1px 透明邊框保留了修復，所以這是Chromium 的 PDF 一代中的一個非常奇怪的錯誤。

因此，如果您遇到 PDF 間距錯誤，請在等待 Chromium 團隊回復的同時嘗試使用邊框。

干杯

富有的