Android中HTML转PDF：如何添加页眉与页脚？

一、通过CSS Paged Media实现页眉页脚 #

WebView基于Chromium内核，支持CSS的@page伪元素和分页媒体特性，可直接在HTML样式中定义全局重复的页眉页脚，包括图片页眉和页码页脚。

修改后的测试HTML代码 #

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
  <head>
  <meta charset="utf-8" />
  <style>
    /* 定义页面尺寸和边距，预留页眉页脚空间 */
    @page {
      size: 21cm 29.7cm;
      /* 上/下边距预留2cm给页眉页脚，左右保持1.5cm */
      margin: 2cm 1.5cm 2cm 1.5cm;
      /* 页眉：居中显示图片 */
      @top-center {
        content: url('file:///android_asset/header_logo.png');
        width: 100px;
        height: 30px;
      }
      /* 页脚：居中显示页码 */
      @bottom-center {
        content: "第 " counter(page) " 页，共 " counter(pages) " 页";
        font-size: 12px;
        color: #666;
      }
    }

    h1 {
      page-break-before: always;
    }

    /* 避免正文和页眉页脚重叠 */
    body {
      margin: 0;
    }
  </style>
  </head>
  <body>
    <div>My book</div>
    <h1>First chapter</h1>
      <p>… </p>
    <h1>Second chapter</h1>
      <p>… </p>
    <h1>Third Chapter</h1>
      <p>… </p>
  </body>
</html>

关键说明 #

• @top-center：指定页眉为图片，示例使用file:///android_asset/路径读取应用assets目录下的图片，也可替换为网络URL。
• counter(page)/counter(pages)：CSS内置计数器，自动获取当前页码和总页数，无需手动计算。
• 调整@page的margin值：确保页眉页脚有足够显示空间，避免和正文内容重叠。

二、代码层面适配 #

现有PdfConverter类无需大幅修改，只需注意两点：

1. 若使用本地图片，需开启WebView的本地文件访问权限：

   mWebView!!.settings.allowFileAccess = true
   mWebView!!.settings.allowFileAccessFromFileURLs = true
   

2. 若需动态修改页眉图片或页码格式，可在构建HTML字符串时替换对应内容，例如：

   val htmlTemplate = """
     <!-- 上述HTML模板内容 -->
   """.trimIndent()
   val finalHtml = htmlTemplate.replace("header_logo.png", dynamicLogoPath)
   

三、兼容性说明 #

• Android 5.0（API 21）及以上版本对CSS Paged Media支持完善，可正常显示页眉页脚和页码。
• 若需兼容更低版本，可考虑添加固定定位的页眉页脚元素，配合JavaScript计算分页位置，但复杂度远高于CSS方案。

内容的提问来源于stack exchange，提问作者Marine Droit