WKWebView 不显示打印页面

Question

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate{
    
    @IBOutlet weak var webVw: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Load a URL
        if let url = URL(string: "https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_print") {
            let request = URLRequest(url: url)
            webVw.load(request)
        }
    }
}

“打印此页面”按钮不显示任何内容，但在 Safari 中加载相同的网址并单击显示打印页面选项的相同按钮。

Answer 1

好吧，让我们解决这个打印问题吧！因此，您有一个

WKWebView

，并且希望您的用户能够打印网页，就像在 Safari 中一样。但是，糟糕的是，默认情况下

WKWebView

不支持 JavaScript

window.print()

函数。不过不用担心，有一个解决方法！

这是解决方案的更随意的演练：

1. 首先，让我们创建一个 JavaScript“脚本”来捕获对

   window.print()

   的调用。这个狡猾的脚本不会执行通常的打印操作，而是向我们发送一个秘密“请打印！”留言。

let printScript = WKUserScript(
    source: "window.print = function(){window.webkit.messageHandlers.printHandler.postMessage('print')};",
    injectionTime: .atDocumentEnd,
    forMainFrameOnly: true
)

2. 现在，让我们将此脚本粘贴到

   WKWebView

   配置中。不要忘记添加一个“printHandler”来处理秘密消息。

let config = WKWebViewConfiguration()
config.userContentController.addUserScript(printScript)
config.userContentController.add(self, name: "printHandler")

3. 然后，我们使用新配置初始化

   WKWebView

   。

webVw = WKWebView(frame: .zero, configuration: config)
webVw.uiDelegate = self

4. 照常加载您的 URL。这里没有任何变化！

if let url = URL(string: "https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_print") {
    let request = URLRequest(url: url)
    webVw.load(request)
}

5. 最后一步，当我们收到秘密“请打印！”时，我们需要实际打印。来自网页的消息。

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "printHandler" {
        printPage()
    }
}

private func printPage() {
    let printInfo = UIPrintInfo(dictionary: nil)
    printInfo.jobName = webVw.url?.absoluteString ?? "Document"
    printInfo.outputType = .general

    let printController = UIPrintInteractionController.shared
    printController.printInfo = printInfo
    printController.printFormatter = webVw.viewPrintFormatter()

    printController.present(animated: true, completionHandler: nil)
}

这就是你得到的！通过一些 JavaScript 技巧，您的用户现在可以像在 Safari 中一样打印网页。您刚刚将您的

WKWebView

提升到了一个新的水平。全场击掌！ 🙌

只需记住将

webVw

切换为 WKWebView 的 IBOutlet 的实际名称。