Question

我想将一个HTML模板转换为PDF文件，我在nodejs中通过使用一个名称为“ dynamic-html-pdf”的npm模块来完成此操作，HTML的内容不是固定的，因此是动态的，我给了边框到html中的父div，我希望将其应用于pdf文件的每一页。

但是它仅在左侧和右侧应用，并在最后一页结束。请参见下图。

我希望它在每个页面上作为边框应用于每个页面

此外，我想应用一些背景图标，因此我将其应用到了body标签，但是对于pdf的第一页却不是所有页面。

我需要更改什么CSS或其他内容？

<!doctype html>
<html style="height:100%;">
<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>letter</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    </style>
</head>
<body style="width: 100%;height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:100%;overflow:hidden;margin: 0;font-family: Arial,Helvetica Neue,Helvetica,sans-serif;">
    <div style="height:100%;background: linear-gradient(#2bd9b8, #659bff); background-repeat: no-repeat;padding:18px;">
        <div style="height:100%;background:url(https://img.icons8.com/wired/64/000000/turtle.png)center center no-repeat;background-size: 20%;background-color: #fff;padding: 20px;">
            <h1 style='margin-bottom: 0;font-size: 18px;'>abcde</h1>
            <br />
            <p style='margin: 0;float: left;font-size: 11px;width:100%;word-break: normal'>
                India</p>
            <br clear='all' />
            <p style='margin: 0;float: left;font-size: 11px;'><b>Registration No.</b><br /></p>
            <br clear='all' />
            <p style='margin: 0;margin-top: 30px;font-size: 11px;'>11-Apr-2019</p>
            <h1 style='color: #2bd9b8;text-align: center;margin-bottom: 30px !important;font-size:30px'>Letter</h1>
            <p style='margin: 0;font-size: 13px;'>To,</p>
            <p style='margin: 0;font-size: 13px;'>All People</p>
            <p style='margin-top: 15px;margin-bottom: 15px;font-size: 13px;'><b>Subject : Letter</b></p>
            <div style='min-height: 200px;line-height: 18px;font-size: 13px;font-weight: normal; text-align:justify;font-family: Arial,Helvetica Neue,Helvetica,sans-serif;'>Lorem PageMaker including versions of Lorem Ipsum</div>
            <div style="position:absolute;left:35px;right:35px;bottom:30px;">
                <p style='text-align: right; font-size: 14px'>User 123</p>
                <p style='text-align: right; margin:5px 0 5px 0;font-size: 12px'>Secretary</p>
                <p style='text-align: right; margin:50px 0 0 0;font-size: 12px'>Powered by <img src='https://img.icons8.com/wired/64/000000/turtle.png'
                        alt='logo' style='height: 20px;margin-left: 5px;' class='logo-footer' title='logo' /></p>
            </div>
        </div>
    </div>
</body>

</html>

我希望生成的pdf文件的所有页面都带有边框和背景图标

在将html转换为pdf时如何在生成的pdf文件的每一页上应用背景和边框

0 个答案: