如何使用wkhtmltopdf在HTML的页眉/页脚中添加页码

简介

wkhtmltopdf是一个命令行工具,可以将HTML文档转换为PDF格式。它支持在PDF文档的页眉/页脚中添加自定义内容,例如页码、日期、公司标志等。

本文将介绍如何使用wkhtmltopdf在HTML的页眉/页脚中添加页码。

步骤

第1步:安装wkhtmltopdf

首先,需要安装wkhtmltopdf。可以从wkhtmltopdf官方网站下载预编译的二进制文件,也可以使用包管理器进行安装。

例如,如果您使用的是Ubuntu操作系统,可以使用以下命令安装wkhtmltopdf:

---- ------- ------- -----------

第2步:创建HTML文件

接下来,需要创建包含您要转换为PDF的内容的HTML文件。在此示例中,我们将使用以下简单HTML代码:

--------- -----
------
------
    ----------- --------- ---- -------------------
-------
------
    ------- -- --- ---- --------- -- ------------- ----- ---- -----------------
    ----- ---- --------- -- ---- ----- --- -- --- ---- ------- -- --- ------------- -- ---- --------- ----- ----------------
-------
-------

第3步:创建页眉和页脚HTML文件

接下来,需要创建包含要在PDF文档中显示的页眉和页脚内容的HTML文件。在此示例中,我们将创建两个不同的HTML文件:header.html和footer.html。

header.html

--------- -----
------
------
    ---------------------
-------
------
    ---- ------------------ --------
        ---- ----- -------------------- -- ----- ----------------------
    ------
-------
-------

footer.html

--------- -----
------
------
    ---------------------
-------
------
    ---- ------------------ ---------
        ------- ------
    ------
-------
-------

在这些文件中,我们使用了wkhtmltopdf提供的两个特殊类“page”和“topage”。这些类会被自动替换为当前页码和总页数。

第4步:运行wkhtmltopdf命令

现在,可以使用wkhtmltopdf命令将HTML文件和页眉/页脚HTML文件转换为PDF。

以下是要使用的命令:

----------- ------------- ----------- ------------- ----------- ---------- ----------

在这个命令中,--header-html选项指定要用作页眉的HTML文件,--footer-html选项指定要用作页脚的HTML文件,input.html是包含要转换为PDF的内容的HTML文件名称,output.pdf是生成的PDF文件名称。

示例代码

完整的示例代码如下:

--------- -----
------
------
    ----------- --------- ---- -------------------
-------
------
    ------- -- --- ---- --------- -- ------------- ----- ---- -----------------
    ----- ---- --------- -- ---- ----- --- -- --- ---- ------- -- --- ------------- -- ---- --------- ----- ----------------
-------
-------

header.html

--------- -----
------
------
    ---------------------
-------
------
    ---- ------------------ --------
        ---- ----- -------------------- -- ----- ----------------------
    ------
-------
-------

footer.html

--------- -----
------
------
    ---------------------
-------
------
    ---- ------------------ ---------
        ------- ------
    ------
-------
-------

运行以下命令将HTML文件和页眉/页脚HTML文件转换为PDF

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/28383


猜你喜欢

  • 如何绕过Chrome扩展程序中的X-Frame-Options DENY

    在开发Chrome扩展程序时,有时候需要在iframe中加载来自不同域的内容。但是,由于浏览器安全策略的限制,当加载的页面响应头中包含X-Frame-Options: DENY时,Chrome将会阻止...

    7 年前
  • 如何在指令中使用隔离作用域来公开行为?

    AngularJS 中的指令是一种强大的工具,可以方便地将特定的行为添加到 HTML 元素上。其中一个重要的功能就是隔离作用域,它允许我们在指令内部创建一个独立的作用域,以避免与外部作用域发生冲突。

    7 年前
  • JavaScript中的Array Join()方法

    在JavaScript中,join()方法是一个很有用的方法,它可以将数组转化为字符串,同时可选地使用指定的分隔符分割元素。但是,在某些情况下,我们可能需要将数组的元素连接起来,而不是使用任何分隔符,...

    7 年前
  • HTML <base> 标签在脚本和 CSS 中也会被识别吗?

    HTML &lt;base&gt; 标签是一个不太常用的标签,它可以为整个 HTML 文档指定一个默认 URL,用于解析相对 URL。那么,当我们在页面中使用 JavaScript 或 CSS 时,&...

    7 年前
  • 如何通过 grunt-contrib-uglify 对 JS 文件进行压缩?

    在前端开发中,JS 文件是一个非常重要的组成部分。但是,由于 JS 文件通常包含大量的注释、空格和无用代码,因此它们的大小可能会很大,从而影响网站的加载速度和性能。

    7 年前
  • Ellipsis in the middle of a text (Mac style)

    在 Mac 系统中,经常可以看到文本被截断并以省略号 (...) 结尾的情况。这种截断方式不仅可以用于文件名或路径,也可以用于显示长段落的文本。在前端开发中,使用这种省略方式也是十分常见的,比如在卡片...

    7 年前
  • Jquery UI Autocomplete:minLength:0问题解决方案

    当使用Jquery UI Autocomplete插件时,常见的一个问题是minLength属性无法正常工作。在这篇文章中,我们将详细解释为什么会发生这种情况,并提供一些解决方案来修复它。

    7 年前
  • JavaScript: 如何检测一个单词是否被高亮选中

    在前端开发中,有时需要检测一个单词是否被用户用鼠标或键盘的方式选择(即高亮)了。这个功能通常用于文本编辑器、富文本编辑器、搜索引擎等场景中。在本文中,我们将介绍如何使用 JavaScript 实现这一...

    7 年前
  • 400 Bad Request with Google AdSense

    在前端开发中,使用 Google AdSense 进行广告投放是常见的做法。然而,有时候我们可能会遇到 400 Bad Request 错误。这个错误通常是由于请求格式不正确导致的,本文将详细介绍该错...

    7 年前
  • 在 Node.js 中处理 require() 模块抛出的错误

    当我们在 Node.js 中使用 require() 加载模块时,有时会遇到模块加载失败的情况。这可能是由于文件不存在、语法错误或者其他一些问题导致的。为了使我们的应用程序更加健壮和可靠,需要对这些错...

    7 年前
  • 使用 Array.isArray 和 instanceof Array 的区别

    引言 在前端 JavaScript 中,判断一个对象是否为数组有两种常见的方式:使用 Array.isArray() 方法和使用 instanceof 运算符。这两种方式看起来很相似,但是它们之间存在...

    7 年前
  • JavaScript 和 ActionScript 3 的主要区别

    在前端开发中,JavaScript 和 ActionScript 3 是两种常用的脚本语言。虽然它们有些相似之处,但也存在许多重要的区别。在本文中,我们将深入探讨 JavaScript 和 Actio...

    7 年前
  • JavaScript 设置带过期时间的 Cookie

    在前端开发中,Cookie 是一种常见的存储用户信息的方式。设置带有过期时间的 Cookie,可以让我们更好地控制用户信息的有效期,从而提高网站的安全性和可用性。本文将介绍如何使用 JavaScrip...

    7 年前
  • Javascript中的线程安全?

    Javascript是单线程的编程语言。也就是说,它在任何给定的时刻只能执行一个任务。虽然Javascript引擎可以并行处理某些任务,例如网络I / O或Web Workers,但它们不会直接访问应...

    7 年前
  • AngularJS Chrome Autocomplete Dilemma

    在使用 AngularJS 和 Chrome 浏览器的时候,可能会遇到自动完成表单数据出现问题的情况。这个问题是因为 Chrome 的自动填充机制和 AngularJS 的双向绑定机制相互干扰导致的。

    7 年前
  • 在 D3 力导向图中添加文本标签并在悬停时调整大小

    简介 D3 是一款流行的 JavaScript 数据可视化库,它提供了各种强大的工具和功能,用于创建交互式和动态的数据可视化。其中一个很受欢迎的特性是力导向图(Force directed Graph...

    7 年前
  • 从Javascript中启动和停止Chrome性能分析器

    在前端开发过程中,优化应用程序性能是非常重要的。Chrome浏览器提供了一个内置的性能分析器,可以帮助您找出代码中的瓶颈并进行优化。在本文中,我们将学习如何从JavaScript中启动和停止Chrom...

    7 年前
  • CSS过渡效果在新元素上的应用

    CSS过渡效果是一种简单而强大的方式,可以使网站或应用程序更具交互性和动态性。然而,当新元素被添加到DOM中时,传统的过渡方法可能无法起作用。本文将介绍如何使用CSS3过渡实现对新增元素的动画效果。

    7 年前
  • 为什么 JavaScript 正则表达式中的 alternation 操作符(|)不会返回两个匹配项?

    在 JavaScript 正则表达式中,alternation 操作符(也称为“管道”操作符)用于指定两个或多个选择项之一。例如,正则表达式 /cat|dog/ 匹配字符串中的 “cat” 或 “do...

    7 年前
  • 在JavaScript中如何根据值禁用<select>标签中的<option>?

    标签是HTML表单元素之一,它允许用户从下拉列表中选择一个选项。每个 禁用 要禁用 ------- -------------- ------- ---------------------- ...

    7 年前

相关推荐

    暂无文章