Chrome does not support the css @page?

Question

I have css for print as simple as this:

@page {
  @top-left {
    content: "TOP SECRET";
    color: red
  }
  @bottom-center {
    content: counter(page);
    font-style: italic
  }
}

But the Chrome print preview and save to pdf seems not to recognize this at all. How can I correctly set the header and footer when priting?

EDIT: @page is supported by none ref

However, do I have other choice to do this. I'm not working on websites. The product wants a pdf as result only. I can accept chrome, webkit, plantomjs etc.

Answer 1

You can use the open tool PagedJS to render iframes or whole pages using the CSS paged-media spec. https://pagedjs.org/

This tool is a polyfill that converts blocks like the one you posted (CSS Paged Media that isn't implemented by browsers) into browser-compliant html/css.

It also has a CLI alternative that sets up puppeteer & creates PDF outputs: https://gitlab.coko.foundation/pagedjs/pagedjs-cli