<译> 在 iOS 中使用 HTML 模版和 UIPrintPageRenderer 生成 PDF

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.

http://www.appcoda.com/pdf-generation-ios/

1. 为这些需要被生成为 PDF 的表单和内容创建 HTML 模版。

2. 使用这些 HTML 模版来渲染真正的内容（或者把它显示在 web view 中）。

3. 把 HTML 的内容转换为 PDF。

上手项目

• 接收者的信息，其实就是接收人的地址。上图中的灰色区域。

• 需要打发票的我条目，每个条目都由两部分组成：提供服务的描述，这项服务的价格。为了简单起见，这里没有增值税。可以通过底部 toolbar 的加号来添加新的条目。

• 发票的号码（显示在 navigation bar 中的号码）

• 这张发票的总价格（显示在底部 toolbar 的左边）

• 发送者的信息，也就是发行人的信息。

• 发票的截止日期（如果你想用也可以用，但在这里用不到，所以设为空）。

• 付款的方式。

• 发票的图标。

• 发票号码（string）。

• 接收人的信息（string）。

• 全部金额（string）。

• 发票的条目（装字典的数组）。

HTML 模版文件

1. invoice.html

2. last_item.html

3. single_item.html

<td> Invoice #: #INVOICE_NUMBER<br>#INVOICE_DATE#<br>#DUE_DATE# </td>

备注：即使截止日期是以占位符的形式存在的，但是我们不会真正使用它，只会用空的字符来替换它。但如果你需要使用的话，可以任意使用。

• #LOGO_IMAGE#

• #INVOICE_NUMBER#

• #INVOICE_DATE#

• #DUE_DATE#

• #SENDER_INFO#

• #RECIPIENT_INFO#

• #PAYMENT_METHOD#

• #ITEMS#

• #TOTAL_AMOUNT#

• #ITEM_DESC#

• #PRICE#

搭建内容

class InvoiceComposer: NSObject {

    let pathToInvoiceHTMLTemplate = NSBundle.mainBundle().pathForResource("invoice", ofType: "html")

    let pathToSingleItemHTMLTemplate = NSBundle.mainBundle().pathForResource("single_item", ofType: "html")

    let pathToLastItemHTMLTemplate = NSBundle.mainBundle().pathForResource("last_item", ofType: "html")

    let senderInfo = "Gabriel Theodoropoulos<br>123 Somewhere Str.<br>10000 - MyCity<br>MyCountry"

    let dueDate = ""

    let paymentMethod = "Wire Transfer"

    let logoImageURL = "http://www.appcoda.com/wp-content/uploads/2015/12/blog-logo-dark-400.png"

    var invoiceNumber: String!

    var pdfFilename: String!
}

class InvoiceComposer: NSObject{
    ...

    override init() {
        super.init()
    }
}

func renderInvoice(invoiceNumber: String, invoiceDate: String, recipientInfo: String, items: [[String: String]], totalAmount: String) -> String! {

}

func renderInvoice(invoiceNumber: String, invoiceDate: String, recipientInfo: String, items: [[String:String]], totalAmount: String) -> String! {
 // 为了将来的使用，把发票号码先存起来
    self.invoiceNumber = invoiceNumber

    do {
    // 把 发票模版的 HTML 文件内容载入到一个字符串变量中
        var HTMLContent = try String(contentsOfFile: pathToInvoiceHTMLTemplate!)

        // 除了发票条目的所有占位符都替换成真实的值

        // 图标。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#LOGO_IMAGE#", withString:logoImageURL)

        // 发票号码。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#INVOICE_NUMBER#", withString:invoiceNumber)

        // 开票时间。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#INVOICE_DATE#", withString:invoiceDate)

        // 截止日期（默认为空）。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#DUE_DATE#", withString:dueDate)

        // 发行人信息。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#SENDER_INFO#", withString:senderInfo)

        // 接收人信息。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#RECIPIENT_INFO#", withString:recipientInfo.stringByReplacingOccurrencesOfString("\n", withString:""))

        // 支付方法。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#PAYMENT_METHOD#", withString:paymentMethod)

        // 总计金额。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#TOTAL_AMOUNT#", withString:totalAmount)

    }
    catch {
        print("Unable to open and use HTML template files.")
    }

    return nil
}

