如何使HTML布局单位匹配A4纸张，实现PDF导出所见即所得

问题描述 #

使用无头Chrome将HTML页面转换为PDF时，已配置如下@page样式：

@page {
    size: A4 portrait;
    margin: 0;
}

该设置可让HTML贴合页面边框，但网页预览与PDF输出的元素、文本显示不一致，无法实现所见即所得。需要添加哪些CSS样式，才能让HTML匹配A4实际尺寸，使页面显示与PDF输出完全一致？

示例代码 #

<!DOCTYPE html>
<html>

<head>
  <style>
    @page {
      size: A4 portrait;
      margin: 0;
    }
    
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    
    tr:nth-child(even) {
      background-color: #dddddd;
    }
  </style>
</head>

<body>
  <h2>HTML Table</h2>
  <div>
    <p>Test 1</p>
    <span>Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long </span>
  </div>
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</body>
</html>

问题原因 #

未匹配A4纸的实际尺寸单位，导致浏览器渲染与PDF生成时的尺寸计算存在差异，引发显示不一致。

解决方案 #

添加以下CSS样式来统一网页与PDF的渲染效果：

• 固定页面容器尺寸：给html和body设置与A4完全一致的尺寸，消除浏览器默认边距和滚动影响：

  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  

• 统一字体与颜色渲染：强制颜色精确渲染，避免PDF生成时的字体或颜色替换：

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-family: arial, sans-serif, system-ui;
  }
  

• 处理长文本溢出：确保长文本在网页和PDF中都能正确换行：

  span, p {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  

• 避免元素被分页拆分：防止表格等元素被截断在两页之间：

  table, tr, td, th {
    page-break-inside: avoid;
  }
  

• 媒体查询适配打印场景：用媒体查询包裹打印专属样式，不影响网页正常浏览：

  @media print {
    html, body {
      width: 210mm;
      height: 297mm;
    }
  }
  

修改后的完整示例代码 #

<!DOCTYPE html>
<html>

<head>
  <style>
    @page {
      size: A4 portrait;
      margin: 0;
    }

    html, body {
      width: 210mm;
      height: 297mm;
      margin: 0;
      padding: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      font-family: arial, sans-serif, system-ui;
    }

    span, p {
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

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

    tr:nth-child(even) {
      background-color: #dddddd;
    }

    table, tr, td, th {
      page-break-inside: avoid;
    }

    @media print {
      html, body {
        width: 210mm;
        height: 297mm;
      }
    }
  </style>
</head>

<body>
  <h2>HTML Table</h2>
  <div>
    <p>Test 1</p>
    <span>Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long </span>
  </div>
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</body>
</html>

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