Question

我正在使用Html2pdf并面临一个奇怪的问题：

当你看到我的图片在桌子内并且在它下面重叠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.naturalheight（）获得img高度;

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。这样在图像底部和文本开始位置的顶部之间就有足够的空间。

<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风格高度的错误。宽度并不重要。

同时检查你是否在＆＃34;图像中设置了高度或宽度或位置（即：位置：绝对;）。类风格，可能是导致叠加的原因。

如果这不起作用，那么可以尝试将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单元格中的图像与其他单元格重叠

4 个答案: