Print media query for header/footer

[martynhoyer]

Hi!

I found this repo after reading this thread - the commenter is right - it's a lifesaver, so thank you so much!

I have a question though - I'm trying to make a page that can be viewed as a webpage, but can also have a PDF generated from it - with a header and footer applied (mostly for page numbering).

For the body content I'm using some print CSS (via the @media print {} CSS query) to make a few style changes between the PDF version and the web version which is working well, but if I apply something like:

  @media screen {
    #header,
    #footer {
      display: none;
    }
  }

  @media print {
    #header,
    #footer {
      display: block;
    }
  }

to the CSS, the header/footer aren't rendered at all on the PDF.

I'm not quite sure why that is... I'm sort of assuming the header and footer templates get kind of pre-rendered and inserted to the PDF, so maybe aren't evaluated as being print media? I had a look at the code but can't really work it out.

Do you think it might be an easy fix? Other than this it's working beautifully for me!

[PejmanNik]

Hi, Thank you so much🤩

Can you try await page.emulateMedia('print'); before pass the page to this lib? if it works I can embed it inside the lib;

[martynhoyer]

Thanks for the quick response!

It looks like that worked, although I had to use await page.emulateMediaType("print");. Looks like emulateMedia was deprecated - puppeteer/puppeteer#6084

I'm happy just keeping that in my PDF script if you don't want to force it in this library.

[PejmanNik]

Thank you for using it.
Happy to hear that. I think it can be inside the library.