NEW: Nominations are now open for the 2019 Swift Community Awards! >>

How to show PDF thumbnails using PDFThumbnailView

Swift version: 5.1

Paul Hudson    @twostraws   

Apple’s PDFKit framework provides a huge range of code to help us work with PDFs, including a dedicated view for rendering thumbnails of PDF pages: PDFThumbnailView. However, using it takes a little extra work because it doesn’t read PDF directly – you first load the PDF into a PDFView, then connect that to the thumbnail view.

To try it out, start by importing the PDFKit framework:

import PDFKit

Next, add this code to your viewDidLoad() method to create a PDFView and make it pin to the top, left, and right edges of your view:

let pdfView = PDFView()

pdfView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(pdfView)

pdfView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
pdfView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
pdfView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

Third, create a PDFThumbnailView and pin to the bottom, left, and right edges of your view controller:

let thumbnailView = PDFThumbnailView()
thumbnailView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(thumbnailView)

thumbnailView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
thumbnailView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
thumbnailView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

We need the PDF view and PDF thumbnail view to share the space, so we’re going to make the limit the thumbnail to 120 points of height, with the PDF view taking up the rest of the space:

pdfView.bottomAnchor.constraint(equalTo: thumbnailView.topAnchor).isActive = true
thumbnailView.heightAnchor.constraint(equalToConstant: 120).isActive = true

PDFThumbnailView has a few interesting properties to set, of which the most important are the size of the thumbnails and the direction they should be born:

thumbnailView.thumbnailSize = CGSize(width: 100, height: 100)
thumbnailView.layoutMode = .horizontal

Now we just need to connect the two views together so that changing one also changes the other:

thumbnailView.pdfView = pdfView

Finally, create a URL pointing to a PDF you have in your bundle somewhere (or one in your documents directory), then create a PDFDocument object from that and pass it to the PDF view:

guard let path = Bundle.main.url(forResource: "example", withExtension: "pdf") else { return }

if let document = PDFDocument(url: path) {
    pdfView.document = document
}

Done!

SAVE 20% ON iOS CONF SG The largest iOS conference in Southeast Asia is back in Singapore for the 5th time in January 2020, now with two days of workshops plus two days of talks on SwiftUI, Combine, GraphQL, and more! Save a massive 20% on your tickets by clicking on this link.

Available from iOS 11.0 – learn more in my book Advanced iOS: Volume Two

Similar solutions…

About the Swift Knowledge Base

This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.

MASTER SWIFT NOW
Buy Testing Swift Buy Practical iOS 12 Buy Pro Swift Buy Swift Design Patterns Buy Swift Coding Challenges Buy Server-Side Swift (Vapor Edition) Buy Server-Side Swift (Kitura Edition) Buy Hacking with macOS Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with Swift Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 5.0/5