本地 html 的 puppeteer css 未显示

Question

我正在尝试使用本地 html 生成 pdf，但 css 没有显示出来

 (async () => {
 var html = '<div style="width:500px; height:500px;background:blue">test</div>'
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.setContent(html)
 await page.pdf({path: 'hn.pdf', format: 'A4'});

 await browser.close();
 })();

我怎样才能让 css 工作？

Answer 1

将 printBackground: true 添加到您的 page.pdf 调用

await page.pdf({path: 'hn.pdf', format: 'A4', printBackground: true});

问题不在于 CSS，显示了 CSS，但是当您打印页面时，背景会被删除。尝试将 color:red; 添加到您的 CSS 中，您会发现 CSS 可以正常工作。