he creado un encabezado y un pie de página que solo se mostrarán cuando el usuario exporte la página, estoy tratando de agregar una paginación personalizada al imprimir, pero no parece incrementarse y está atascado en la "Página 1", ¿hay alguna forma de CSS para detectar salto de página? tengo un salto de página después: siempre en uno de los componentes, ya que generalmente tiene más de 1 página cuando se exporta. ¿O es porque mi pie de página está en un div separado de los componentes?
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>