puppeteer-sharp icon indicating copy to clipboard operation
puppeteer-sharp copied to clipboard

Images in page margins don't show when printing to PDF

Open RamirezCID opened this issue 8 months ago • 1 comments

I have this CSS rule:

@media print {
    @page {
        size: A4; /* or letter, depending on your needs */
        margin: 115px 0 90px 0;

        @top-left {
            content: "";
            background-image: url(https://dev.pujadas.es/img/logo.png) !important;
            background-size: 200px 56px;
            background-color: #e10600;
            background-repeat: no-repeat;
            background-position: 5% center;
            margin-bottom: 20px;
        }
...
}

This works if I open the page directly on my Chrome and print to pdf, the logo shows. If I run Puppeteer with Headless = false, if I print the page that is opened in the new Chrome instance, the logo shows as well. It's strictly when I do PdfDataAsync that the logo disappears, the background color is there. Works with the stuff I'm doing in the footer also. Doesn't seem related to Headless mode, same issue happens with Headless = false. Tried loading the image in the content instead, same issue.

Oh, and I am waiting for network idle. A regular img tag in the body of the PDF shows just fine.

RamirezCID avatar Mar 28 '25 16:03 RamirezCID

Can you share some code snippet we can test using puppeteer in node?

kblok avatar Apr 21 '25 11:04 kblok