func renderInvoice(invoiceNumber: String, invoiceDate: String,recipientInfo: String, items: [[String: String]], totalAmount: String) -> String! {
 ...
    do {
        ...
        // 通过循环来添加发票条目。
        var allItems = ""
        // 除了最后一个，都使用 "single_item.html" 模版。
        // 对于最后一个，使用 "last_item.html" 模版。
        for i in 0 ..< items.count {
            var itemHTMLContent:String!

            // 判断该使用哪个模版文件
            if i != items.count - 1 {
                itemHTMLContent = try String(contentsOfFile: pathToSingleItemHTMLTemplate!)
            }
            else {
                itemHTMLContent = try String(contentsOfFile: pathToLastItemHTMLTemplate!)
            }

            // 把描述和价格替换为真正的值。
            itemHTMLContent = itemHTMLContent.stringByReplacingOccurrencesOfString("#ITEM_DESC#", withString: items[i]["item"]!)

            // 把每个价格格式化为货币值。
            let formattedPrice = AppDelegate.getAppDelegate().getStringValueFormattedAsCurrency(items[i]["price"]!)
            itemHTMLContent = itemHTMLContent.stringByReplacingOccurrencesOfString("#PRICE#", withString: formattedPrice)

            // 把当前条目的内容加到整体的条目字符串中
            allItems += itemHTMLContent
        }

        // 替换条目。
        HTMLContent = HTMLContent.stringByReplacingOccurrencesOfString("#ITEMS#", withString:allItems)

        // HTML 代码已经 ready。
        return HTMLContent
    }
    catch {
        print("Unable to open and use HTML template files.")
    }

    return nil
}

备注：你可以在 AppDelegate.swift 文件中找到 getAppDelegate() 和 getStringValueFormattedAsCurrency() 方法的实现。

预览 HTML 内容

classPreviewViewController: UIViewController {

    ...

    var invoiceComposer: InvoiceComposer!

    var HTMLContent: String!
}

1. 初始化 invoiceComposer 对象。

2. 调用 renderInvoice(...) 方法，产生发票内容的 HTML 代码。

3. 把 HTML 加载到 web view 中。

4. 把返回的 HTML 字符串存入 HTMLContent 属性中。

func createInvoiceAsHTML() {
    invoiceComposer = InvoiceComposer()
    if let invoiceHTML = invoiceComposer.renderInvoice(invoiceInfo["invoiceNumber"] as! String, invoiceDate: invoiceInfo["invoiceDate"] as! String, recipientInfo: invoiceInfo["recipientInfo"] as! String, items: invoiceInfo["items"] as! [[String:String]], totalAmount: invoiceInfo["totalAmount"] as! String) {
            webPreview.loadHTMLString(invoiceHTML,baseURL:NSURL(string:invoiceComposer.pathToInvoiceHTMLTemplate!)!)
        HTMLContent = invoiceHTML
    }
}

override func viewWillAppear(animated:Bool) {
    super.viewWillAppear(animated)
    createInvoiceAsHTML()
}

准备输出

1. 让它继承自 UIPrintPageRenderer。

2. 把它命名为 CustomPrintPageRenderer。

class CustomPrintPageRenderer: UIPrintPageRenderer {

    let A4PageWidth: CGFloat = 595.2

    let A4PageHeight: CGFloat = 841.8
}

override init() {

    super.init()

// 指定 A4 纸的尺寸
    let pageFrame = CGRect(x: 0.0, y: 0.0, width: A4PageWidth, height: A4PageHeight)

// 设定页面的尺寸
    self.setValue(NSValue(CGRect:pageFrame), forKey:"paperRect")

// 设定水平和垂直的缩进（这一步是可选的）
    self.setValue(NSValue(CGRect:pageFrame), forKey:"printableRect")
}

self.setValue(NSValue(CGRect:CGRectInset(pageFrame,10.0,10.0)),forKey:"printableRect")

