开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用wkhtmltopdf在页眉/页脚htmls中进行页码编号？

wkhtmltopdf 是一个开源工具，可以将 HTML 转换为 PDF 文件。要在页眉或页脚的 HTML 中进行页码编号，可以通过在 HTML 模板中使用 CSS 和 JavaScript 来实现。

基础概念

wkhtmltopdf: 是一个基于 WebKit 的工具，可以将 HTML 内容转换为 PDF。
页眉/页脚: 在 PDF 文件的顶部和底部添加的内容。
页码编号: 在页眉或页脚中显示当前页码。

相关优势

灵活性: 可以使用任何 HTML 和 CSS 来设计页眉和页脚。
准确性: 可以精确控制页码的位置和样式。
兼容性: 支持多种操作系统和浏览器。

类型

静态页眉/页脚: 内容固定不变。
动态页眉/页脚: 内容可以根据页面内容或页码动态变化。

应用场景

报告生成: 在报告中添加页码以便于阅读和引用。
书籍出版: 在书籍的页眉或页脚中添加页码。
发票和文档: 在正式文档中添加页码以确保完整性。

实现方法

以下是一个示例，展示如何在页眉中添加页码编号：

HTML 模板 (header.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Header</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .page-number {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="page-number" id="page-number">Page <span id="current-page">1</span> of <span id="total-pages">1</span></div>
    <script>
        window.onload = function() {
            var totalPages = {{ totalPages }};
            var currentPage = {{ currentPage }};
            document.getElementById('total-pages').innerText = totalPages;
            document.getElementById('current-page').innerText = currentPage;
        };
    </script>
</body>
</html>

使用 wkhtmltopdf 命令

wkhtmltopdf --header-html header.html input.html output.pdf

遇到的问题及解决方法

问题: 页码编号不正确

原因: 可能是由于 totalPages 或 currentPage 的值没有正确传递到 HTML 模板中。

解决方法:

确保在生成 PDF 时正确传递 totalPages 和 currentPage 的值。例如，可以使用 Python 脚本来生成 PDF：

import subprocess

header_html = 'header.html'
input_html = 'input.html'
output_pdf = 'output.pdf'

# 获取总页数
result = subprocess.run(['wkhtmltopdf', '--print-media-type', input_html], capture_output=True, text=True)
total_pages = result.stdout.count('page')

# 生成 PDF
subprocess.run(['wkhtmltopdf', '--header-html', header_html, '--footer-html', footer_html, input_html, output_pdf], env={
    'totalPages': str(total_pages),
    'currentPage': '1'
})

参考链接

通过以上方法，你可以在 wkhtmltopdf 的页眉或页脚 HTML 中实现页码编号。

相关搜索:有没有办法使用ColdFusion SpreadsheetSetHeader/Footer函数在页眉/页脚中添加Excel页码使用PowerShell在页眉/页脚中包含公共代码如何在C# VSTO Word插件中设置页眉和页脚文本以及页码？如何添加页眉或页脚以使用扩展的richtextbox进行打印？是否使用R在.docx报表中创建页眉和页脚？在Microsoft Access报表中对每组后的页码进行重新编号在LaTeX中,如何在文档类Letter中添加页眉/页脚？如何使用Js和ios-14在WKWebView中隐藏页眉和页脚使用MVC在zend框架中包含页眉/页脚的最佳方法在codeigniter中如何获取tcpdf自定义页眉和页脚如何使用图形API在邮件正文的页脚和页眉中发送徽标如何使用java中的routerLayout在其他视图中添加页脚和页眉如何使用jquery/ javascript分离html模板中的页眉、页脚和侧边栏使用AngularJS在输入类型编号中强制进行舍入我是否可以在Word中制作不同的部分，不仅具有相同的页眉和页脚，还可以使页码与整个文档对齐如何使用groovy render插件在PDF中显示页码当PdfTextElement不是一个选项时，使用SelectPDF.Net在每个页脚中添加页码？在Coldfusion中创建Word文档 - 如何进行分页编号？在HTML中打印时，如何为每页中的动态内容添加固定页眉和页脚？如何避免在zend框架中从ajax中获取数据时的页眉和页脚html代码？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Web应用程序如何创建 PDF

如果你有自己喜欢的工具或任何经验可以在评论中分享给我们。从HTML和CSS开始首先考虑如何使用HTML和CSS生成PDF版本。...首先，它会有页眉和页脚，当你从网页打印内容时，这些页眉和页脚会自动添加。当然如果你有一个样式表，它也会根据打印样式表进行格式化。...此外，我们无法控制页边距框中的内容，例如将我们选择的标题添加到每个页面或页码编号，以显示页数。这些内容是Paged Media规范的一部分，但尚未在任何浏览器中实现。...使用浏览器渲染引擎打印还有一些方法可以使用浏览器渲染引擎将文档打印成PDF，而不需要在浏览器中使用打印的菜单，并且以页眉和页脚结束。...可以将一些标志传递到wkhtmltopdf中，以便使用分页媒体规范在缺省情况下添加一些缺失的特性。然而，这确实需要一些额外的工作，除了写好的 HTML 和CSS。

2.8K3 0

wkhtmltopdf参数详解及精讲使用方法

，在页面的右头显示页码，这相对于进行了如下设置： --header-left...页眉和页脚参数选项 --footer-center 在页脚的居中部分显示页脚文本 --footer-font-name 设置页脚的字体...从标准输入获取参数如果你需要对许多页面进行批量的处理，并且感觉 wkhtmltopdf 开启比较慢，你可以尝试使用 --read-args-from-stdin 参数。...如果你不熟悉 BNF 的话，下面的代码段中是三个例子: http://user:password@myproxyserver:8080socks5://myproxyserverNone 页眉和页脚页眉和页脚可以使用参数...[page] 当前正在被输出页面的页码[frompage] 第一页在文档中的页码[topage] 最后一面在文档中的页码[webpage] 当前正在被输出页面的URL[section

9721 0

Java后端：html转pdf实战笔记

Wkhtmltopdf可直接把浏览器中浏览的网页转换成一个pdf，他是一个把html页面转换成pdf的软件（需要安装在服务器上）。使用时可通过java代码调用cmd指令完成网页转换为pdf的功能。...指定用户的样式表，加载在每一页中 –username HTTP认证的用户名 –version 输出版本信息退出 –zoom 使用这个缩放因子 (default 1)页眉和页脚选项 –header-center...* (添加一个HTML页眉,后面是网址) –header-left* (左对齐的页眉文本) –header-line* (显示一条线在页眉下) –header-right* (右对齐页眉文本) –header-spacing...* (设置页眉和内容的距离,默认0) –footer-center* (设置在中心位置的页脚内容) –footer-font-name* (设置页脚的字体名称) –footer-font-size* (...设置页脚的字体大小default 11) –footer-html* (添加一个HTML页脚,后面是网址) –footer-left* (左对齐的页脚文本) –footer-line* 显示一条线在页脚内容上

4.3K6 1

officeword 2010添加页眉页脚

所出现的情况如下: 在修改页眉文本时, 如果修改任何的页眉, 其他所有的页眉都会同步本次修改在修改页脚的页码时, 无法手动添加页面, 因为如果修改了其中的页脚, 其他的页脚也会同步本次的修改...一点是没有对文章进行分节(图一), 二是在编辑页眉时选中了链接到前一条页眉这个选项(图二) 所以我们首先应该对每一个章节结束后使用分隔符进行分割, 然后添加页眉图一 j 图二...注意:这里是因为我们在分节以后, 编写的页眉只会同步到本节的所有页眉, 因此最好是按照顺序修改页眉分隔符如何删除?..., 使其更加美观页脚编辑在编写页脚的时候, 我们可以使用wrod中自带的页码选项但需要注意的是, 因此我们对整个论文进行了分节, 因此页码设置的自增只会在本节有效, 所以要单独为每一节设置自增的页码...+1,如图三, 图四需要注意的是每次设置页码时, 都要注意在页眉页脚设计中链接到前一条页眉是否选中(页眉编辑图二), 我的默认选中, 如果选中, 取消即可图一图二图三图四

1.7K2 0

超详细论文排版秘籍，宜收藏！

双击页眉的位置进入页眉 / 页脚编辑状态，在【页眉和页脚工具】选项卡中，单击【页码】命令，在下拉列表中，单击【页面底端—普通数字 2】命令为当前节插入页码，如图3所示。...退出页眉/页脚编辑模式，在前置部分的末端，单击【布局】选项卡中的【分隔符】命令，在下拉列表中找到【分节符】，单击【下一页】命令来进行分节。小贴士此处如此操作是因为接下来的目录部分不要求有页码。...此时，目录的前后各有一个分节符，但是我们发现目录和正文的页码都是不对的。我们可以进行如下操作。首先，双击页面底部进入页眉 / 页脚编辑模式，将鼠标光标放置于目录所在节。...然后，在【页眉和页脚】选项卡中，找到【导航】组，单击【链接到前一节】命令。最后，选中该节的页码将其删除。小贴士如此，当前节的页眉/页脚设置才不会对前一节造成影响。（2）设置正文部分。...将光标移动到下一节，即正文部分，在【页眉和页脚】选项卡中，找到【导航】组，单击【链接到前一节】命令，取消对前一节的链接。选择【插入】选项卡中的【页码】命令，在下拉列表中选择合适的页码样式。

4.5K1 0

WdInformation 枚举

如果设置一个起始页码或进行其他手动调整，则返回经调整的页码（与 wdActiveEndPageNumber 不同）。...对页码编号的任何手动调整都将被忽略（与计数不同）。 wdActiveEndSectionNumber 2 返回节号，在该节中包含了指定的所选内容或区域的活动结尾。...wdHeaderFooterType 33 返回一个值，该值指示包含指定的所选内容或区域的页眉或页脚的类型，如下表所示。...wdInHeaderFooter 28 如果所选内容或区域的页眉或页脚窗格中或在页眉或页脚中打印版式视图中，则返回 True 。...wdInWordMail 37 如果所选内容或区域的页眉或页脚窗格中或在页眉或页脚中打印版式视图中，则返回 True 。

1.4K3 0

Word域的应用和详解

三、AutoNumOut 大纲样式编号 ▲使用方法：{ AutoNumOUT } AutoNumOUT. 可以在大纲样式中自动进行段落编号。...▲使用方法：{ Page [\* Format Switch ] } 在单击“插入”菜单中的“页码”命令或单击“页眉和页脚”工具栏上的“页码”按钮时插入 Page 域。...▲示例: 参见■例子2 : 页码例子(第 53 页）。参见■例子3 : 使奇偶页具有不同的页眉页脚 (第 53 页）。 ▲注意：修改“页码”字符样式，可改变页码的字符格式。...使用该域时，必须对第一节之后每一节的页从 1 开始重新编号。 ▲示例：要在已分节的文档的每一页上打印如“429”之类的文字，可在页眉和页脚中插入如下域和文字。...该开关可用于在页眉和页脚中插入章节号。 \h 隐藏域结果。用该开关可在交叉引用中使用一个 Seq 域而不打印编号。例如，要引用一个编了号的章节，但又不想打印章节号，那么可用该参数。

6.5K2 0

软件使用说明书编写格式规范

页面设置页边距上下1.5厘米，左后2.5厘米，纸张大小A4,纸宽21厘米，高度29.7厘米，页眉页脚距边界距离1.5厘米。目录格式：目录仅仅显示前3级标题。...编号位置左对齐，对齐位置0厘米，制表位位置0.76厘米，缩进位置0.76厘米。...二级标题：宋体，加粗，四号，两端对齐，大纲级别2级，悬挂缩进1.02厘米，段前段后0行，1.5倍行距，正规编号，起始编号阿拉伯数字“1”。...三级标题：宋体，加粗，小号，两端对齐，大纲级别3级，悬挂缩进1.27厘米，段前段后0行，1.5倍行距，正规编号，起始编号阿拉伯数字“1”。...页眉页脚正文页面页脚目录部分的页眉页脚的页码应该使用I、II、III的符号页面,其中页眉应该包含公司LOGO,公司名称，说明书的名称。页眉页脚离顶端距离0.9cm。

2.7K2 0

毕毕业论文排版（三）-页眉页脚

毕业论文排版（三）-页眉页脚子墨居士前言页眉页码的设置上一期讲的不清楚，一般来讲，论文的封面、目录和内容的页眉页码设置是不一样的，小编的论文就如此。因此将分三个步骤来设置：分节、页眉页脚。...二、页眉页脚设置分节完成后后面就方便了，一定要记得分节，不然页码永远都是从第一张开始统计的，第一页永远是第一页。...2.1 页眉设置页眉页脚的设置在章节位置，点击页眉页脚就可以进入设置界面进行设置即：页眉在没有设置页码的时候是比较简单的，就使用上一期的方法就可以了，只需要在页眉插入需要的内容即可，图标也可以...2.2 页码设置页码的设置上期页讲过设置方法，wps比较人性可以在页眉页脚的位置直接插入页码：现在知道为什么要分节了吧！...2.3 顶部标题页码有的学校就比较离谱，要求在页眉的位置同时放上单位和页码，单位居中，页码靠右：这种我的设置方法是先插入页码，在页脚的地方演示，下面是我设置的格式，如果不要求双面的选右侧就好。

1.6K3 0

word文档页码不连续编号怎么办_怎样给论文加页码

，也就是在第1页的左右两栏分别显示第1页和第2页，在第2页的左右两栏分别显示第3页和第4页，这样的效果该如何设置呢？...我们先在页脚中设置好添加页码的位置，这里使用制表位，关于制表位的使用技巧可以参考word达人带你玩转制表位！...处理方法：第1步：执行【插入】-【页脚】-【空白页脚】，单击【下一节】，来到第2页(横向页面)，先关闭【链接到前一条页眉】选项：第2步：分别在页脚当前位置添加页码，为纵向页面添加步骤这里不再细说，重点说一下横向页面的设置...由于要让页码“跑出”当前页脚的位置，我们需要找一个定位的工具，这里使用文本框。...结果如下图：提示：在对各节页脚设置前，要先将各节前的【链接到前一条页眉】选项取消选择。

2.4K2 0

js打印WEB页面内容代码大全

P {page-break-after: always} 3、ASP页面打印时如何去掉页面底部的路径和顶端的页码编号...（1）ie的文件-〉页面设置-〉讲里面的页眉和页脚里面的东西都去掉，打印就不出来了。...hkey_root="HKEY_CURRENT_USER" hkey_path="\Software\Microsoft\Internet Explorer\PageSetup" "//设置网页打印的页眉页脚为空...hkey_key,"" hkey_key="\footer" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"" end function "//设置网页打印的页眉页脚为默认值...HTML页面编码： ……… //调用打印函数 > //保存服务器端传来的数据 ……… 第四种方法：去除页眉页脚 PcyearSeo function doPrint() { bdhtml

7.5K2 0

教程 | Python 实现 Word 文档操作...

3、如何输入我们在Word中输入文字时，一般会先使用鼠标点击需要输入文字的位置，这个过程是获得了光标焦点。...如何获得 s = app.Selection 在Word中，按下Alt+F11打开宏编辑器 ? 然后按下F2打开对象浏览器 ?...，在文档中难以直接找到，需要使用如下方法。...() # 扩选到整个部分（会选中整个页眉页脚） s.Delete() #按下删除键，这两句是为了清除原来的页码 s.headerfooter.pagenumbers.Add(4) # 添加页面外侧页码...，移动了一个字符距离 # 默认参数是1（字符） s.TypeText( — ) s.WholeStory() # 扩选到整个页眉页脚部分，此处是必要的 # 否则s只是在输入一字线后的一个光标，没有选择区域

3.6K2 0

同一页插入不同页码

报告或论文集是由许多篇文档汇集而来，既需要说明某一页在当前文档中的页码，又需要说明该页在整个文集中的页码，这就出现了同一页面设置不同页码的情况，利用域很容易解决这个问题。...假如某文档在文集中的起始页码为66(即自身的页码序列是1)，那么它在文集中的页码和在文档中的页码可以按以下步骤设计：首先单击“视图→页眉和页脚”菜单命令，然后在页面中让光标停留在页眉处，输入“第页”。...将光标移动到“第页”中间按下Ctrl+F9键输入“{ }”，接着在{ }中间输入“Page”，按下Shift+F9组合键即可获得该页在文档中的页码设置。...（shift+F9就是把这个翻译成人看的页码） (opens new window) 其中\*Arabic是格式接下来把光标移动到页脚，先输入“总第页”字样，在把光标移动到“页”字前面。...这设计的好任性，不过域还是很有用的，像用Endnote在word中插入文献也是用域实现的，更多域知识参考：word中域的使用方法以及域名一览 (opens new window)

7322 0

项目实战 | 手把手带你获取某知识付费平台内容制作电子书（二）

create_time = (topic.get('create_time')[:20]).replace('T', ' ') # 获取最后更新时间 author_time = '{}在{...这里需要安装两个包一个是pdfkit,另一个是wkhtmltopdf, 其中 wkhtmltopdf工具是一个exe文件，然后要指定这个文件 self.config = pdfkit.configuration...( wkhtmltopdf='C:/Program Files/wkhtmltopdf/bin/wkhtmltopdf.exe') # 这里需要配置一下wkhtmlpdf.exe...def creat_pdf_file(self, group_title): htmls = [] # 这里是存放html文件 for index, file in...总之要优化的就4个地方帖子中的链接文章电子书制作速度要加快星球动态的多张图片 pdf文件没有标注页码猜你喜欢项目实战 | 手把手带你获取某知识付费平台精华帖，并制作电子书（一）基于Python

9565 0

Go-Excelize API源码阅读（十九）——SetHeaderFooter

页眉和页脚包含如下字段：字段描述 AlignWithMargins 设定页眉页脚页边距与页边距对齐 DifferentFirst 设定第一页页眉和页脚 DifferentOddEven 设定奇数和偶数页页眉和页脚...ScaleWithDoc 设定页眉和页脚跟随文档缩放 OddFooter 奇数页页脚控制字符 OddHeader 奇数页页眉控制字符 EvenFooter 偶数页页脚控制字符 EvenHeader 偶数页页眉控制字符...如果双下划线模式启用了， // | 在一个章节中的下划线会关闭双下划线模式。...DifferentOddEven: true代表奇数和偶数页页眉和页脚是不同的。 OddHeader: "&R&P"代表奇数页的页眉右侧部分为当前十进制的页码。...OddFooter: "&C&F"代表奇数页的页脚中心部分为当前工作簿的文件名。 EvenHeader: "&L&P"代表偶数页的页眉左侧部分为当前十进制的页码。

1.2K3 0

python自动化办公：玩转word之页眉页脚秘笈

节将就python操作word的页眉页脚技巧做深入介绍。使用页眉和页脚 python操作word的页眉页脚技巧做深入介绍 Word支持页眉和页脚。...页眉是出现在每个页面的上边距区域中的文本，与文本主体分开，并且通常传达上下文信息，例如文档标题，作者，创建日期或页码。文档中的页眉在页面之间是相同的，内容上只有很小的差异，例如更改部分标题或页码。...页眉也称为运行头。一个页面页脚中的每个日日夜夜，只不过它出现在页面底部的页头类似。它不应与脚注混淆，脚注在页面之间不一致。...为了简洁起见，这里经常使用术语标题来指代可以是页眉或页脚对象的内容，信任读者以理解它对两种对象类型的适用性。访问节的标题页眉和页脚与一个部分相关联; 这允许每个部分具有不同的页眉和/或页脚。...裙里有学习资料，有大神解答交流问题，每晚都有免费的直播课程添加标题（简单情况）只需编辑对象的内容即可将标题添加到新文档中。一个对象是一个"故事"容器及其内容进行编辑，就像一个对象。

4.1K3 0

在Python中如何使用BeautifulSoup进行页面解析

网络数据时代，各种网页数据扑面而来，网页中包含了丰富的信息，从文本到图像，从链接到表格，我们需要一种有效的方式来提取和解析这些数据。...在Python中，我们可以使用BeautifulSoup库来解析网页。BeautifulSoup提供了简单而强大的API，使得解析网页变得轻松而高效。首先，我们需要安装BeautifulSoup库。...可以使用pip命令来安装pip install beautifulsoup4接下来，我们可以使用以下代码示例来演示如何在Python中使用BeautifulSoup进行页面解析：from bs4 import...例如，我们可以使用find方法来查找特定的元素，使用select方法来使用CSS选择器提取元素，使用get_text方法来获取元素的文本内容等等。...)# 提取所有具有特定id属性的p元素p_elements = soup.select("p#my-id")# 获取特定元素的文本内容element_text = element.get_text()在实际应用中

3401 0

在 JS 中如何使用 Ajax 来进行请求

在本教程中，我们将学习如何使用 JS 进行AJAX调用。 1.AJAX 术语AJAX 表示异步的 JavaScript 和 XML。 AJAX 在 JS 中用于发出异步网络请求来获取资源。...来自服务器的响应存储在responseText变量中，该变量使用JSON.parse()转换为JavaScript 对象。...我们需要另外使用setRequestHeader设置请求标头“Content-Type” ，并使用send方法中的JSON.stringify将JSON正文作为字符串发送。...如果存在网络错误，则将拒绝，这会在.catch()块中处理。如果来自服务器的响应带有任何状态码(如200、404、500)，则promise将被解析。响应对象可以在.then()块中处理。...将响应代码（例如404、500）视为可以在catch()块中处理的错误，因此我们无需显式处理这些错误。

8.9K2 0

如何将HTML表格转换成精美的PDF

作为开发人员，如何让 PDF 输出看起来更专业？大多数免费的在线 PDF 导出器实际上只是将 HTML 内容转换为 PDF，而不进行任何额外的格式化，这会使数据难以阅读。...如果你也能添加诸如页眉和页脚、页码或重复的表列标题等内容呢？像这样的小点缀，对把一份看起来很业余的文件变成一份优雅的文件有很大的帮助。...此外，这七个页面中的每一个都包含表列标题和页脚，我认为浏览器可以智能地获取这些信息，这是由于我在构建结构合理的表时选择了语义 HTML。然而，我不喜欢浏览器在 PDF 中包含的额外页面元数据。...pdfmake 还允许我加入页眉和页脚，所以很容易添加页码。但你会注意到，第一页和第二页之间的表格内容仍然没有完全分开。分页符将 2002 年的一行部分地分割在两页之间。...如果你需要对 PDF 输出进行更多的控制，那么你就需要使用一个库。当涉及到基于 UI 中显示的 HTML 生成的单页内容时，jsPDF 就会大放异彩。

6.8K2 0

11、借助POI实现Java生成并打印excel报表(2)

short ENVELOPE_MONARCH_PAPERSIZE = 37; 1.4、打印质量(Q): HSSFPrintSetup#setVResolution((short) 300); 1.5、起始页码...(A): HSSFPrintSetup#setHeaderMargin((double) 0.2); 2.6、页脚(F): HSSFPrintSetup#setFooterMargin((double.../页脚 3.1、页眉：HSSFHeader#setLeft（HSSFHeader.date(); 说明：首先获得HSSFHeader对象，确定页眉的显示位置(如：左边显示页眉HSSFHeader#setLeft..., (int) startRow, (int) endRow); 参数说明： sheetIndex–从0开始的sheet的索引编号 startColumn-打印区域的开始列号 endColumn...使用说明：仅仅设置左端标题列：workbook.setRepeatingRowsAndColumns(0,0,1,-1,-1); 仅仅设置顶端标题行：workbook.setRepeatingRowsAndColumns

2.9K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