KendoReact PDF Generator跨环境导出PDF表格溢出、下划线异常问题求助

问题根因&对应修复方案 #

1. 字体差异导致的文本宽度计算误差

不同Linux环境预装的系统字体不同，KendoReact PDF生成依赖字体的字符宽度参数计算换行时机，微小的宽度差就会导致文本溢出单元格、下划线渲染错位。
修复方法：

• 项目中引入自定义TTF/OTF格式字体，通过@font-face规则全局定义，不要依赖系统自带字体
• 在savePDF配置中开启embedFonts: true，将字体嵌入生成的PDF文件，确保所有环境渲染字体完全一致
• 给表格td添加明确CSS规则：

  td {
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: keep-all; /* 可根据业务需求调整为break-all */
  }
  

2. DPI/缩放参数不统一导致的渲染偏差

不同环境的浏览器默认DPI、系统缩放配置存在差异，当前配置的scale:0.7在不同DPI下计算出的元素宽度会有偏差。
修复方法：

• 在savePDF配置中明确指定统一DPI：dpi: 96（通用标准屏幕DPI）
• 如果下划线是border-bottom实现的，给对应元素添加display: inline-block明确设置宽度；如果是<u>标签，可调整text-underline-offset属性固定下划线位置

3. 生产构建CSS优先级覆盖问题

SIT/QA环境的构建产物经过压缩后，可能出现表格相关CSS（padding、border、宽度）优先级被覆盖的情况，导致单元格实际可用宽度比开发环境小。
修复方法：

• 导出前给需要导出的DOM元素手动添加内联样式，强制固定单元格的padding、border、宽度参数，避免CSS优先级问题

调整后参考配置 #

savePDF(element, {
  paperSize: "A4",
  scale: 0.7,
  margin: 0,
  fileName: newFileName,
  dpi: 96,
  embedFonts: true,
  fonts: [
    // 填入你引入的自定义字体配置
  ]
});

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