Spat ie Browsershot и фирменный бланк / CSS - PullRequest
0 голосов
/ 09 февраля 2020

Я пытаюсь создать PDF с содержимым представления в приложении Laravel с использованием spatie / browsershot & laravel -browsershot wrapper ; Я использую svg в качестве фона моего бланка и хотел бы разместить содержимое представления в определенной области SVG на каждой странице. К сожалению, поля ->margins(40, 20, 40, 30) заставляют мой #watermark div смещаться с запасом - он больше не находится в фиксированной позиции 0,0. Не могли бы вы помочь мне правильно настроить водяные знаки div? Таким образом, это не зависит от полей страницы

в контроллере

 return PDF::loadView('pdf.letter', compact('letter'))
            ->showBackground()
            ->waitUntilNetworkIdle()
            ->margins(40, 20, 40, 30)
            ->format('A4')
            ->inline();

в моем блейде. Я установил следующее css

#watermark { 
 position: fixed;
 top: 0px;
 left: 0px;
 width: 21cm;
 height: 29.7cm;
 z-index: -1000;
}
<body>
    <div id="watermark">
        <img src="{{ asset('/img/a4.svg') }}" height="100%" width="100%" />
    </div>
    <div>
        <!-- The content of PDF here -->
    </div>
</body>

Лучшее, что я достигается это

here

, где da sh прямоугольник строки - это область в SVG-файле, где я sh все содержимое представления, чтобы пролистать все страницы, соблюдая установленные поля

Я добился этого путем удаления ->margins(....) в php и добавления стиля к тегу <body>

body {
 margin-top: 4cm;
 margin-right: 2cm;
 margin-bottom: 4cm;
 margin-left: 3cm;
}

, как вы видим, что поле на странице внизу 1-й страницы и в верхней части следующей страницы кажется равным 0

1 Ответ

0 голосов
/ 21 апреля 2020

Попробуйте следующее:

Пользовательские колонтитулы - https://github.com/spatie/browsershot#headers -и нижние колонтитулы

Browsershot::html($someHtml)
 ->showBrowserHeaderAndFooter()
 ->headerHtml($someHtml)
 ->footerHtml($someHtml)
 ->save('example.pdf');

и

Обрабатывать разрывы страниц - https://github.com/spatie/browsershot/issues/333

<div style="page-break-after:always;">

или

This can be solved with <div style="page-break-inside: avoid;">.
Just keep in mind the property doesn't work inside flex.
...