Posts Tags SmartHome HomeLab Projects About  English

Contents

Show a pdf file in a static site based on Hugo

Forgommand included in HomeLab
   773 words   4 minutes 
/pdf-reader-hugo-sites/code3.png

Target

You published your static site with Jamstack framework, especially with HUGO technology, and now you need to load a pdf reader in a page?

Searching around you will find excellent paid or subscription-required readers, such as the one from Adobe.com, but for my purposes I decided to implement a totally free solution.

Native method

Modern browsers have potential that would have been unimaginable a few years ago. Today in fact (excluding the old Microsoft Internet Explorer) it is possible to exploit an html tag to allow the browser to automatically download and display a pdf file within a static page.

Definition of the shortcode

To do this with HUGO technology, just use the shortcode component. In practice we have to define an html template for our HUGO compiler to use and load on request in our .md files (further details on the Official Documentation).

The shortcode must be defined in layouts/shortcodes/pdfReader.html

1

<embed src= "{{ .Get 0 }}" width= "100%" height= "1000px" type="application/pdf" >
Note
In this case I have set the width and height in a fixed manner, nothing prevents the use of parameters also for these values, for example with width="{{ .Get 1}}".

The src property, which indicates the source of the file, is passed as a parameter of the shortcode. For convenience we can add the file in the same folder as the .md file that will call it, this way we won’t have to worry about relative paths.

Call the shortcode from the page

To recall the “test.pdf” file found in the same folder as the article in markdown .md format, just use the code:

1

{{< pdfReader "prova.pdf" >}}

Demo

Here is the result:

Warning
Using this approach the file will be easily downloadable for site visitors. In fact, it will be enough to open the developer console of the browser to intercept the download of the file in the “Network” tab.

Google Drive Method

If you need to discourage any download of the file and make the file available for viewing only within the page, you can use the viewer in the “embedded” version of Google Drive. There’s another reason to use Google Drive viewer, because of limitations on the smartphone’s browsers that are not able to load native pdf viewer.

We upload the file to Google Drive and request a sharing link that allows anyone in possession of the link to view the file without changing it.

To avoid the possibility of downloading the pdf file it is essential to go to the sharing settings and deselect the last tick:

Definition of the shortcode

The shortcode must be defined in layouts/shortcodes/googlePdfReader.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
  <head>
    <title>{{ .Get 1 }}</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app">
      <iframe
        src="https://drive.google.com/file/d/{{ .Get 0 }}/preview"
        width="100%"
        height="1000">
      </iframe>
    </div>
  </body>
</html>
Note
In this case I have set the width and height in a fixed way, nothing prevents the use of parameters for these values too, for example with width="{{ .Get 2}}".

Call the shortcode from the page

Using the Google Drive reader it is not necessary to upload the pdf file within the site, as the only link to upload the reader will be the id within the sharing link.

Id of the file
The file ID must be retrieved from the Google Drive share link. For example, given the link: https://drive.google.com/file/d/12-yRg6VlVeUrNjioD8rGEybMHh_AMPTl/view?usp=sharing, the file’s id will be 12-yRg6VlVeUrNjioD8rGEybMHh_AMPTl

Within the page in markdown .md format we call the reader in this way: 

1

{{< googlePdfReader "id-del-file" "Title" >}}

Demo

Here is the result: Title

Conclusions

In this article we have seen 2 fast and free methods to display a pdf file within a static page of a HUGO site. In the native method there will be no need to use a file uploaded to Google Drive, on the other hand however it will easily allow any visitor to download the pdf file and you can have issues opening the page from smartphones.

Extra - Display shortcode as source code

While writing this article, I ran into a problem with displaying the shortcode code within the article itself. Inserting the string {{< shortcode >}} in the text or in a source code box of a Hugo page will not have the desired result, as the site compiler will replace the code with the relative declared template. To show the code as it is and inhibit the substitution you will need to insert some characters to comment the shortcode like this: 

1

{{</* googlePdfReader "id-del-file" "Title" */>}}

Updated on 15/01/2023
Read Markdown
 coding, hugo, software, frontend
Back | Home