Html2pdf 单元格中的图像与其他单元格重叠

Question

我正在使用 Html2pdf 并遇到奇怪的问题：

如您所见，我的图像在 table 内并且在其下方重叠 tr

Html结构：

<table>
    <tbody>
        <tr>
            <td rowspan="2" class="page-title">
                Running style - head and arms isolated           
            </td>
            <td>
                EARLY: Physical - Fast
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr class="images single">
            <td colspan="2">
                <img src="http://example.com" alt="">
            </td>
        </tr>
        <tr>
            <td colspan="2" class="block-header">
                Outcomes                    
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Know how to keep head still and employ efficient, correct arm drive
            </td>
        </tr>
        /* ... */
    </tbody>
</table>

CSS:

<style>
    table {
        width: 100%;
    }

    td {
        width: 50%;
    }

    tr img {
        width: 70%;
    }
</style>

打印为 HTML 会产生正确的结果。

知道有什么问题吗？

Answer 1

明确设置图像的高度：

...
        <td colspan="2">
            <img style="height:350px" src="http://example.com" alt="">
        </td>
...

Answer 2

不太确定，但如果指定图像高度，您也许可以使用 js 获取 img 高度 img.naturalheight();

function getImgSize(imgSrc) {
var newImg = new Image();

newImg.onload = function() {
  var height = newImg.height;
  alert ('The image size is '+height);}


newImg.src = imgSrc; // this must be done AFTER setting onload }

Answer 3

也许可以尝试在图像后面的新行中添加具有特定高度的空白 div。以便图像底部和文本开始位置的顶部之间有足够的 space。

<div style="height:200px;Width:100px;">&nbsp</div>

所以它看起来像这样

    <tr class="images single">
        <td colspan="2">
            <img src="http://example.com" alt="">
        </td>
    </tr>

    <tr>
        <td>
            <div style="height:200px;Width:100px;">&nbsp</div>
        </td>
    </tr>

    <tr>
        <td colspan="2" class="block-header">
            Outcomes                    
        </td>
    </tr>

您可能需要尝试 div 样式的高度错误。宽度没那么重要。

同时检查您是否在 "images single" class 样式中设置了高度或宽度或位置（即：Position:Absolute;），这可能是导致叠加的原因。

如果这不起作用，那么可以尝试将 Div 放在与文本相同的单元格中，但就在文本开始之前。

    <tr>
        <td colspan="2" class="block-header">

              <div style="height:200px;Width:100px;">&nbsp</div>

            Outcomes                    
        </td>
    </tr>

Answer 4

一些导致错误的事实：

td 只有 50% 宽度
在浏览器视图中 colspan="2" 将导致 100% 单元格宽度。

现在要解决这个问题，我所要做的就是设置 tr.single td {width: 100%}。
添加该行修复了 HTML2PDF 中的图像重叠问题。

Html2pdf 单元格中的图像与其他单元格重叠

Html2pdf Image in cell overlaps other cells

html

css

html2pdf