mpdf 仅应用某些样式

Question

MPDF 似乎只从我的外部样式表中加载某些样式时遇到问题。

我正在像这样在我的 Laravel 应用程序中构建我的 PDF

$mpdf = new \Mpdf\Mpdf([
    'mode'           => 'utf-8',
    'margin_left'    => 0,
    'margin_right'   => 0,
    'margin_top'     => 50,
    'margin_bottom'  => 50,
    'margin_header'  => 0,
    'margin_footer'  => 0
]);
$mpdf->writeHTML(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/css/pdf.css'), 1);
$mpdf->setHTMLHeader(view('layouts.partials.pdf.header')->render());
$mpdf->setHTMLFooter(view('layouts.partials.pdf.footer')->render());
$mpdf->WriteHTML(view('layouts.pdf')->render(), 2);
$mpdf->Output();

工作正常，加载 HTML 内容也很好。

对于这个问题，它没有正确地将样式应用于我的标题。我的标题内容是这样的

<header>
    <table>
        <tr>
            <td class="left">
                <h1>My Title</h1>
            </td>
            <td class="right">
                @php
                //Get the image and convert to base 64
                $path = $_SERVER['DOCUMENT_ROOT'] . '/img/logo.png';
                $type = pathinfo($path, PATHINFO_EXTENSION);
                $data = file_get_contents($path);
                $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
                @endphp
                <img src="{{$base64}}" alt="My Logo">
            </td>
        </tr>
    </table>
</header>

这是完美的加载标题。

pdf.css 文件的内容如下所示

header {
  background-color: purple;
  height: 100px;
}

header table tr .left {
  width: 70%;
}

header table tr .left h1 {
  color: white !important;
  font-weight: bold !important;
}

header table tr .right {
  width: 30%;
}

header table tr .right img {
  width: 100px;
}

但它只应用pdf.css 文件中的某些样式！它将标题的背景着色为紫色，但不会更改h1 的font-weight 或color。

以前有没有其他人经历过这种情况？就像它选择要应用的样式一样，但是因为它呈现 PDF，我不能使用 devtools 来检查！

任何帮助将不胜感激。

Answer 1

只需将 td 添加到您的声明中，如下所示

header table tr td.left {
  width: 70%;
}

header table tr td.right {
  width: 30%;
}

header table tr td.left h1 {
  color: white !important;
  font-weight: bold !important;
}

header table tr td.right img {
  width: 100px;
}