iOS 11 UIWebView打印PDF时page-break-inside:avoid失效问题咨询

这个问题在iOS 11的UIWebView里确实挺常见的，我之前也遇到过类似的情况，结合经验和对UIWebView打印渲染机制的了解，给你几个排查和解决的方向：

1. 确保CSS属性正确应用且生效 #

UIWebView在iOS 11对CSS分页属性的支持有局限性，首先要保证你的.container-row是块级元素，因为page-break-inside只对块级元素生效。同时可以添加一些辅助属性强制生效：

.container-row {
  display: block !important; /* 强制块级渲染 */
  page-break-inside: avoid !important;
  page-break-before: auto !important;
  page-break-after: auto !important;
  overflow: hidden; /* 避免内部元素溢出导致布局计算错误 */
  min-height: 1px; /* 触发正确的块级高度计算 */
}

如果容器内有浮动元素，一定要加上clearfix来确保容器高度计算准确——这是很多分页异常的根源：

.container-row::after {
  content: "";
  display: table;
  clear: both;
}

2. 等待网页完全渲染后再生成PDF #

UIWebView的渲染是异步的，如果在网页还没完全加载完成（包括图片、字体等资源）就执行打印/生成PDF操作，布局计算会出错，导致分页异常。你可以在webViewDidFinishLoad回调里延迟一段时间再执行操作，给渲染留足时间：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 延迟0.5秒确保渲染完全完成
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self generatePDFWithWebView:webView];
    });
}

3. 检查UIPrintFormatter的配置 #

UIPrintFormatter的边距设置如果不合理，可能会挤压元素导致意外分页。确保contentInsets设置合理，不要让元素被挤到分页边界：

UIWebViewPrintFormatter *printFormatter = [webView viewPrintFormatter];
// 设置合适的边距，根据你的PDF需求调整
printFormatter.contentInsets = UIEdgeInsetsMake(15, 15, 15, 15);

4. 避免复杂布局影响分页判断 #

如果.container-row的父容器使用了flex或者grid布局，UIWebView在iOS 11的打印渲染中可能无法正确识别子元素的分页属性。临时解决方案是给父容器也添加page-break-inside: avoid，或者在打印时切换父容器为block布局：

@media print {
  .parent-container {
    display: block !important;
    page-break-inside: avoid !important;
  }
}

5. 长期解决方案：迁移到WKWebView #

UIWebView在iOS 11已经属于老旧组件，苹果后续不再维护，对现代CSS属性的支持很差。WKWebView在iOS 8+就已经支持，对分页属性的兼容性好很多，能从根本上解决这类问题。迁移后你只需要替换webView实例，打印逻辑基本一致：

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[webView loadHTMLString:yourHTMLString baseURL:nil];
// 使用WKWebView的打印 formatter
WKWebViewPrintFormatter *printFormatter = [webView viewPrintFormatter];

这些方法我都试过，大部分情况下能解决UIWebView里page-break-inside失效的问题，你可以按顺序排查尝试。

内容的提问来源于stack exchange，提问作者christopher.online