Fix PDF viewer bug


September 13, 2021

TL;DR: The PDF viewer in the CV page is now fixed by using Mozilla's PDF.js Viewer.

Problem

So the PDF viewer in the CV page has this bug where the PDF would not appear depending on how you visited the CV page. If you navigated to the CV page from a link, the PDF would appear. If you went directly to the page from the address bar, the PDF would not appear. 🤷🏻‍♂️

The PDF viewer on the CV page is the Google Docs Viewer (https://docs.google.com/viewer?embedded=true&url=).

When the PDF doesn't appear, I found that the Google Docs Viewer returns a 204 HTTP status code, which means "No content".

I found several discussions online about the problem (1, 2, 3). The solutions are hacky: wait for a delay, reload the page until the viewer loads.

I also found a discussion that suggests that support for the viewer is limited given that the original page is no longer supported.
Solution

I tried this solution where I use HTML5's embed tag to load the PDF. However, on the Chrome browser, I couldn't hide the thumbnail sidebar. Sigh. 
The solution that I landed on was to use Mozilla's PDF.js Viewer, a general-purpose, web standards-based platform for parsing and rendering PDFs. Here’s what it looks like on a mobile screen.


Greetings from Owlstown!

Owlstown is a website builder especially designed for academics. You can create and maintain a beautiful academic website quickly and easily. Start your academic website and see what you've been missing.