在WKWebView中从HTML生成PDF时图片缺失的技术求助

这个问题我之前帮好几个开发者排查过，WKWebView导出PDF时logo消失，大多是资源路径没处理对或者图片还没加载完就触发了生成操作，给你几个靠谱的解决思路：

• 把图片内嵌为Base64编码（最常用的解决方案）
  你当前用的src="logo.png"是相对路径，WKWebView在生成PDF的过程中，经常会找不到本地资源的正确路径。把图片转换成Base64字符串直接嵌入HTML，就能彻底摆脱对外部文件的依赖：

  1. 将你的logo.png转换成Base64格式（可以用在线工具，或者在iOS代码里通过UIImage转成Data再编码）
  2. 替换HTML里的img标签：

     <img src="data:image/png;base64,这里替换成你的Base64字符串" style="..." />
     

  这样图片就直接打包在HTML里，生成PDF时肯定能正常显示。

• 等待图片完全加载后再生成PDF
  如果你的logo是网络图片，或者本地资源是异步加载的，WKWebView可能还没等图片渲染完成就开始生成PDF了。可以通过两种方式确保加载完成：

  1. 监听WKWebView的webView(_:didFinish:)代理方法，在回调里延迟200-300毫秒再触发PDF生成（给图片留足渲染时间）
  2. 注入JS代码检测页面加载状态：

     webView.evaluateJavaScript("document.readyState === 'complete'") { (result, error) in
         guard let isPageComplete = result as? Bool, isPageComplete else { return }
         // 在这里执行PDF生成逻辑
     }
     

• 检查CSS样式是否屏蔽了图片
  有时候@media print媒体查询里的样式会不小心把图片隐藏，或者容器尺寸设置不当导致图片无法显示：

  • 检查你的CSS代码，确保@media print区块里没有img { display: none; }这类规则
  • 给img标签设置明确的宽高和显示属性，比如：

    <img src="..." style="width: 120px; height: 60px; display: block; visibility: visible;" />
    

• 使用正确的PDF生成API
  确保你用的是WKWebView推荐的PDF绘制方法，比如通过drawHierarchy(in:afterScreenUpdates:)来生成：

  func generatePDF(from webView: WKWebView) -> Data? {
      let contentSize = webView.scrollView.contentSize
      let pdfFrame = CGRect(x: 0, y: 0, width: contentSize.width, height: contentSize.height)
      
      let mutableData = NSMutableData()
      UIGraphicsBeginPDFContextToData(mutableData, pdfFrame, nil)
      UIGraphicsBeginPDFPageWithInfo(pdfFrame, nil)
      
      // 确保视图更新完成后再绘制
      webView.drawHierarchy(in: pdfFrame, afterScreenUpdates: true)
      
      UIGraphicsEndPDFContext()
      return mutableData as Data
  }
  

  这里的afterScreenUpdates一定要设为true，保证所有页面元素（包括图片）都渲染完毕。

内容的提问来源于stack exchange，提问作者Vinícius Barcelos