Salesforce Visualforce PDF表格分页边框重复及显示异常问题求解

方案1：调整边框应用逻辑 #

避免给<tr>设置上下边框，改用<td>/<th>的边框组合，从根源上消除分页时的边框重复：

table {
  border-collapse: collapse;
  width: 100%;
}
/* 表头仅保留顶部和左右边框 */
th {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
/* 表格单元格仅保留左右边框 */
td {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
/* 仅给tbody最后一行的单元格添加底部边框 */
tbody tr:last-child td {
  border-bottom: 1px solid #000;
}
/* 保留行内禁止分页的设置 */
tr {
  page-break-inside: avoid;
}

方案2：动态控制分页处的边框 #

通过Visualforce的逻辑判断，给分页前后的行添加类来隐藏重复边框：

1. 先在后端计算每页可容纳的行数，确定分页点的首尾行索引
2. 在页面渲染时给对应行添加样式类：

<apex:repeat value="{!yourRecordList}" var="item" index="rowIdx">
  <tr class="{!IF(rowIdx == currentPageLastRow, 'no-bottom-border', '')} {!IF(rowIdx == nextPageFirstRow, 'no-top-border', '')}">
    <td>{!item.FieldName}</td>
    <!-- 其他单元格 -->
  </tr>
</apex:repeat>

3. 配合CSS隐藏对应边框：

.no-bottom-border td {
  border-bottom: none !important;
}
.no-top-border td {
  border-top: none !important;
}

方案3：优化PDF渲染环境 #

Salesforce PDF基于Flying Saucer引擎，部分默认样式可能干扰渲染，可通过以下方式优化：

• 在<apex:page>标签中添加applyBodyTag="false"，自定义完整的HTML结构：

<apex:page renderAs="pdf" applyBodyTag="false">
  <html>
    <head>
      <style>
        /* 你的完整CSS样式 */
      </style>
    </head>
    <body>
      <!-- 表格及页面内容 -->
    </body>
  </html>
</apex:page>

• 确保border-collapse: collapse属性生效，避免使用多层边框叠加样式

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