输出为 PDF

UIPrintFormatter is an abstract base class for print formatters: objects that lay out custom printable content that can cross page boundaries. Given a print formatter, the printing system can automate the printing of the type of content associated with the print formatter.

func exportHTMLContentToPDF(HTMLContent: String) {

    let printPageRenderer = CustomPrintPageRenderer()

    let printFormatter = UIMarkupTextPrintFormatter(markupText: HTMLContent)

    printPageRenderer.addPrintFormatter(printFormatter, startingAtPageAtIndex: 0)

    let pdfData = drawPDFUsingPrintPageRenderer(printPageRenderer)

    pdfFilename="\(AppDelegate.getAppDelegate().getDocDir())/Invoice\(invoiceNumber).pdf"

    pdfData.writeToFile(pdfFilename, atomically:true)

    print(pdfFilename)
}

• 首先我们初始化了一个 CustomPrintPageRenderer 对象来执行绘制工作。

• 接着我们初始化了一个 UIMarkupTextPrintFormatter 对象，在初始化的时候，我们把 HTML content 作为参数传了进去。

• 第三行，我们把 printFormatter 加到了 printPageRenderer 对象中。addPrintFormatter(...) 方法的第二个参数是指定 printFormatter 起始生效的页面。我们在这里设置为 0，因为打印的内容只有一页。

• 真正的绘制部分在接下来才会发生。drawPDFUsingPrintPageRenderer(...) 是一个我们在后面才会创建的自定义方法。绘制完成的 PDF 会被存放在 pdfData 对象中，它实际上是一个 NSData 类型的对象。

• 接下来就是把 PDF 数据存入文件。首先我们声明了文件的路径，以发票的号码来指定文件名。然后把 PDF 数据写入这个文件中。

• 最后一步显然不是必要的，但是我们可以通过在 Finder 中找到这个新创建的文件，来验证我们绘制的结果。

func drawPDFUsingPrintPageRenderer(printPageRenderer:UIPrintPageRenderer) -> NSData! {
    let data = NSMutableData()

    UIGraphicsBeginPDFContextToData(data, CGRectZero, nil)

    UIGraphicsBeginPDFPage()

    printPageRenderer.drawPageAtIndex(0, inRect: UIGraphicsGetPDFContextBounds())

    UIGraphicsEndPDFContext()

    return data
}

printPageRenderer.drawPageAtIndex(0,inRect:UIGraphicsGetPDFContextBounds())

@IBAction func exportToPDF(sender: AnyObject){
    invoiceComposer.exportHTMLContentToPDF(HTMLContent)
}

绘制自定义的 Header 和 Footer

override init() {
    ...

    self.headerHeight = 50.0
    self.footerHeight = 50.0
}

override func drawHeaderForPageAtIndex(pageIndex: Int, inRect headerRect: CGRect) {

}

1. 首先指定我们要绘制的 header 文字（也就是「Invoice」单词）。

2. 指定 header 文字的一些属性，比如字体、颜色、字间距等。

3. 计算字在加上上述属性后占据的空间，然后指定文字到页面右侧页面的边距。

4. 设置文字起始绘制的点。

5. 绘制文字（终于到这一步了）。

override func drawHeaderForPageAtIndex(pageIndex: Int, inRect headerRect: CGRect) {

    // 声明 header 文字。
    let headerText: NSString = "Invoice"

    // 设置字体。
    let font = UIFont(name: "AmericanTypewriter-Bold", size: 30.0)

    // 设置字的属性。
    let textAttributes = [NSFontAttributeName: font!, NSForegroundColorAttributeName: UIColor(red: 243.0/255, green: 82.0/255.0, blue: 30.0/255.0, alpha: 1.0), NSKernAttributeName: 7.5]

    // 计算字的大小。
    let textSize = getTextSize(headerText as String, font: nil, textAttributes: textAttributes)

    // 右边的空距。
    let offsetX: CGFloat = 20.0

    // 指定字应该从哪里开始绘制。
    let pointX = headerRect.size.width - textSize.width - offsetX
    let pointY = headerRect.size.height/2 - textSize.height/2

    // 绘制 header 的文字。
    headerText.drawAtPoint(CGPointMake(pointX, pointY), withAttributes: textAttributes)
}

