在 iOS 上将 SwiftUI 视图转换为 PDF

Question

I was drawing some nice graphs with SwiftUI, because it is so simple and easy to do. Then I wanted to export the whole SwiftUI View to a PDF such that someone else can view the graphs in a nice way. SwiftUI does not offer a solution for this directly.

Cheers,
Alex

Answer 1

After some thinking I came up with the idea of combining the UIKit to PDF method and SwiftUI.

At first you create your SwiftUI view, then you put into an UIHostingController. You render the HostingController on a window behind all other views and and draw its layer on a PDF. Sample code is listed below.

func exportToPDF() {

    let documentDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
    let outputFileURL = documentDirectory.appendingPathComponent("SwiftUI.pdf")

    //Normal with
    let width: CGFloat = 8.5 * 72.0
    //Estimate the height of your view
    let height: CGFloat = 1000
    let charts = ChartsView()

    let pdfVC = UIHostingController(rootView: charts)
    pdfVC.view.frame = CGRect(x: 0, y: 0, width: width, height: height)

    //Render the view behind all other views
    let rootVC = UIApplication.shared.windows.first?.rootViewController
    rootVC?.addChild(pdfVC)
    rootVC?.view.insertSubview(pdfVC.view, at: 0)

    //Render the PDF
    let pdfRenderer = UIGraphicsPDFRenderer(bounds: CGRect(x: 0, y: 0, width: 8.5 * 72.0, height: height))

    do {
        try pdfRenderer.writePDF(to: outputFileURL, withActions: { (context) in
            context.beginPage()
            pdfVC.view.layer.render(in: context.cgContext)
        })

        self.exportURL = outputFileURL
        self.showExportSheet = true

    }catch {
        self.showError = true
        print("Could not create PDF file: \(error)")
    }

    pdfVC.removeFromParent()
    pdfVC.view.removeFromSuperview()
}

Answer 2

I loved this answer, but couldn't get it to work. I was getting an exception and the catch wasn't being executed.

After some head scratching, and writing up a SO Question asking how to debug it (which I never submitted), I realized that the solution, while not obvious, was simple: wrap the rendering phase in an async call to the main queue:

//Render the PDF

 let pdfRenderer = UIGraphicsPDFRenderer(bounds: CGRect(x: 0, y: 0, width: 8.5 * 72.0, height: height))
 DispatchQueue.main.async {
     do {
         try pdfRenderer.writePDF(to: outputFileURL, withActions: { (context) in
             context.beginPage()
             pdfVC.view.layer.render(in: context.cgContext)
         })
         print("wrote file to: \(outputFileURL.path)")
     } catch {
         print("Could not create PDF file: \(error.localizedDescription)")
     }
 }

Thanks, SnOwfreeze!

Answer 3

I tried all the answers, but they didn't work for me (Xcode 12.4, iOS 14.4). Here is what's worked for me:

import SwiftUI

func exportToPDF() {
    let outputFileURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!.appendingPathComponent("SwiftUI.pdf")
    let pageSize = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
    
    //View to render on PDF
    let myUIHostingController = UIHostingController(rootView: ContentView())
    myUIHostingController.view.frame = CGRect(origin: .zero, size: pageSize)
    
    
    //Render the view behind all other views
    guard let rootVC = UIApplication.shared.windows.first?.rootViewController else {
        print("ERROR: Could not find root ViewController.")
        return
    }
    rootVC.addChild(myUIHostingController)
    //at: 0 -> draws behind all other views
    //at: UIApplication.shared.windows.count -> draw in front
    rootVC.view.insertSubview(myUIHostingController.view, at: 0)
    
    
    //Render the PDF
    let pdfRenderer = UIGraphicsPDFRenderer(bounds: CGRect(origin: .zero, size: pageSize))
    DispatchQueue.main.async {
        do {
            try pdfRenderer.writePDF(to: outputFileURL, withActions: { (context) in
                context.beginPage()
                myUIHostingController.view.layer.render(in: context.cgContext)
            })
            print("wrote file to: \(outputFileURL.path)")
        } catch {
            print("Could not create PDF file: \(error.localizedDescription)")
        }
        
        //Remove rendered view
        myUIHostingController.removeFromParent()
        myUIHostingController.view.removeFromSuperview()
    }
}

Note: Don't try to use this function in a view with .onAppear when you try to export the same view. This will result in a endless loop naturally.

Answer 4

When I tried to generate a PDF file using the the solutions in other answers I only got a blurred PDF and the quality was far from good.

I ended up generating the SwiftUI view in a much bigger frame and scaled down the context to the appropriate size.

Here are my modifications to the Sn0wfreeze's answer :

