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

发布于 2025-01-11 19:42:56 字数 1626 浏览 1 评论 0原文

我正在使用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 得到的是：

pdf 的屏幕截图

原文

I am generating PDF using ejs file in nodejs. Is it possible to add Footer on every page of the generated PDF?

Here is my ejs file:

<!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>

here is my nodejs code snippet:

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");
                            }
                        })
                    }
                })

The output pdf getting is:

screenshot of pdf

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烂人 2025-01-18 19:42:56

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

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

此处作为示例，主要目标是在 Microsoft Edge（基于 Chrome）中模拟 PDF 布局，但在一个浏览器中非常适合查看和打印的小提琴因素将需要在另一个浏览器中进行调整。

请参阅插图，其中完全相同的代码和目标打印机的页面在边缘打印预览中非常完美，但在 Internet Explore 中，在相同的打印机默认设置上会出现蠕变！因此，该垃圾页面通常需要进行一些细微的调整才能保持同步，从而导致源代码的两个不同副本！

<!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>

Whilst it is fairly easy to emulate page breaks headers and footers in HTML they are not natural for a format that is designed for unfettered page widths or lengths.

It is common to describe HTML objects as % of a variable canvas the conversion to the fixed Cartesian pages needed by PDF is prone to rounding errors.

Here as an example, the primary aim was to emulate a PDF layout in Microsoft Edge (Chrome based) but the fiddle factors that work fairly well for view and print in one browser will need adjustments in another.

SEE the inset where the page for exactly the same code and target printer which is perfect in edge print preview, is subject to creep-age in Internet Explore, on the same printer defaults !! That crap-page thus often requires minor tweaking to keep it in sync, leading to two different copies of source !

<!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>

回复收藏 0 原文

季末如歌 2025-01-18 19:42:56

也许这个 CSS 可以提供帮助？即，将“绝对”位置更改为固定？

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

这个问题中有一些评论可能会有所帮助：
如何使用 HTML 在文档的每个打印页上打印页眉和页脚？

Maybe this CSS can help? I.e. change "absolute" position to fixed?

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

There were some comments in this question that might be helpful:
How to use HTML to print header and footer on every printed page of a document?

回复收藏 0 原文

猥︴琐丶欲为 2025-01-18 19:42:56

我们有同样的问题。我们找到了带有背景图像的解决方案。只需创建 A4 尺寸/像素的背景图像（您可以在谷歌上找到）。并尝试设置背景图片。希望它能起作用。祝一切顺利，谢谢。

回复收藏 0 原文

~没有更多了~

关于作者

述情

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。