How to Generate PDF using HTML Templates and UIPrintPageRenderer in iOS

Have you ever been asked to create PDF documents with content straight from your app? Have you ever even thought how to do that, if you’ve never done it before?

Well, beginning the post by setting questions is a bit of unorthodox way to start, but the above summarise what I’m about to talk in this text. The idea of creating a PDF document in an iOS app looks quite often like the road through hell, but it doesn’t have to be like that. As a developer, you have always to be resourceful and create yourself alternatives and options to choose from and avoid reaching your goal at any cost. Nobody wants that. I have to admit that drawing a PDF page manually can become eventually a really painful process (depending on the content), and doing so can turn into an unproductive task at the end. Calculating points, adding lines, setting colors, insets, offsets, etc, might be interesting (or not), but definitely things can go really messy if you have complicated documents to draw.

My goal here is to present you a different way to create PDF documents, which is way more simpler than drawing them manually. The whole idea is based on using HTML templates and it can be synopsised in the following steps:

  1. Creation of HTML templates for the forms or the content needed to be printed to PDF.
  2. Use of those HTML templates to produce the real content (optionally display it in a web view).
  3. Printing the real HTML content to PDF.

In the last step, iOS will do all the hard work for you.

Let me be more thorough now. I think that you totally agree to the fact that it’s always preferable to deal with HTML instead of drawing PDFs directly. All you actually want in that case is to manage to represent your content as an HTML page, but it’s not wise or productive to manually create pages for repeated content. For example, think of an app that prints or exports personal information for school students to PDF. Creating an HTML page manually for every single student is out of the question, as the same pattern is followed for printing the info for all students. What you really want is to create one HTML page only, which is going to be the template. Instead of using real values, you set placeholders in the key points that you mark in a unique way, and then inside your app you replace those placeholders with real values. You understand of course that the value replacement in the last step is an automated process and can be done repeatedly.

By the time you have some real content formed as HTML code, you can do whatever it’s possible to do with it. That means that you can display it in a web view, to save it to external files, to share it, and of course, to print it as PDF.

So, what exactly are we going to go through the next parts?

The ultimate goal is to show to you how to print content to a PDF document. But we’ll get there based on HTML templates with placeholder values that will be replaced by real values. The demonstration app we’ll use is a simple invoice maker, which I think that perfectly fits to the needs of printing data to PDF. We are not going to build that app from scratch, it’s not our goal after all. The default functionality will be given to you already made. You’ll also be given the HTML templates, and we’ll go through them so you have the chance to understand what is all about, and what the meaning of placeholders is. But no matter what, we’ll go together and step by step through the process of composing the real HTML content, and then printing it to a PDF document. And we won’t stop there; I’ll also show you how to add header and footer content to your final PDF.

Interested in all the above? Let’s get started then!

Continue reading my tutorial on Appcoda