Client-side PDF

category:

all posts
culture
design
engineering
project

Tags:

1445
aarhus
academia
art
art and technology
artificial intelligence
artistic research
artwork
blog
borders
certificate
client side
collaboration
cultural criticism
culture
design
devops
digital humanities
digital rights
digital scenography
docker
feral
future memory
gitlab
hosting
interdisciplinary
internet
internet of things
ios
jekyll
loss
manifesto
medium
memory
morm
music
notification
pdf
performance
react
research
resist
scripting
shell
skeuomorphism
software
ssl
switzerland
tactical media
television
theatre
transdisciplinarity
October 30, 2018
Producing client-side PDFs using React

The Problem

The holy grail of PDF delivery is client-side render that works well with minimal boilerplate. Once upon a time I used to build these server-side in XSLT, which is... not fun.

Using React, there is a convoluted but easy hack, which is to use canvas to essentially screenshot the DOM and then wrap that in the bare minimum code such that it renders as if it were a PDF. This technique can be useful for some things that you actually want to screenshot (IE a data visualization) but for most of the cases where you want a real, properly-paginated PDF this solution is a no-go.

As of this writing, possible solutions are thin on the ground. I've found two that look promising:

  1. For $800 you can use this commercial solution. This is probably the most stable option at the moment but it depends on your budget and how you feel about licensing a bit of code.

  2. How about an open-source solution? As of this writing, the best candidate is react-pdf/render library but it is currently in alpha. There are the usual bumps with OSS, and unfortunately I wasn't able to get any of the examples reliably working - in particular the problem seems to be that all of the examples are written using strictly functional components and the codebase I'm working on was initialized using create-react-app and makes heavy use of lifecycle methods.

You might not want this...

This approach allows you to logically describe your document (as <Document> with <Page> and so on). This is quite powerful, but still obligates you to actually create your PDF markup independent of your screen markup.

You might be wishing for HTML to PDF conversion, which is a completely different thing. As far as I can tell, the best conversion options are still wonky and all require a server, this might change. I found this blog post that rounds up various other options.

If you want a lower-level client-side approach to PDF generation, jsPDF looks nice.

Solution

I pieced together the following working example from the documentation, various threads around the internet and some trial and error. These steps should get you a proof of concept app that will deliver a PDF rendered on the fly. It also works on mobile (iOS devices anyway):

Did you find this helpful or interesting? I'm glad! 🦊 💜 ☕️
Buy Me a Coffee at ko-fi.com
Why?