How to Display Your CV in a User-Friendly Reader Format on (Almost) Every Browser with Hugo
hugo htmlHave you been in this situation? You browse someone’s website, you click on the big, promising button displaying “CV” and … whoops, you have downloaded “someones-cv.pdf”.
Well, PDF is a somewhat suboptimal format for browsers, each browser seems to handle PDFs differently per default, as special plug-ins are required.
In this short tutorial, I propose a solution that lets almost all browsers display your CV in a nice, frictionless format - without unintentional downloads.
You can take a look at the solution here, since I recently published a public CV to this site.
How it works
The trick is that we will embed an online PDF reader inside the frame of a HTML document. At the moment, Google Docs is the only service I know of who offers a pdf reader which only requires a public URL. This means, one does not have to upload their PDF to Google Docs, but can open any publicly available PDF in their browser like this:
https://docs.google.com/viewer?url=https://website.com/directory/file.pdf&embedded=true
Now, we just embed this viewer in our HTML document. In this example, I edit my CV with GitHub in this repository, using a recommendable R-Markdown template by Daniel Anderson.
<object
data="https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf"
type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf&embedded=true"></iframe>
</object>
Scaling the window to 100% and creating a disjunct html file in
Hugo in /static/html/cv.html, the complete document looks like this and can
then be linked across my website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<object
data="https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf"
type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=https://github.com/conradborchers/borchers-cv/raw/master/borchers-cv.pdf&embedded=true"></iframe>
</object>
<em>
<p>Did Your browser download my CV without You intending to?
If You are using Chrome, you can disable automatic downloading
of PDF files. Afterwards, You should see my CV in a PDF reader,
requiring no download.</p>
<p>
<a href="https://cborchers.com/2021/01/03/how-to-display-your-cv-in-a-user-friendly-reader-format-on-almost-every-browser-with-hugo/" target="_blank">For more information, please refer to this blog post.</a>
</p>
<em>
</body>
</html>
As you can see, I added a note for users which have to turn off automatic downloading in their browser settings in order to display the page correctly.
Final thoughts
In many regards, PDF is outdated but as of now it seems like it will stick around for a while. Let’s make the best out of this situation and minimize the risk of unneccessary downloads.