在 WKWebView swift 中下载文档并加载图像（png、jpeg）、pdf、doc 等

Posted 2023-02-23

【中文标题】在 WKWebView swift 中下载文档并加载图像（png、jpeg）、pdf、doc 等

【英文标题】：Download document & Load Image(png, jpeg), pdf, doc, etc in WKWebView swift

【发布时间】：2020-05-02 16:43:10

【问题描述】：

我正在使用 Alamofire 从 url 下载文档，文档可以是图像、pdf 或 doc 等。 下面的代码用于使用 Alamofire 下载并保存在文档目录中并在 webview 中加载。

func saveToDocumentDirectory(BillUrl: String) 
        let manager = Alamofire.Session.default
        let fileName = (BillUrl.components(separatedBy: "/").last) ?? ""
        MBProgressHUD.showAdded(to: self.view, animated: true)

        let destinationPath: DownloadRequest.Destination =  _, _ in
            let documentsURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0];
            let fileURL = documentsURL.appendingPathComponent(fileName)
            return (fileURL, [.removePreviousFile, .createIntermediateDirectories])
        
        manager.download(BillUrl, method: .get, parameters: nil, headers: nil, to: destinationPath)
            .downloadProgress  (progress) in
                print("Temporary URL: ")
                print(progress.fractionCompleted)
        
        .response  response in
            switch response.result 
            case .success(let pathUrl) :
                MBProgressHUD.hide(for: self.view, animated: true)
                print(pathUrl as Any)  //pathUrl = file:///var/mobile/Containers/Data/Application/C651C521-31A7-4512-A393-6A94442472A0/Documents/1_DlatFlsbZ1fJSs-_aIJmlg_1588075057_13.png

                self.displayAlert(path: pathUrl ?? URL(string: "")!)

            case .failure(let error) :
                MBProgressHUD.hide(for: self.view, animated: true)
                print(error)
                self.alert(message: "Something went wrong while proccessing your request", title: "Alert!")
            
        
    

    fileprivate func displayAlert(path: URL) 
        let alertController = UIAlertController(title: "Alert!", message: "file downloaded at \(path)", preferredStyle: .alert)
        let OKAction = UIAlertAction(title: "OK", style: .default, handler:  action in  
            let webViewVC = storyBoard.instantiateViewController(withIdentifier: "WebViewVC") as! WebViewVC
            webViewVC.webUrl = path
            self.navigationController?.pushViewController(webViewVC, animated: true)
        )
        alertController.addAction(OKAction)
        self.present(alertController, animated: true, completion: nil)
    

下面是 webview 类的代码

class WebViewVC: UIViewController, WKNavigationDelegate 

    var webView: WKWebView!
    var webUrl = URL(string: "")

    override func loadView() 
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view = webView
    

    override func viewDidLoad() 
        super.viewDidLoad()
        self.navigationController?.navigationBar.isHidden = false
        self.navigationController?.interactivePopGestureRecognizer?.isEnabled = false
        webView.allowsBackForwardNavigationGestures = true
        webView.autoresizesSubviews = true
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        webView.load(URLRequest(url: webUrl!, cachePolicy: .reloadIgnoringLocalCacheData, timeoutInterval: 600.0))
    

    override func viewDidLayoutSubviews() 
        webView.frame = CGRect.init(x: 0, y: 0, width: self.view.frame.size.width , height: self.view.frame.size.height)
        view = webView
    

pdf 文件在 webview 中正确加载，但图像在 webview 中未正确加载，并且图像的顶部隐藏在导航栏后面。

我创建了 WKWebView 的出口并将其添加到self.view.addSubview(webView)，但每次它在webView = WKWebView(frame: .zero, configuration: webConfiguration) 崩溃时 我不知道下一步该尝试什么。先感谢您。

【参考方案1】：

我们可以通过设置框架使其不与UINavigationBar 重叠来创建WKWebView。

import UIKit
import WebKit

class SecondViewController: UIViewController,UIWebViewDelegate,UIScrollViewDelegate, WKUIDelegate 

   var WKwebView: WKWebView!

    override func viewDidLoad() 
        super.viewDidLoad()
               let userContentController: WKUserContentController = WKUserContentController()
               let conf = WKWebViewConfiguration()
               conf.userContentController = userContentController
               WKwebView = WKWebView (frame: CGRect( x: 0, y: 60, width: self.view.frame.width, height: self.view.frame.height - 60 ), configuration: WKWebViewConfiguration())
               WKwebView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
               WKwebView.uiDelegate = self
               WKwebView.scrollView.bounces = false
               WKwebView.scrollView.delegate = self;
               view.addSubview(WKwebView)

                var request : URLRequest!
                let LOGINURL = "https://i.stack.imgur.com/RRy76.png";
                let url : URL = URL(string: LOGINURL as String)!
                request = URLRequest (url: url);
                WKwebView.load(request)

    

输出：Output without overlapping

【讨论】：

谢谢，它正在工作，但在 ios 版本 12.4.3 的 iPad Air 上显示空白屏幕

您是否尝试从 url 加载 pdf 文件？它在 iPad Air 13.3 版本中对我有用。

我正在加载 pdf 和图像（png 格式）。它在 iPhone 和 iPad 模拟器中加载，13.0 版本，但不在 iPad Air，12.4.3

您在控制台中遇到任何问题吗？尝试在 safari 浏览器中加载 PDF 文件。如果它在那里加载，那么我们需要在 wkwebview 中进行检查。

PDF 文件和图像正在 Safari 中加载。我通过使用 diawi 构建来共享测试器进行测试。