mpdf применяются только определенные стили - PullRequest
Новая
       10

mpdf применяются только определенные стили

0 голосов
/ 28 июня 2019

У меня, похоже, проблемы с MPDF , загружающими только определенные стили из моей внешней таблицы стилей.

Я создаю свой PDF в моем приложении Laravel, как это 

$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 или color h1.

Кто-нибудь еще испытывал это раньше? Это похоже на выбор и выбор стилей для применения, но поскольку он отображает PDF, я не могу использовать devtools для проверки!

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 28 июня 2019

Просто добавьте к вам объявления, как показано ниже 

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;
}
...