是否可以按页面提供 CSS 而不是 HTML 正文?
我试过了,但没有用,
my efforts:
@page {
border : 1px solid;
}
:root {
border : 1px solid;
}
当我在正文中添加边框时,它工作正常,但它的封面只有正文其余页面没有像这样受到影响。
NodeJs 代码:
const hb = require('handlebars')
const htmlBody = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template HTML</title>
</head>
<body style=" margin-top:-10px; padding: 0em 2em;font-family: Arial, Helvetica, sans-serif; border: 1px solid;">
<div style="padding-top: 15px;">
<div style="font-size:20px;">
<p style="font-size:20px;line-height: 35px;">
{{#if description}}
{{description}}
{{/if}}
</p>
</div>
</div>
</body>
</html>`
const template = hb.compile(htmlBody, { strict: true });
const result = await template(data);
const html = result;
const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] })
const page = await browser.newPage()
await page.setContent(html)
const tempName = new Date().getTime() + Math.floor(1000 + Math.random() * 9000) + '.pdf'
const fileName = path.join(root, 'pdfTemplates', tempName)
await page.pdf({
path: fileName,
format: 'A4',
preferCSSPageSize: true,
printBackground: true,
displayHeaderFooter: true,
headerTemplate: `<span style="margin-left:21px; border: 1px solid; width:551px;"></span>`,
footerTemplate: `<span style="margin-left:21px; border: 1px solid; width:551px"></span>`,
margin: {
top: '23px',
left: '20px',
right: '20px',
bottom: '22.6px'
}
})
await browser.close();
当我运行上面的代码时,它提供了完美的输出,但没有显示每个页面边框。 你能帮我解决一下吗, 提前致谢。