rain storm
With that setup there’s an important limitation:
The browser’s print engine does the pagination for you, and CSS has no way to know which page is last or which is page 2+.
So you cannot say “element X only on last page” or “show green bar only from page 2” with pure CSS while letting the browser auto-break the pages.
To get the layout you showed, you have to build the pages yourself in Vue and then let window.print() print those “page blocks”.
Overall idea
- Split your data into pages in Vue (e.g. 20 table rows per page).
- Render each page as its own <div class="page"> with header + content + footer.
- Use page-break-after in CSS so each .page becomes a physical page.
- Use Vue conditionals to show:
green bar only when pageIndex > 0
red block only when pageIndex === pages.length - 1
blue footer on every page
tiny rover