How to add a header and footer to a PDF generated with DOMPDF and Laravel 5.8
Stefan Bogdanescu
Founder & Senior Architect · 2026-06-29
Jako doświadczony programista, postaram się dostarczyć kompleksową odpowiedź dotyczącą Twoich pytań związanych z implementacją nagłówków (Header) i stóp (Footer) oraz dynamiczną numeracją stron w przypadku generowania plików PDF.
Problemy, które napotykasz, wynikają zazwyczaj z mieszania logiki prezentacji (HTML/CSS) z logiką generowania dokumentu (PDF generation). Poniżej przedstawiam szczegółowe podejście techniczne i najlepsze praktyki.
1. Implementacja Nagłówków i Stóp w PDF
Aby nagłówek i stopka były widoczne na każdej stronie wygenerowanego PDF, musimy rozróżnić, jak to osiągnąć w zależności od narzędzia, którego używasz do generowania PDF (np. biblioteki PHP/Python, JavaScript z Puppeteer, czy systemy typu LaTeX).
A. Struktura HTML/CSS dla Widoczności na Stronie Webowej
Jeśli generujesz PDF za pomocą konwertera przeglądarki (jak wkhtmltopdf), najprostszym sposobem jest użycie standardowego CSS do ustalenia stałego położenia elementów:
/* W pliku CSS */
header {
position: fixed; /* Utrzymuje nagłówek na stałe, niezależnie od przewijania */
top: 0;
left: 0;
width: 100%;
background-color: #f0f0f0; /* Przykład tła */
z-index: 1000; /* Upewnia się, że nagłówek jest nad treścią */
}
footer {
position: fixed; /* Utrzymuje stopkę na stałe */
bottom: 0;
left: 0;
width: 100%;
background-color: #e0e0e0;
z-index: 1000;
}
/* Ważne: Musisz odjąć wysokość nagłówka/stopki od treści, aby treść nie była zasłonięta */
body {
padding-top: 60px; /* Dodać miejsce na zawartość nagłówka */
padding-bottom: 50px; /* Dodać miejsce na zawartość stopki */
}
B. Wyzwanie PDF i Rozwiązanie (Dynamiczna Numeracja Stron)
W przypadku generowania PDF, standardowe CSS z position: fixed działa na stronie internetowej, ale nie jest bezpośrednio przenoszone do formatu PDF. Aby uzyskać dynamiczną numerację stron w stopce PDF, musisz zastosować logikę po stronie serwera lub w bibliotece generującej PDF.
Najlepsza praktyka: Nie polegaj wyłącznie na HTML/CSS dla elementów statycznych w PDF. Zamiast tego, użyj funkcji specyficznych dla generatora PDF:
- Logika Serwerowa (PHP/Python): Po wygenerowaniu wszystkich stron dokumentu, skrypt serwerowy powinien iterować po każdej stronie i dynamicznie wstawiać numer strony oraz informacje o całkowitej liczbie stron do stopki każdego pliku.
- Biblioteki PDF: Jeśli używasz bibliotek takich jak TCPDF czy FPDF w PHP, te biblioteki oferują mechanizmy do ustawiania nagłówków i stóp na poziomie dokumentu, które automatycznie obsługują numerację.
2. Dodawanie Dynamicznej Numeracji Stron do Stopki
Aby dodać dynamiczną informację typu "[page number] from [number of pages]" do stopki, musisz mieć dostęp do informacji o aktualnej pozycji w całym dokumencie.
Przykład Koncepcyjny (Pseudokod dla Logiki Serwerowej)
Załóżmy, że generujesz PDF i masz dostęp do obiektu document oraz liczby stron:
// Wewnątrz pętli generującej strony...
$currentPage = $pageNumber;
$totalPages = $totalPageCount;
// Tworzenie stopki dla bieżącej strony
$footerContent = "Strona $currentPage z $totalPages";
// Wstawienie do szablonu PDF
$pdf->write($pageNumber, $content);
$pdf->addPage();
$pdf->writeFooter($footerContent); // Funkcja generująca stopkę
W tym scenariuszu, zamiast polegać na statycznym HTML, używasz kodu po stronie serwera do wstawienia zmiennych dynamicznych bezpośrednio w strukturę PDF. Jest to znacznie bardziej niezawodne przy tworzeniu profesjonalnych dokumentów (co jest kluczowe, gdy rozwijasz projekty, podobnie jak w przypadku frameworków Laravel, które dążą do czystej i strukturalnej implementacji).
3. Analiza Twojego Fragmentu Kodu HTML
Fragment kodu, który mi dostarczyłeś, zawiera już strukturę stopki:
<tfoot>
<!-- ... treść sumowania ... -->
<tr...>
<td colspan="3"></td>
<td align="right">Total $</td>
<td align="right" class="gray">$ 1929.3</td>
</tr>
</tfoot>
Jeśli chcesz, aby ta stopka była widoczna w PDF i zawierała dynamic