func getTextSize(text: String, font: UIFont!, textAttributes: [String: AnyObject]! = nil) -> CGSize {

    let testLabel = UILabel(frame: CGRectMake(0.0, 0.0, self.paperRect.size.width, footerHeight))

    if let attributes = textAttributes {
        testLabel.attributedText = NSAttributedString(string: text, attributes: attributes)
    } else {
        testLabel.text = text
        testLabel.font = font!
    }

    testLabel.sizeToFit()
    return testLabel.frame.size
}

override func drawFooterForPageAtIndex(pageIndex: Int, inRect footerRect: CGRect) {

    let footerText: NSString = "Thank you!"

    let font = UIFont(name: "Noteworthy-Bold", size: 14.0)

    let textSize = getTextSize(footerText as String, font: font!)

    let centerX = footerRect.size.width/2 - textSize.width/2

    let centerY = footerRect.origin.y + self.footerHeight/2 - textSize.height/2

    let attributes = [NSFontAttributeName: font!, NSForegroundColorAttributeName: UIColor(red: 205.0/255.0, green: 205.0/255.0, blue: 205.0/255, alpha: 1.0)]

    footerText.drawAtPoint(CGPointMake(centerX, centerY), withAttributes: attributes)

}

override func drawFooterForPageAtIndex(pageIndex: Int, inRect footerRect: CGRect) {
    ...

    // 绘制水平线

    let lineOffsetX: CGFloat = 20.0

    let context = UIGraphicsGetCurrentContext()

    CGContextSetRGBStrokeColor(context, 205.0/255.0, 205.0/255.0, 205.0/255, 1.0)

    CGContextMoveToPoint(context, lineOffsetX, footerRect.origin.y)

    CGContextAddLineToPoint(context, footerRect.size.width - lineOffsetX, footerRect.origin.y)

    CGContextStrokePath(context)

}

(text as! NSString).drawAtPoint(...)

Bonus Part：预览并使用 Email 发送 PDF 文件

func showOptionsAlert() {

    let alertController = UIAlertController(title: "Yeah!", message: "Your invoice has been successfully printed to a PDF file.\n\nWhat do you want to do now?", preferredStyle: UIAlertControllerStyle.Alert)

    let actionPreview = UIAlertAction(title: "Preview it", style: UIAlertActionStyle.Default) { (action) in

    }

    let actionEmail = UIAlertAction(title: "Send by Email", style: UIAlertActionStyle.Default) { (action) in

    }

    let actionNothing = UIAlertAction(title: "Nothing", style: UIAlertActionStyle.Default) { (action) in

    }

    alertController.addAction(actionPreview)

    alertController.addAction(actionEmail)

    alertController.addAction(actionNothing)

    presentViewController(alertController, animated: true, completion: nil)

}

let actionPreview = UIAlertAction(title: "Preview it", style: UIAlertActionStyle.Default) { (action) in

    let request = NSURLRequest(URL: NSURL(string: self.invoiceComposer.pdfFilename)!)

    self.webPreview.loadRequest(request)

}

func sendEmail() {

    if MFMailComposeViewController.canSendMail() {

        let mailComposeViewController = MFMailComposeViewController()

        mailComposeViewController.setSubject("Invoice")

        mailComposeViewController.addAttachmentData(NSData(contentsOfFile: invoiceComposer.pdfFilename)!, mimeType: "application/pdf", fileName: "Invoice")

        presentViewController(mailComposeViewController, animated: true, completion: nil)

    }

}

import MessageUI

let actionEmail = UIAlertAction(title: "Send by Email", style: UIAlertActionStyle.Default) { (action) in

    dispatch_async(dispatch_get_main_queue(), {

        self.sendEmail()

    })
}

@IBAction func exportToPDF(sender: AnyObject) {

    ...

    showOptionsAlert()
}

总结