Wednesday, September 28, 2022
HomeiOS DevelopmentSwiftUI ImageRenderer: Find out how to Create PDF Paperwork

SwiftUI ImageRenderer: Find out how to Create PDF Paperwork


Earlier, we confirmed you the way to use ImageRenderer to seize a SwiftUI view and put it aside as a picture. This new class, launched in iOS 16, may allow you to convert a view right into a PDF doc.

On this tutorial, we are going to construct on the highest of the earlier demo and add the Save to PDF perform. To observe this tutorial, please use Xcode 14 beta 3 (or up).

Revisit the Demo App

In case you haven’t learn the earlier tutorial, I recommend you to test it out first. It already coated the fundamentals of ImageRenderer and defined the implementation of the demo app.

swiftui-imagerenderer-pdf-demo

I’ve made some modifications to the demo app by including a heading and a caption for the road chart. The demo app now additionally comes with a PDF button for saving the chart view in a PDF doc. You may discuss with the code of the ChartView struct beneath:

Saving the Chart View as a PDF Doc Utilizing ImageRenderer

What we’re going to do is to create a PDF doc for the ChartView utilizing ImageRenderer. Whereas it solely takes a pair strains of code to transform a SwiftUI view into a picture, we’d like a bit of extra work for PDF rendering.

For picture conversion, you possibly can entry the uiImage property to get the rendered picture. To attract the chart right into a PDF, we are going to use the render methodology of ImageRenderer. Here’s what we’re going to implement:

  • Search for the doc listing and put together the rendered path for the PDF file (e.g. linechart.pdf).
  • Put together an occasion of CGContext for drawing.
  • Name the render methodology of the renderer to render the PDF doc.

For the implementation, we create a brand new methodology named exportPDF. Under is the code of the tactic :

The primary two strains of the code retrieves the doc listing of the consumer and arrange the file path of the PDF file (i.e. line chart.pdf). We then create the occasion of CGContext. The mediaBox parameter is ready to nil. On this case, Core Graphics makes use of a default web page dimension of 8.5 by 11 inches (612 by 792 factors).

The renderer closure receives two parameters: the present dimension of the view, and a perform that renders the view to the CGContext. To start the PDF web page, we name the context’s beginPDFPage methodology. The renderer methodology attracts the chart view. And keep in mind that it is advisable shut the PDF doc to finish the entire operation.

To name this exportPDF methodology, we create a PDF button like this:

You may run the app in a simulator to have a check. After you faucet the PDF button, you must see the next message within the console:

In case you open the file in Finder, you must see a PDF doc like beneath.

swiftui-line-chart-pdf

To regulate the place of the drawing, you possibly can insert this line of code earlier than calling renderer:

This can transfer the chart to the higher a part of the doc.

swiftui-line-chart-adjusted

Make the PDF file obtainable to the Information app

You could marvel why the PDF file can’t be discovered within the Information app. Earlier than you can also make the file obtainable to the built-in Information app, you must change a few the settings in Information.plist. Swap to Information.plist and add the next keys:

  • UIFileSharingEnabled – Utility helps iTunes file sharing
  • LSSupportsOpeningDocumentsInPlace – Helps opening paperwork in place

Set the worth of the keys to Sure. When you allow each choices, run the app on the simulator once more. Open the Information app and navigate to the On My iPhone location. It is best to see the app’s folder. Contained in the folder, one can find the PDF doc.

swiftui-files-app-pdf

If you’re concerned about diving deeper into SwiftUI, take a look at our Mastering SwiftUI e-book.


Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular