javascripthtmlcssmedia-queries

How to show a custom footer only on the last printed page using pure HTML and CSS?


I need to generate a printed document directly in the browser (Chrome), using only HTML and CSS

My goal is to:
display a custom footer (e.g., a specific string) only on the last printed page.
Here's what I've tried:

@media print {
  #last_page {
    page: last_page;
  }
}
@page last_page {
  @bottom-left {
    content: "Rodapé";
  }
}

However, this approach always causes a page break before the final page, which wastes space

Is there any better solution to show a custom footer only on the last physical printed page, without forcing a page break?
Obs: the content of page is dynamic


Solution

  • Unfortunately, pure HTML and CSS cannot reliably detect or target the last printed page without triggering a forced page break.

    As an alternative, you can use paged.js. Its an open-source library designed to handle advanced print layout in browsers ( https://pagedjs.org/) .