Page number on footer (every page)

2,144 views
Skip to first unread message

rap...@vistaonline.com.br

unread,
Oct 2, 2017, 4:34:43 PM10/2/17
to dompdf
Hi everyone.

I'm trying to add a footer on every page with its number, but i'm having some problems.

I'm using Laravel Blade.

PHP:
public function gerarPDF($id, $dataInicio, $dataFim){
$pdf = PDF::setOptions([
'isHtml5ParserEnabled'=>true,
'isRemoteEnabled'=> true,
'isPhpEnabled'=>true,
'debugPng' => true,
])->loadView('pdfRelatorio',[  // all this variables are being setted
'device' => $device,
'cliente' => $cliente,
'dataFim' => $dataFim,
'positions' => $positions,
'dataInicio' => $dataInicio,
])->setPaper('a4','landscape');

 return $pdf->stream($position->placa.'.pdf');
}

HTML + CSS:
<!doctype html>
<html>

<head>
<meta charset="UTF-8" />
<style type="text/css" media="all">
#logo {
max-width:150px;
}
.borda_table {
border: 1px solid black;
}
td, th, tr {
font-size: 8pt;
}
.borda {
border: 1px solid black;
}

/* quebra de página */
table { page-break-inside:auto; }
tr    { page-break-inside:avoid; page-break-after:auto; }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

.titulos {
font-weight: bold;
border: 1px solid black;
background-color: #2469b1 !important;
}
.borda_inferior {
border-bottom: 1px solid black;
}
.alinha {
text-align: right;
}
.text-center {
text-align: center;
}
.borda_esquerda {
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.borda_direita {
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.fonte { 
font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}
.footer {
width: 100%;
text-align: center;
position: fixed;
font-size: 8pt;
bottom: 0px;
}
.pagenum:before {
content: counter(page);
}
tr:nth-child(even){background-color: #cbcffb}
</style>
</head>
<div id="imprima">
<body>
<div class="footer">
Página <span class="pagenum"></span>
</div>
<table class="fonte">
<thead>
<tr>
<th colspan="5">
<b>EMPRESA: </b>{{ $cliente->nome }}<br>
@if(Auth::user()->cliente_id != 0)
<b>EMAIL: </b>{{ $cliente->email }}<br>
@endif
<b>PERÍODO SELECIONADO:</b> de {{ date('d/m/Y', strtotime($dataInicio)) }} até {{ date('d/m/Y', strtotime($dataFim)) }}
</th>
<th colspan="3"></th>
<th class="alinha references">
<img src="{!! public_path("/img/logo-cv.png") !!}" id="logo">
</th>
</tr>
<tr class="titulos">
<th class="text-center borda">Data/Hora Última Com.</th>
<th class="text-center borda">Data/Hora GPS</th>
<th class="text-center borda">Placa</th>
<th class="text-center borda">ID</th>
<th class="text-center borda">Endereço</th>
<th class="text-center borda">Latitude</th>
<th class="text-center borda">Longitude</th>
<th class="text-center borda">Velocidade (km/h)</th>
<th class="text-center borda">Inf. Cliente</th>
</tr>
</thead>
<tbody>
@foreach ($positions as $k => $position)
<tr class="details">
<td class="text-center borda_esquerda">{{ date('d/m/Y H:i', strtotime($position->servertime))}}</td>
<td class="text-center borda_esquerda">{{ date('d/m/Y H:i', strtotime($position->fixtime))}}</td>
<td class="text-center borda_esquerda">{{ $position->placa }}</td>
<td class="text-center borda_esquerda">{{ $device->uniqueid }}</td>
<td class="text-center borda_esquerda">{{ $position->address }}</td>
<td class="text-center borda_esquerda">{{ $position->latitude }}</td>
<td class="text-center borda_esquerda">{{ $position->longitude }}</td>
@if($position->protocol == 'vss' || $position->protocol == 'vss_auto') 
@php 
$convertSpeed = $position->speed;
@endphp 
@else
@php 
$convertSpeed = $position->speed * 1.852;
$convertSpeed = number_format($convertSpeed, 1);
@endphp 
@endif
<td class="text-center borda_esquerda">{{ $convertSpeed }}</td>
<td class="text-center borda_esquerda borda_direita">{{ $position->name }}</td>
</tr>
@endforeach
</tbody>
</table>
</body>
</div>
</html>

The result i get is attached.

I don't know what I'm doing wrong, please somebody help.

ps.: sorry my poor english
CIC-0780.pdf

BrianS

unread,
Oct 2, 2017, 5:16:53 PM10/2/17
to dom...@googlegroups.com
This appears to be due to placing the fixed-position element inside another element. If you move that element so that it is a child of the body instead of <div id="imprima"> then it renders correctly.

Seems like something we've run across before but I couldn't find a related issue. If you have a moment and are so inclined please feel free to create a new issue for the problem: https://github.com/dompdf/dompdf/issues/new

-b

BrianS

unread,
Oct 3, 2017, 10:25:27 AM10/3/17
to dompdf
I forgot to note also that your body element is also contained inside <div id="imprima"> element, which is not structurally valid.
Message has been deleted

rap...@vistaonline.com.br

unread,
Oct 10, 2017, 12:01:01 PM10/10/17
to dompdf
Thanks, Brian. I removed the div tag and add the code below inside body tag.

<script type="text/php">
    if ( isset($pdf) ) {
        $x = 760;
$y = 561;
$text = "Página {PAGE_NUM} de {PAGE_COUNT}";
$font = $fontMetrics->get_font("Arial", "bold");
$size = 8;
$color = array(0,0,0);
$word_space = 0.0;
$char_space = 0.0;
$angle = 0.0; 
$pdf->page_text($x, $y, $text, $font, $size, $color, $word_space, $char_space, $angle);
        }
</script>

and put

<div class="footer">
    <span>{{ $today }}</span>
</div>

instead

<div class="footer">
    Página <span class="pagenum"></span>
</div>

I also removed this css:

tfoot { display:table-footer-group; }

.pagenum:before {
    content: counter(page);
}
Message has been deleted

rap...@vistaonline.com.br

unread,
Oct 10, 2017, 12:07:42 PM10/10/17
to dompdf
Now it's pretty better! (result attached)

Thanks again!
CIC-0780 (1).pdf

BrianS

unread,
Oct 17, 2017, 1:21:54 PM10/17/17
to dompdf
I went ahead and created an issue here: https://github.com/dompdf/dompdf/issues/1574



On Monday, October 2, 2017 at 5:16:53 PM UTC-4, BrianS wrote:
Reply all
Reply to author
Forward
0 new messages