使用 html css 将页脚添加到 pdf 的每一页

Question

我在 nodejs 中使用 ejs 文件生成 PDF。是否可以在生成的 PDF 的每一页上添加页脚？

这是我的 ejs 文件：

<!DOCTYPE html>
<html>
...
<head>
 <style>
  footer{
            background-color: red;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
 </style>
</head>
<body> ... </body>
<footer>
 <p>this is footer</p>
</footer>
</html>

这是我的 nodejs 代码片段：

ejs.renderFile(path.join(__dirname, './views', "report-template.ejs"), { invoicedata: JSON.parse(results[0].jsondata), moment:moment }, (fileerr, data) => {
                    if (fileerr) {
                        console.log("Error!", fileerr);
                    } else {
                        let options = {
                            "height": "11.7in",
                            "width": "8.3in",
                        }
                        pdf.create(data, options).toFile("report.pdf", function (err, data) {
                            if (err) {
                                console.log("error!!");
                            } else {
                                console.log("file created successfully");
                            }
                        })
                    }
                })

得到的输出pdf是：

screenshot of pdf

Answer 1

也许这个 CSS 能帮上忙？ IE。将“绝对”位置更改为固定位置？

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }
}

此问题中的一些评论可能会有所帮助： How to use HTML to print header and footer on every printed page of a document?

Answer 2

虽然在 HTML 中模拟分页页眉和页脚相当容易，但对于专为不受限制的页面宽度或长度而设计的格式而言，它们并不自然。

通常将 HTML 对象描述为变量的百分比 canvas PDF 所需的固定笛卡尔页面的转换容易出现舍入错误。

举个例子，主要目的是在 Microsoft Edge 中模拟 PDF 布局（基于 Chrome），但是 fiddle 在一个浏览器中非常适合查看和打印的因素将需要另外调整。

请参阅插图，其中 与目标打印机 完全相同的代码的页面在边缘打印预览中非常完美，在 Internet Explore 中受到 creep-age 的影响，在相同的打印机默认值！ crap-page 因此通常需要进行微调以保持同步，从而导致源代码的两个不同副本！

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Dynamic Styles: NewPage Breaking Headline News</title>

<!--
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-after"></a> 
 Generic break values
 NewPage break values
 Column break values
 Region break values
 Global values
-->

<style type="text/css" media="all">
.body {
    position: absolute;
}
#page {
   break-before: auto;
   margin: 0px;
   width: 736px;
   height: 1103px;
   position: relative;
}
h1 {
    text-align: center;
}

#page-break {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    padding: 20px;
    background-color: red;
    text-align: center;
}
</style>

</head>
<body>
<div id="page">
<div>
<br><h1>Headline on Page 1</h1>
...
 more content on Page 1
...
</div>
<div id="page-break"> Footline on Page 1 </div>
</div>
<div id="page">
<br><h1>Headline on Page 2</h1>
...
 more content on Page 2
...
<div id="page-break"> Footline on Page 2 </div>
</div>
<div id="page">
<br><br><h1>Headline on Page 3</h1>
...
 more content on Page 3
...
<div id="page-break"> Footline on Page 3 </div>
</div>
</body></html>

使用 html css 将页脚添加到 pdf 的每一页

Add Footer to every page of pdf using html css

html

css

pdf-generation

ejs

node.js