WkWebView加载多页PDF时第一页渲染模糊问题求助

我之前也碰到过几乎一模一样的场景：单页PDF显示正常，多页PDF第一页就模糊，而且为了避免滚动嵌套手动固定了WebView和scrollView的高度。结合你的代码和场景，大概率是渲染时机、布局设置冲突导致的，咱们来一步步解决：

核心原因分析 #

多页PDF加载时，WkWebView会先渲染第一页的低清占位版本，后续再替换为高清内容；但你如果在这个过渡阶段就把WebView的frame固定为当时的contentSize，就会把低清渲染“定格”下来，导致第一页模糊。另外，默认的缩放配置、布局设置冲突也可能加剧这个问题。

具体解决方案 #

1. 延迟/准确获取内容高度，避免过早固定Frame #

不要在加载完成后立刻设置frame，而是通过JS获取准确的文档高度，并且确保在主线程更新布局：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 用JS获取真实的文档高度，比直接取scrollView.contentSize更可靠
    webView.evaluateJavaScript("document.body.scrollHeight") { [weak self] result, error in
        guard let self = self, let contentHeight = result as? CGFloat, error == nil else {
            return
        }
        DispatchQueue.main.async {
            self.wkWebView.frame.size = CGSize(
                width: UIScreen.main.bounds.width,
                height: contentHeight
            )
        }
    }
}

如果还是有延迟，可以在DispatchQueue.main.asyncAfter(deadline: .now() + 0.1)里执行frame设置，给WebView足够的时间完成高清渲染。

2. 强制关闭缩放，确保1:1渲染 #

WkWebView的默认缩放适配可能会导致PDF渲染比例异常，尤其是第一页：

// 初始化WebView时就配置缩放参数
wkWebView.scrollView.minimumZoomScale = 1.0
wkWebView.scrollView.maximumZoomScale = 1.0
wkWebView.scrollView.bouncesZoom = false

3. 调整WKWebViewConfiguration，优化PDF渲染 #

关闭不必要的JS支持（PDF不需要JS），并配置更稳定的渲染参数：

let webConfig = WKWebViewConfiguration()
if #available(iOS 11.0, *) {
    webConfig.defaultWebpagePreferences.allowsContentJavaScript = false
}
webConfig.preferences.minimumFontSize = 16
// 初始化WebView时传入配置
let wkWebView = WKWebView(frame: .zero, configuration: webConfig)

4. 避免AutoresizingMask与手动Frame的冲突 #

你设置的.flexibleWidth、.flexibleHeight会让WebView自动调整布局，和手动设置的frame产生冲突。建议去掉这个配置，或者在viewDidLayoutSubviews里重新同步frame：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    guard let webView = wkWebView else { return }
    webView.frame.size.width = UIScreen.main.bounds.width
    webView.frame.size.height = webView.scrollView.contentSize.height
}

总结 #

把这几个方案组合起来测试，核心是让WebView在PDF完全高清渲染后再固定frame，同时消除缩放和布局的干扰，应该就能解决第一页模糊的问题了。

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