i have created a header and footer that will only show when the user exports the page, I am trying to add a custom pagination when printing but it does not seem to increment and is stuck with "Page 1", is there a way for the CSS to detect page break? i have a page-break-after: always in one of the components since it usually has more than 1 page when exported. or is it because my footer is in a separate div from the components?
body {
counter-reset: page 1;
}
@media print {
.pagebreak-after {
padding-top: 1rem;
page-break-after: always;
}
.print_footer {
visibility: visible;
position: fixed;
display: flex;
bottom: 2%;
padding: 1rem;
width: 100%;
border-top: 1px solid black;
}
.counter::after {
counter-increment: page;
content: " | Page " counter(page);
}
.adjust_on_print {
margin-top: 3rem !important;
}
.no-print {
display: none;
visibility: hidden;
}
.print_header {
visibility: visible;
position: fixed;
top: 2%;
width: 100%;
border-bottom: 1px solid gray;
}
}<div class="content">
<div class="row d-flex no-print">
<div v-if="false" class="col d-flex align-items-center">
<a class="nav-link" :href="json_data" :download="file_name">
<button class="btn btn-sm btn-outline-secondary d-flex align-items-center">
<i class="mdi mdi-printer mr-1" /><small>Export</small>
</button>
</a>
</div>
<div class="col d-flex align-items-center">
<button class="btn btn-sm btn-outline-secondary ml-auto d-flex align-items-center" @click.prevent="print_full">
<i class="mdi mdi-printer mr-1" /><small>{{btn_labels.print}}</small>
</button>
</div>
</div>
<ErmittlungDerHochstgrenzen ref="ermit" />
<WeitereBerechnungsgrundlagen class="my-3 pagebreak-after" ref="weitere" />
<ErmittlungAnerkannterHilfebedarf class="adjust_on_print" ref="ermit_annerkanter" />
</div>
<div :class="{'no-print':this.print}">
<div class="print_header">
<p>{{claim_info.Insurance_number}}</p>
<p>{{claim_info.First_name}} {{claim_info.Last_name}}</p>
</div>
<div class="print_footer">
<span class="mr-auto">Footer here</span>
<span class="mx-auto">{{claim_info.First_name}} {{claim_info.Last_name}}</span
>
<span class="ml-auto counter">{{claim_info.Date | moment('L')}}</span>
</div>
</div>