// scale 1 -> 72 DPI
// scale 4 -> 288 DPI
// scale 300 / 72 -> 300 DPI
let dpiScale: CGFloat = 4

// for US letter page size
let pageSize = CGSize(width: 8.5 * 72, height: 11 * 72)
// for A4 page size
// let pageSize = CGSize(width: 8.27 * 72, height: 11.69 * 72)

let pdfVC = UIHostingController(rootView: swiftUIview)
pdfVC.view.frame = CGRect(origin: .zero, size: pageSize * dpiScale)

...

let pdfRenderer = UIGraphicsPDFRenderer(bounds: CGRect(origin: .zero, size: pageSize))
do {
    try pdfRenderer.writePDF(to: outputFileURL) { context in
        context.beginPage()
        context.cgContext.scaleBy(x: 1 / dpiScale, y: 1 / dpiScale)
        pdfVC.view.layer.render(in: context.cgContext)
    }
    print("File saved to: \(outputFileURL.path)")
}
...

I also used the following extension to multiply CGSize by CGFloat:

extension CGSize {
    static func * (size: CGSize, value: CGFloat) -> CGSize {
        return CGSize(width: size.width * value, height: size.height * value)
    }
}

Answer 5

I tried the other methods above but still had issues with the view showing properly, so here is what I have that works for me on Xcode 12.2 & Swift 5 after messing with both Sn0wfreeze's Answer & pawello2222's Answer :

func exportToPDF() {
    let outputFileURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!.appendingPathComponent("SwiftUI.pdf")
    let pageSize = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
    let rootVC = UIApplication.shared.windows.first?.rootViewController

    //Render the PDF
    let pdfRenderer = UIGraphicsPDFRenderer(bounds: CGRect(origin: .zero, size: pageSize))
    DispatchQueue.main.async {
        do {
            try pdfRenderer.writePDF(to: outputFileURL, withActions: { (context) in
                context.beginPage()
                rootVC?.view.layer.render(in: context.cgContext)
            })
            print("wrote file to: \(outputFileURL.path)")
        } catch {
            print("Could not create PDF file: \(error.localizedDescription)")
        }
    }
}

Basically, I removed any reference to a newly created "pdfVC" view controller, and only referenced the main view the entire time as our "rootVC". I grab the screen width and height and use that to define our PDF's width and height, rather than trying to scale the view to proper A4 or letter size. This creates a PDF of the entire showing SwiftUI view.

Hope this helps anyone that had any issues with the other answers! :)

Answer 6

func exportToPDF() {
    
    let dpiScale: CGFloat = 1.5
    
    // for US letter page size
    // let pageSize = CGSize(width: 8.5 * 72, height: 11 * 72)
    // for A4 page size
    let pageSize = CGSize(width: 8.27 * 72, height: 11.69 * 72)
    
    //View to render on PDF
    let myUIHostingController = UIHostingController(rootView: self)// when we render the current view
    myUIHostingController.view.frame = CGRect(origin: .zero, size: pageSize * dpiScale)
    myUIHostingController.view.overrideUserInterfaceStyle = .light//it will be light, when dark mode
    //Render the view behind all other views
    guard let rootVC = UIApplication.shared.windows.first?.rootViewController else {
        print("ERROR: Could not find root ViewController.")
        return
    }
    rootVC.addChild(myUIHostingController)
    //at: 0 -> draws behind all other views
    //at: UIApplication.shared.windows.count -> draw in front
    rootVC.view.insertSubview(myUIHostingController.view, at: 0)
    
    
    //Render the PDF
    let pdfRenderer = UIGraphicsPDFRenderer(bounds: CGRect(origin: .zero, size: pageSize))
    DispatchQueue.main.async {
        do {
            try pdfRenderer.writePDF(to: outputFileURL) { context in
                context.beginPage()
                context.cgContext.scaleBy(x: 1 / dpiScale, y: 1 / dpiScale)
                myUIHostingController.view.layer.render(in: context.cgContext)
            }
            print("wrote file to: \(outputFileURL.path)")
        } catch {
             print("Could not create PDF file: \(error.localizedDescription)")
        }
        
        //Remove rendered view
        myUIHostingController.removeFromParent()
        myUIHostingController.view.removeFromSuperview()
    }
}

when i tried to render the current view i got a warning. I fixed it. And I added a line so that the pdf document remains light when dark mode is turned on in the device. It's the best solution for me, I hope for you too. Thanks pawello2222

here is the required extension from pawello2222

extension CGSize {
static func * (size: CGSize, value: CGFloat) -> CGSize {
    return CGSize(width: size.width * value, height: size.height * value)
   }
}