iOS Swift发票应用：HTML表格转多页PDF行拆分/重复问题

Hey there, let's work through this frustrating table pagination issue you're hitting with your invoice generator! It's super common to run into discrepancies between browser print previews and iOS's WebKit-based PDF rendering—here are actionable fixes to get your tables behaving correctly:

1. Tweak Your HTML/CSS for WebKit Print Context #

First, let's refine your CSS to play nicer with UIPagePrintRenderer's underlying WebKit engine. Browser print engines handle page breaks more gracefully, but iOS's print context needs more explicit rules:

• Force fixed table layout: This prevents the table from dynamically resizing columns mid-print, which can cause unexpected row splits:

  table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse; /* Ensures no extra spacing breaks layout */
  }
  

• Explicitly prevent row splits: Use both page-break-inside and the modern break-inside property (with !important to override any default styles) to keep table rows intact:

  tr {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      display: table-row; /* Ensures WebKit recognizes the row as a block-level element for page break rules */
  }
  

• Avoid floating elements: If your invoice uses floats for alignment, replace them with flexbox or inline-block—floats can mess with WebKit's pagination calculations.

2. Customize UIPagePrintRenderer for Manual Pagination Control #

If CSS alone doesn't fix the issue, you can take control of pagination directly in Swift by subclassing UIPagePrintRenderer:

• Subclass to adjust pagination logic: Override methods like prepareForDrawingPages to calculate exactly where page breaks should happen based on your table's content:

  class InvoicePrintRenderer: UIPagePrintRenderer {
      override func prepareForDrawingPages(_ range: NSRange) {
          super.prepareForDrawingPages(range)
          
          // Adjust printable area to match your invoice margins
          let customMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
          self.printableRect = self.paperRect.inset(by: customMargins)
          
          // Optional: Calculate total content height and ensure page breaks align with table rows
          // You'd need to fetch row heights from your HTML first (via WKWebView JS evaluation)
      }
  }
  

• Split HTML into page-specific chunks: Use WKWebView to evaluate JavaScript that returns the height of each table row, then split your HTML template into separate sections (inserting <div style="page-break-after: always;"></div> between pages) where rows would otherwise be split. Here's a quick JS snippet to get row heights:

  Array.from(document.querySelectorAll('tr')).map(tr => tr.offsetHeight)
  

  You can call this via WKWebView.evaluateJavaScript(_:completionHandler:) to get the heights, then calculate how many rows fit per page and modify your HTML accordingly.

3. Fallback: Render Tables Directly with CoreText #

If WebKit's quirks are proving too stubborn, consider ditching HTML templates entirely and using CoreText to draw your invoice tables directly. This gives you full control over every aspect of pagination:

• Create a custom PDF generator class that calculates the height of each table row, then draws rows one by one. When the remaining space on the current page is too small for the next row, start a new page.
• Use CTFramesetter and CTFrame to lay out text and table borders precisely. While this requires more code, it eliminates any WebKit-related pagination inconsistencies.

Final Notes #

Start with the CSS tweaks—they're the quickest win. If those don't resolve the duplicate/split rows, move on to customizing the print renderer. Only consider CoreText if you need absolute control over the layout.

内容的提问来源于stack exchange，提问作者Steven F.