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

【问题标题】：mPDF: workaround for heading [h1-hx] margins in tablemPDF：表中标题 [h1-hx] 边距的解决方法
【发布时间】：2019-03-25 14:30:30
【问题描述】：

问题：

如何为 TD 或 TH 的标题 (h1 - h4) 添加边距和/或填充？

现状：

我有一个由 JIRA 生成的预生成 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 的元素扩展此文档，以便将其用作讲义，生成的 PDF 看起来相当不错，但我对表格中的标题有一个主要问题。

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

内部生成的 PDF：

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

块级标签（DIV、P 等）在表中被忽略，包括任何 CSS 样式。

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

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

【问题讨论】：

标签： mpdf

【解决方案1】：

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

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

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

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

然后，您可以通过定位类名对 <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 帮助您遍历当前标记并以正确的格式自动重建它。

【讨论】：

感谢您的推荐，但由于我不知道我将收到的文档结构，我无法简单地转换所有内容。在某些情况下，我会收到一个表格，一个包含表格的表格，一个根本没有任何表格的页面。我想出了一种方法，虽然它适用于我的情况，但将其添加为这个问题的答案。再次感谢您的想法！

【解决方案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);

结果

为了说明垫片的位置，我使用了不透明的图像来生成 PDF：

【讨论】：