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文件中的某些样式！它将标题的背景设为紫色，但不会更改font-weight的{{1}}或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;
}

mpdf仅应用某些样式

1 个答案: