Nodejs Puppeteer Handlebars:如何在每个 pdf 页面中添加左右边框?

时间:2021-02-17 13:26:03

标签: css node.js pdf handlebars.js puppeteer

是否可以按页面提供 CSS 而不是 HTML 正文?

我试过了,但没有用,

my efforts: 

@page {
border : 1px solid; 
}

:root {
border : 1px solid; 
}

当我在正文中添加边框时,它工作正常,但它的封面只有正文其余页面没有像这样受到影响。

enter image description here

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();

当我运行上面的代码时,它提供了完美的输出,但没有显示每个页面边框。 你能帮我解决一下吗, 提前致谢。

0 个答案:

没有答案