1

I am generating PDF pages from HTML using Puppeteer. The problem I'm experiencing is I cannot satisfactorily create background image that covers the whole page for every page that the html->pdf generates.

For example, in the code below, if the HTML results in 3 PDF pages, the background image only shows up in the first page.

If I tried putting the background-image attribute in a div tag as a child of body (with position: fixed and width and height at 100%), then the last page would have only part of the page with the background image not the whole page.

I'm doing this in NodeJS.

I expect to see a background image that appears in every generated PDF page. However the code below only shows the background image on the first page.

Please help!



let args = [
    '--no-sandbox',
    '--disable-setuid-sandbox',
  ];


let options = {
      format: 'A5',
      printBackground: true,
      preferCSSPageSize: true
    };


const html = `
<html style="-webkit-print-color-adjust: exact; margin: 0;">
   <body style="background-image: url('https://...image.JPEG'), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); 
               background-position: fixed; 
               background-repeat: repeat; 
               background-size: 0 0/100% 100vh; 
               color: white; 
               margin: 0; 
               position: absolute; 
               top: 0; 
               z-index: 9999;">
      <div id="bodydiv" style="margin: 0;">
         <div id="contentwrapper" style="padding-bottom: 50px; padding-left: 50px; padding-right: 50px; padding-top: 50px;">
            <h1>hello <img src="https://...image.JPEG" style="border-radius: 15px; height: auto; width: 75%;"></h1>
         </div>
      </div>
   </body>
</html>
`;



  const browser = await puppeteer.launch({
    args: args
  });
  const page = await browser.newPage();
  await page.emulateMediaType('print');
  await page.setContent(html, {
        waitUntil: 'networkidle0', // wait for page to load completely
      });
  pdfObj['buffer'] = Buffer.from(Object.values(await page.pdf(options)));
Chris
  • 13
  • 3

0 Answers0