'Chrome does not support the css @page?

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.

cssgoogle-chromeprinting


Solution 1:[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

Solution 2:[2]

Near as I can determine, CSS features for paged media are primarily for systems that render for printing, rather than systems that render for the screen (browsers) or the print feature of browsers. An example of an HTML/CSS engine for printing is Prince. So, @page won't work in a browser, nor (as far as I know) was it intended to.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Olex Ponomarenko
Solution 2 Marc Rochkind

Related Questions