mPDF：table 中标题 [h1-hx] 边距的解决方法

Question

问题：

如何向属于 TD 或 TH 的标题 (h1 - h4) 添加边距 and/or 填充？

现状：

我有一个由 JIRA 生成的 pre-generated HTML 文档。本文档结构如下：

<tr class="rowAlternate">
  <td class="jira-macro-table-underline-pdfexport">
    <h1><a name="StandardizedInterface"></a>Standardized Interface</span></h1>
    <h2><a name="ShortDescription"></a>Short Description</h2>
    <ul> ... </ul>
  </td>
</tr>

我用 <tocentry> 和其他 mPDF-specific 元素以编程方式扩展了该文档，因此它可以用作讲义，生成的 PDF 看起来相当不错，但我在标题方面存在一个主要问题表。

这是文档在浏览器中的显示方式：

内部生成的 PDF：

可以看到标题的边距在 PDF 导出中消失了。到目前为止，我所有将内联 CSS 添加到标题或用其他元素包裹它们的测试都失败了。 mPDF documentation 表示：

Block-level tags (DIV, P etc) are ignored inside tables, including any CSS styles.

这很可能意味着这不能用纯 CSS 或包装来完成。

我希望之前有人遇到过这个问题，并且可以分享一些关于如何在块元素周围实现间距的见解。

Answer 1

您需要将标记转换为类似于以下的格式：

<table>
    <tr>
        <td class="h1">Report</td>
    </tr>

    <tr>
        <td class="h2">Description</td>
    </tr>

    <tr>
        <td>Body</td>
    </tr>
</table>

然后您可以通过定位 class 名称对 <td> 元素应用适当的填充：

<style>
table, th, td {
    border: none;
}

td.h1 {
    padding: 30px 0;
}

td.h2 {
    padding: 15px 0;
}
</style>

Use a DOM parser like the one from Symfony 帮助您遍历当前标记并自动以正确的格式重建它。

Answer 2

解决方法/解决方案

我使用了一种变通方法，通过使用 preg_replace_callback() 解决了我的问题，无论如何我都需要它来正确格式化我的文档。每当回调处理标题时，我都会在标题文本后添加一个透明图像，标题文本的高度是我通过一些数学运算定义的。

代码

function formatHeading($p) {

  // I only want headings for h1-h3:
  $tocEntry= '';
  if (is_numeric($p[2]) &&  $p[2] >= 1 && $p[2] <= 3) {
    $tocEntry= "<tocentry level=\"{$p[2]}\" content=\"{$p[3]}\" />";
  }

  // calculates the heights of the vertical spacer
  $spacerHeight= ((6-$p[2]) * 10);

  return
  "{$p[1]}{$tocEntry} {$p[3]} {$p[4]}
   <img src=\"../assets/images/transparent.png\" height=\"{$spacerHeight}\" style=\"vertical-align:middle;\" width=\"1\" border=\"0\"/>";
}

// Matches e.g. "<h2><a name="SimpleTest"></a>Simple test</h2>"
$buffered= preg_replace_callback('|(<h(\d)+>?<a?[\w\s\d="%>]+<\/a>)(.+?[\s\r\n\']*.*)(<\/h\d+>)|',
  "formatHeading", $buffered);

结果

为了说明垫片的位置，我使用 non-transparent 图像生成 PDF：

mPDF：table 中标题 [h1-hx] 边距的解决方法

mPDF: workaround for heading [h1-hx] margins in table

mpdf

解决方法/解决方案

代码

结果