SwiftUI中ChatView长聊天多页PDF导出解决方案咨询

问题分析 #

当前exportToPDF函数使用固定屏幕高度作为PDF页面尺寸，当聊天内容超过屏幕高度时，超出部分无法被渲染，导致PDF内容截断。要解决这个问题，需要先计算聊天内容的真实高度，再根据PDF页面尺寸自动分页渲染完整内容。

修改方案 #

1. 创建PDF专用聊天内容视图 #

单独提取聊天内容部分作为独立视图，避免导出时包含输入栏、工具栏等无关交互元素：

struct ChatContentPDFView: View {
    var chatId: UUID
    @EnvironmentObject var chatViewModel: ChatViewModel
    
    var body: some View {
        VStack {
            ForEach(chatViewModel.chats.filter { $0.id == chatId }) { chat in
                ForEach(chat.messages) { message in
                    messageView(message: message)
                }
            }
            .padding()
        }
    }
    
    func messageView(message: Message) -> some View {
        HStack {
            if message.role == .user { Spacer() }
            Text(message.content)
                .padding()
                .background(message.role == .user ? .blue : .gray.opacity(0.7))
                .foregroundColor(.white)
                .clipShape(RoundedRectangle(cornerRadius: 20))
            if message.role == .assistant || message.role == .system { Spacer() }
        }
    }
}

2. 重写exportToPDF函数 #

修改后的函数会先计算聊天内容的总高度，再根据PDF页面高度自动分页，逐页渲染完整内容：

func exportToPDF() {
    let outputFileURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!.appendingPathComponent("\(chatId).pdf")
    let pageWidth = UIScreen.main.bounds.width
    let pageHeight = UIScreen.main.bounds.height
    let pageSize = CGSize(width: pageWidth, height: pageHeight)
    
    // 初始化PDF专用视图
    let pdfContent = ChatContentPDFView(chatId: chatId).environmentObject(chatViewModel)
    let hostingController = UIHostingController(rootView: pdfContent)
    
    guard let rootVC = UIApplication.shared.windows.first?.rootViewController else {
        print("ERROR: 无法找到根视图控制器")
        return
    }
    rootVC.addChild(hostingController)
    rootVC.view.insertSubview(hostingController.view, at: 0)
    
    // 强制布局，计算内容真实高度
    hostingController.view.frame = CGRect(x: 0, y: 0, width: pageWidth, height: 1)
    hostingController.view.layoutIfNeeded()
    let contentHeight = hostingController.view.sizeThatFits(CGSize(width: pageWidth, height: CGFloat.infinity)).height
    
    DispatchQueue.main.async {
        do {
            let pdfRenderer = UIGraphicsPDFRenderer(bounds: CGRect(origin: .zero, size: pageSize))
            try pdfRenderer.writePDF(to: outputFileURL, withActions: { context in
                var currentY: CGFloat = 0
                
                // 逐页渲染内容
                while currentY < contentHeight {
                    context.beginPage()
                    
                    // 平移上下文，聚焦当前页的内容区域
                    context.cgContext.translateBy(x: 0, y: -currentY)
                    hostingController.view.layer.render(in: context.cgContext)
                    
                    currentY += pageHeight
                }
            })
            print("PDF已导出至: \(outputFileURL.path)")
        } catch {
            print("创建PDF失败: \(error.localizedDescription)")
        }
        
        // 清理临时视图
        hostingController.removeFromParent()
        hostingController.view.removeFromSuperview()
    }
}

3. 关键修改点说明 #

• 专用PDF视图：分离聊天内容与交互UI，确保导出的PDF仅包含核心聊天消息，避免无关元素占用页面空间。
• 计算真实内容高度：通过sizeThatFits获取聊天内容的完整高度，彻底解决固定高度导致的内容截断问题。
• 分页渲染逻辑：通过循环平移CGContext，将超出单页的内容逐页渲染到PDF中，保证所有聊天内容都能被完整导出。

注意事项 #

• 如果聊天内容包含图片或其他复杂视图，需确保ChatContentPDFView能正确渲染这些元素，避免布局异常。
• 测试时可选择包含大量消息的聊天记录，验证分页逻辑是否正常、内容是否完整。

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