TCPDF 生成：图像在过高时流入下一列

Question

我目前正在生成 pdf 报告类型，其中几篇文章被合并到给定的布局中。几天前，我不得不更改 pdf 的结构，以便将文章文本分为三个单独的栏。

我面临的问题是，一旦您将图像插入 html 并且图像太高而无法放入第一列，例如，它会被放入第二列它应该是，但由于一些奇怪的间距或其他不同的东西，它向右偏移，因此图像的一半被推到以下列：

我为要生成的 PDF 生成 Html 的方式相当简单：

// add source to article
$htmlString  = '<p style="font-size: 17px;">' . $valVal['source'] . ' vom ' . $valVal['date'] . '</p>';

// add title to article
$htmlString .= '<p style="font-size: 22px; text-align: left;">' . $valVal['title'] . '</p>';

// Add subtitle to article
if ($valVal['subtitle'] != '' && $valVal['subtitle'] != null) {
    $htmlString .= '<p style="font-size: 13px; text-align: justify; padding: 0; margin: 0; font-weight: bold;">' . $valVal['subtitle'] . '</p>';
}

$this->pdf->writeHtml($htmlString . '<p><br></p>', true, false, false, false, '');
$htmlString = '';

$this->pdf->setEqualColumns(3, 57);  // KEY PART -  number of cols and width
$this->pdf->selectColumn(); // select proper column

// Add summary
if ($valVal['summary'] != '' && $valVal['summary'] != null) {
    $htmlString .= '<p style="font-size: 13px;">Zusammenfassung:</p>';
    $htmlString .= '<div class="article-summary" style="font-size: 13px; text-align: justify; padding-bottom: 0; margin-bottom: 0;">';

    // if there are image captions, style them
    if(preg_match("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", $valVal['summary'])) {
        $valVal['summary'] = preg_replace("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", '<div style="background-color: #ffffff; font-size: 9px;"></div>', $valVal['summary']);
        $valVal['summary'] = preg_replace("/<img([\w\W]+?)(\/|)>/", '<div style="text-align:center;">[=10=]</div>', $valVal['summary']);
    }

    $htmlString .= $valVal['summary'];

    $htmlString .= '</div>';
}

// build html string for the article's text
$htmlString .= '<p style="font-size: 13px; text-align: justify;">';

// if there are image captions, style them
if(preg_match("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", $valVal['excerpt'])) {
    $valVal['excerpt'] = preg_replace("/(\<figcaption.*\>)(.*)(\<\/figcaption\>)/", '<div style="background-color: #ffffff; font-size: 9px;"></div>', $valVal['excerpt']);
    $valVal['excerpt'] = preg_replace("/<img([\w\W]+?)(\/|)>/", '<div style="text-align:center;">[=10=]</div>', $valVal['excerpt']);
}

$htmlString .= $valVal['excerpt'];
$htmlString .= '</p>';

$this->writeHyphenatedHtml($htmlString); // the function uses the php library "Syllable" and then inserts the text via "WriteHtml" - this is not the issue, I've tested without the hyphenation

有没有人遇到过相关问题并且知道我该如何改进它？

编辑：特定部分的生成 html 如下所示 - 请忽略 html 实体：

<p>&#8222;AC/DC
   bietet sich doch eigentlich fürs Klavier an&#8220;, kündigt Rüth im vollbesetzten Kammermusiksaal nach
   knapp 100 überraschenden Konzertminuten die letzte Zugabe an.
   &#8222;Oder Löwenzahn&#8220;
   ergänzt ihre Bühnenkollegin Ming mit
   koreanischen Wurzeln. Sie eröffnen
   mit Johann Sebastian Bachs
   &#8222;Toccata&#8220; und treiben
   sich gegenseitig an ihren Flügeln sitzend in den HardrockRhythmus der
   australischen Rockband hinein.
   &#8222;Thunderstruck&#8220; von
   AC/DC.
</p>
<figure id="attachment_620" style="width: 201px"
   class="wp-caption alignnone">
   <div
      style="text-align:center;"><img
      class="wp-image-620 size-full" src="
      http://127.0.0.1/_project/wp-content/uploads/2019/01/bild-2.jpg"
      alt="" width="201" height="245"
      /></div>
   <figcaption class="wp-caption-text">
      <div style="background-color: #ffffff; font-size: 9px;">Die beiden
         Musikerinnen nach der Show. (c)
         Spiegel online
      </div>
   </figcaption>
</figure>
<p> Die beiden Musikerinnen spielen im Sitzen, im Stehen und im Liegen. Sie zupfen die
   Saiten der beiden Flügel, sie benutzen sie als Percussions-Instrument
   oder einfach nur als Ablage für ihre
</p>

Answer 1

这个 <div style="text-align:center;"> 你包裹你的图像是问题所在。我假设这是为了在您的图像未跨越列的整个宽度时确保居中对齐。更改 text-alignment 不会更改内部提供给 Image 的值，因此它是当前 layout/parser 状态和列中断处理的某种组合。此时调试TCPDF状态有点超出我的能力范围

但是，我确实有一个解决方法：Table 支持在 TCPDF 中更强大一些，因此不要使用 div 来执行此中心对齐，而是使用 single-cell table。即：<table width="100%"><tbody><tr><td align="center"></td></tr></tbody></table>

这是我用来在下面的屏幕截图中生成输出的图像格式代码：

$valVal['excerpt'] = preg_replace("/<img([\w\W]+?)(\/|)>/", '<table width="100%"><tbody><tr><td align="center">[=10=]</td></tr></tbody></table>', $valVal['excerpt']);
//I'm wrapping any image tag here. 
$valVal['excerpt'] = str_replace('<figcaption', '<div style="font-size: 9px;" ', $valVal['excerpt']);
$valVal['excerpt'] = str_replace('</figcaption', '</div', $valVal['excerpt']);
//figcaption not supported. Replacing to preserve proper text placement.

注意： TCPDF 从输入 HTML 中删除了 figcaption 和 figure，所以我偷懒了，只是用 divs 替换了 figcaption。在测试中，我发现通过将您的图像与 table 对齐，您的字幕 必须由支持的 BLOCK-LEVEL 标签 包裹，否则字幕文本将不会出现在列。

TCPDF 生成：图像在过高时流入下一列

TCPDF generation: image flows into next column when too high

html

php

pdf

pdf-generation

tcpdf