Create pdf with WKWebView.pdf(configuration:)

Question

I want to create a pdf on macOS with the new WKWebView.pdf(configuration:) which was introduced in macOS 12/iOS 15. It tries to make use of the new async/await functionality (which I most likely have not grasped entirely I am afraid...).

Right now, I am getting an error that I have no idea how to handle:

Error Domain=WKErrorDomain Code=1 "An unknown error occurred" 
UserInfo={NSLocalizedDescription=An unknown error occurred}

I try to load a html string into a web view, which I then want to generate the pdf from. The function I use to generate my PDFDocument looks like this:

func generatePdf() async {
        let webView = WKWebView()
        await webView.loadHTMLString(html, baseURL: nil)
        
        let config = WKPDFConfiguration()
        config.rect = .init(origin: .zero, size: .init(width: 595.28, height: 841.89))
        do {
            //this is where the error is happening
            let pdfData = try await webView.pdf(configuration: config)
            self.pdf = PDFDocument(data: pdfData)
        } catch {
            print(error) //this error gets printed
        }
    }

My best guess as it currently stands is that WKWebView's loadHTMLString has not finished loading the html–I did allow for outgoing connection in the app sandbox that's not it...

For the sake of completeness, here's the entire code:

import SwiftUI
import PDFKit
import WebKit

@main
struct AFPdfApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @StateObject private var vm = ViewModel()
    
    var body: some View {
        VStack {
            TextEditor(text: $vm.html)
                .frame(width: 300.0, height: 200.0)
                .border(Color.accentColor, width: 1.0)
                .padding()
            PdfViewWrapper(pdfDocument: $vm.pdf)
        }
        .toolbar {
            Button("Create PDF") {
                Task {
                    await vm.generatePdf()
                }
            }
        }
    }
    
    static let initHtml = """
    <h1>Some fancy html</h1>
    <h2>…and now how do I create a pdf from this?</h2>
    """
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

class ViewModel: ObservableObject {
    @Published var html = """
    <h1>Some fancy html</h1>
    <h2>…and now let's create some pdf…</h2>
    """
    @Published var pdf: PDFDocument? = nil
    
    func generatePdf() async {
        let webView = WKWebView()
        await webView.loadHTMLString(html, baseURL: nil)
        
        let config = WKPDFConfiguration()
        config.rect = .init(origin: .zero, size: .init(width: 595.28, height: 841.89))
        do {
            let pdfData = try await webView.pdf(configuration: config)
            self.pdf = PDFDocument(data: pdfData)
        } catch {
            print(error)
        }
    }
}

struct PdfViewWrapper: NSViewRepresentable {
    @Binding var pdfDocument: PDFDocument?
    
    func makeNSView(context: Context) -> PDFView {
        return PDFView()
    }
    
    func updateNSView(_ nsView: PDFView, context: Context) {
        nsView.document = pdfDocument
    }
}

Answer 1

Here is a way that I got this working. It uses a completely hidden WKWebView to render the content, using a delegate callback and javascript execution to determine when the page has fully loaded.

When ready, the new iOS 15 WKWebView method .pdf() is called, which generates the PDF data.

Bindings are used to update the parent view, which generates a PDFDocument from the data and navigates to it.

Caveat: The native WKWebView PDF methods do not produce paginated PDF files, so it will be one long page!

---

In the main view it starts with a button tap. This view has a pdfData variable that is of type Data and will be used to make the PDF document.

Button("Generate PDF") {

    // Prevent triggering again while already processing
    guard !isWorking else { return }
    
    // Reset flags
    isReadyToRenderPDF = false
    isWorking = true

    // Initialise webView with frame equal to A4 paper size in points
    // (I also tried UIScreen.main.bounds)
    self.wkWebView = WKWebView(frame: CGRect(origin: .zero, size: CGSize(width: 595, height: 842))) // A4 size     

    // Set web view navigation delegate.
    // You must keep a strong reference to this, so I made it an @State property on this view
    // This is a class that takes bindings so it can update the data and signal completion
    self.navigationDelegate = WKWebViewDelegate(wkWebView!, pdfData: $data, isReadyToRenderPDF: $isReadyToRenderPDF)
    wkWebView!.navigationDelegate = self.navigationDelegate
        
    // Generate HTML. You could also use a simple HTML string.
    // This is just my implementation.
    let htmlContent = htmlComposer.makeHTMLString()
    
    // Load HTML into web view
    wkWebView!.loadHTMLString(htmlContent, baseURL: nil)
    
    // Now the navigation delegate responds when data is updated.
}            

The WKWebView delegate class has this callback method.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    // This ensures following code only runs once, as delegate method is called multiple times.
    guard !readyOnce else { return }
    
    // Use javascript to check document ready state (all images and resources loaded)
    webView.evaluateJavaScript("document.readyState == \"complete\"") { result, error in
        if (error != nil) {
            print(error!.localizedDescription)
            return
        } else if result as? Int == 1 {
            self.readyOnce = true
            do {
                // Create PDF using WKWebView method and assign it to the binding (updates data variable in main view)
                self.pdfData = try await webView.pdf()
                
                // Signal to parent view via binding
                self.isReadyToRenderPDF = true
            } catch {
                print(error.localizedDescription)
            }
        } else {
            return
        }
    }
}

Back in parent view, respond to the change of Boolean value.

.onChange(of: isReadyToRenderPDF) { _ in
    isWorking = false
        DispatchQueue.main.async {
        // This toggle navigation link or sheet displaying PDF View using pdfData variable
            isShowingPDFView = true
        }
}

Finally, here is a PDFKit PDFView wrapped in UIViewRepresentable.

import SwiftUI
import PDFKit

struct PDFKitRepresentedView: UIViewRepresentable {
    
    let data: Data
    
    init(_ data: Data) {
        self.data = data
    }
    
    func makeUIView(context: UIViewRepresentableContext<PDFKitRepresentedView>) -> PDFKitRepresentedView.UIViewType {
        // Create PDFKit view and document
        let pdfView = PDFView()
        pdfView.document = PDFDocument(data: data)
        pdfView.autoScales = true
        pdfView.displaysPageBreaks = true
        pdfView.usePageViewController(true, withViewOptions: nil)
        pdfView.displayDirection = .horizontal
        pdfView.displayMode = .singlePage
        return pdfView
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<PDFKitRepresentedView>) {
        // Not implemented
    }
}

Answer 2

After Chris made me take another look at it (thanks for that :-) ) I am now a step closer to a working solution.

It really seems as though I really have to wait for the webView to load the html prior to creating the pdf. While I was not able to make it work with WKWebView.pdf(configuration:), I now have a (kind of…) working solution by using WKWebView.createPDF(configuration:completionHandler:):

    func generatePdf() {
        webView.loadHTMLString(htmlString, baseURL: nil)
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            let config = WKPDFConfiguration()
            config.rect = .init(origin: .zero, size: .init(width: 595.28, height: 841.89))
            self.webView.createPDF(configuration: config){ result in
                switch result {
                case .success(let data):
                    self.pdf = PDFDocument(data: data)
                case .failure(let error):
                    print(error)
                }
            }
        }
    }

I said "kind of works" above, because the resulting pdf seems to introduce a new line after each word, which is weird–but I will scope that issue to another research/question on SO.

Again, for the sake of completeness, here's the whole "app":

import SwiftUI
import PDFKit
import WebKit

@main
struct AFPdfApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

//MARK: View
struct ContentView: View {
    @StateObject private var vm = ViewModel()
    
    var body: some View {
        VStack {
            TextEditor(text: $vm.htmlString)
                .frame(width: 300.0, height: 200.0)
                .border(Color.accentColor, width: 1.0)
                .padding()
            WebViewWrapper(htmlString: $vm.htmlString)
            PdfViewRepresentable(pdfDocument: $vm.pdf)
        }
        .toolbar {
            Button("Create PDF") {
                Task {
                    vm.generatePdf()
                }
            }
        }
    }
}


//MARK: ViewModel
class ViewModel: ObservableObject {
    @Published var htmlString = """
    <h1>Some fancy html</h1>
    <h2>…and now let's create some pdf…</h2>
    """
    @Published var webView = WKWebView()
    @Published var pdf: PDFDocument? = nil
    
    func generatePdf() {
        webView.loadHTMLString(htmlString, baseURL: nil)
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            let config = WKPDFConfiguration()
            config.rect = .init(origin: .zero, size: .init(width: 595.28, height: 841.89))
            self.webView.createPDF(configuration: config){ result in
                switch result {
                case .success(let data):
                    self.pdf = PDFDocument(data: data)
                case .failure(let error):
                    print(error)
                }
            }
        }
    }
}

//MARK: ViewRepresentables
struct WebViewWrapper: NSViewRepresentable {
    @Binding var htmlString: String
    
    public func makeNSView(context: Context) -> WKWebView {
        return WKWebView()
    }
    
    public func updateNSView(_ nsView: WKWebView, context: Context) {
        nsView.loadHTMLString(htmlString, baseURL: nil)
    }
}

struct PdfViewRepresentable: NSViewRepresentable {
    @Binding var pdfDocument: PDFDocument?
    
    func makeNSView(context: Context) -> PDFView {
        return PDFView()
    }
    
    func updateNSView(_ nsView: PDFView, context: Context) {
        nsView.document = pdfDocument
    }
}