puppeteer-sharp
puppeteer-sharp copied to clipboard
Images in page margins don't show when printing to PDF
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.
Can you share some code snippet we can test using puppeteer in node?