How to show PDF thumbnails using PDFThumbnailView

Swift version: 5.10

Paul Hudson @twostraws May 28th 2019

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!