Spatie Browsershot 和信头 / CSS答案

【问题标题】：Spatie Browsershot and letterhead / CSSSpatie Browsershot 和信头 / CSS
【发布时间】：2020-05-24 16:01:33
【问题描述】：

我正在尝试使用 spatie/browsershot 和 laravel-browsershot wrapper 在 Laravel 应用程序中生成包含视图内容的 PDF；我使用 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>

我取得的最好成绩就是这个

虚线矩形是 SVG 文件中的区域，我希望视图的所有内容在该区域中流入所有页面，同时尊重设置的边距

我通过在 php 中删除 ->margins(....) 并将样式添加到 <body> 标记来实现它

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

如您所见，第一页底部和下一页顶部的页边距似乎为 0

【问题讨论】：

标签： php css laravel google-chrome-headless browsershot

【解决方案1】：

尝试以下方法：

Custom Header and Footer - https://github.com/spatie/browsershot#headers-and-footers

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

和

Handle page breaks - https://github.com/spatie/browsershot/issues/333

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

或

这可以通过<div style="page-break-inside: avoid;"> 解决。请记住，该属性在 flex 内不起作用。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
谢谢布赖恩，我改进了我的答案，以防链接从互联网上消失（当我找到死链接的答案时，我讨厌它，我完全忘记了）。
@TravisHi 谢谢你的回答，我没想到我的问题在发布很长时间后被注意到了。 `->headerHtml($someHtml)` 当我放置像<p>SomeText</p> however if I don't chain headerHtml` 这样的简单 html 方法时，标准 chrome 标题在我的例子中是用页面打印日期打印的。您能否建议如何构建 $someHtml 以包含所述图像？
@dascorp 例如~~~ ->headerHtml('
header
') ~~~