Header and Footer not applying css in pdf generated by puppeteer

Question

I am adding header and footer template to the pdf generated by puppeteer but the css which I added is not applied totally.

await page.pdf({
  path: filePath,
  format : 'A4',
  printBackground : true,
  margin : { top : 35, bottom: 45},
  displayHeaderFooter : true,
  headerTemplate : `
    <div style="height: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 6px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.5px;">
      <span class="date"></span>
      <span class="title"></span>
      <span class="pageNumber"></span>
    </div>`,
  footerTemplate : `<span class="pageNumber" style="font-size: 20px;"></span>`
})

I have tested in browser this html was giving correct output. Moreover font-size was responding but not as in browser. ie I gave font-size : 16px in browser, it showed perfecly but with same value in pdf generated the font was too big.

Thing which I expected to work was justify-content but instead everything was on left side.

Which all css will it respond to?

Answer 1

尝试在 div 样式中添加width: 100%

<div style="width: 100%; display: flex; align-items: center; justify-content: space-between;">