本地 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 工作正常。