Google Apps Script中HTML转PDF实现跨页表格自动页码

问题原因分析 #

当前代码显示页码为0，是因为未初始化CSS计数器，默认counter(page)的初始值为0，且@page的counter-increment逻辑未正确触发递增。另外，总页数无法通过纯CSS直接获取，需要在后端计算后传递到HTML模板。

解决方案步骤 #

1. 初始化CSS计数器，让页码从1开始递增
2. 计算总页数，传递到HTML模板实现“当前页/总页数”格式
3. 调整页面边距，避免表格内容与固定footer重叠

修改后的完整代码 #

Script 部分

function doPost(e) {
  try {
    const template = HtmlService.createTemplateFromFile('test');
    const tableData = [];
    for (let i = 0; i < 100; i ++) { // 100可替换为任意数据量
      tableData.push({ code: 1, product: 'shampoo'});
    }
    
    // 计算每页可容纳的行数（需根据实际表格样式调整，此处假设每页30行）
    const rowsPerPage = 30;
    const totalPages = Math.ceil(tableData.length / rowsPerPage);
    
    template.tableRows = tableData;
    template.totalPages = totalPages; // 将总页数传递到HTML模板
    
    const htmlOutput = template.evaluate().getContent();
    const pdfBlob = Utilities.newBlob(htmlOutput, 'text/html').getAs('application/pdf');
    pdfBlob.setName('some.pdf');
    const pdfBytes = pdfBlob.getBytes();
    const pdfBase64 = Utilities.base64Encode(pdfBytes);
    
    console.log(pdfBase64)
    return ContentService.createTextOutput(JSON.stringify({ pdf: pdfBase64 })).setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    console.error(error)
    return ContentService.createTextOutput(JSON.stringify({ error: error.message })).setMimeType(ContentService.MimeType.JSON);
  }
}

test.html 部分

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    /* 页面基础设置 */
    @page {
      size: A4;
      margin: 20mm 10mm; /* 设置边距，避免内容与footer重叠 */
      counter-increment: page; /* 每页递增页码计数器 */
    }

    body {
      counter-reset: page 0; /* 初始化计数器为0，第一页递增后变为1 */
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* 表格样式优化 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }

    thead {
      position: sticky;
      top: 0;
      background-color: #f5f5f5; /* 表头在每页重复显示 */
    }

    /* 页码footer样式 */
    .page-footer {
      position: fixed;
      bottom: 10mm; /* 与@page的bottom margin对应 */
      right: 10mm; /* 与@page的right margin对应 */
      font-size: 10px;
      color: #666;
    }

    .page-footer::after {
      content: "第 " counter(page) " / " <?= totalPages ?> " 页";
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Code</th>
        <th>Product</th>
      </tr>
    </thead>
    <tbody>
      <? tableRows.forEach(function (item) { ?>
      <tr>
        <td><?= item.code ?></td>
        <td><?= item.product ?></td>
      </tr>
      <? }); ?>
    </tbody>
  </table>
  <div class="page-footer"></div>
</body>
</html>

关键说明 #

• 计数器初始化：通过body { counter-reset: page 0; }初始化计数器，配合@page { counter-increment: page; }实现每页页码递增，第一页显示1。
• 总页数计算：根据表格行数和每页可容纳行数估算总页数，若表格行高或样式调整，需同步修改rowsPerPage的值以保证总页数准确。
• 边距与表头优化：设置@page的margin和footer的bottom/right值对应，避免表格内容被固定footer遮挡；表头通过position: sticky实现每页重复显示，提升PDF可读性。

内容的提问来源于stack exchange，提问作者Santiago Mejia