Visualizzare un file pdf in un sito statico basato su Hugo

15/01/2023 745 parole 4 minuti

Contenuti

Obiettivo

Hai pubblicato il tuo sito statico con framework Jamstack, in particolare con la tecnologia HUGO, e hai bisogno di un lettore pdf in una pagina? Niente di più semplice. Cercando in giro troverai ottimi lettori a pagamento o con richiesta di sottoscrizione, come quello di Adobe.com, ma per i miei scopi ho deciso di implementare una soluzione totalmente gratuita.

Approccio nativo

I browser moderni hanno delle potenzialità che sarebbero state inimmaginabili fino a pochi anni fa. Ad oggi infatti (escludendo il vetusto Microsoft Internet Explorer) è possibile sfruttare un tag html per consentire al browser di scaricare e mostrare in maniera automatica un file pdf all’interno di una pagina statica.

Creazione shortcode

Per farlo con la tecnologia HUGO basta avvalersi del componente shortcode. In pratica dobbiamo definire al nostro compilatore HUGO un template di html da impiegare e caricare a richiesta nei nostri file .md (ulteriori dettagli sulla Documentazione ufficiale).

Lo shortcode deve essere definito in layouts/shortcodes/pdfReader.html

1

<embed src= "{{ .Get 0 }}" width= "100%" height= "1000px" type="application/pdf" >

Note

In questo caso ho impostato width e height in maniera fissa, nulla vieta di impiegare dei parametri anche per questi valori, ad esempio con width="{{ .Get 1}}".

La proprietà src, che indica la sorgente del file, è passata come parametro della shortcode. Per comodità possiamo aggiungere il file nella stessa cartella del file .md che lo richiamerà, in questo modo non dovremo preoccuparci di path relativi.

Richiamare lo shortcode nella pagina

Per richiamare il file di prova “prova.pdf” che si trova nella medesima cartella dell’articolo in formato markdown .md basterà utilizzare il codice:

1

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

Demo

Ecco il risultato:

Attenzione

Utilizzando questo approccio il file sarà facilmente scaricabile ai visitatori del sito. Basterà infatti aprire la console degli sviluppatori del browser per intercettare nel tab “Network” il download del file.

Approccio Google Drive

Se è necessario scoraggiare l’eventuale download del file e mettere a disposizione il file in sola visualizzazione all’interno della pagina è possibile utilizzare il visualizzatore in versione “embedded” di Google Drive. Un’altra motivazione per utilizzare il lettore di Google risiede nella limitazione di alcuni browser su smartphone che non caricano correttamente il lettore integrato di pdf.

Caricamento File su Google Drive e generazione link

Carichiamo il file su Google Drive e richiediamo un link di condivisione che consente ad ognuno in possesso del link di visualizzare il file senza modificarlo.

Per evitare la possibilità di scaricare il file pdf è fondamentale andare nelle impostazioni di condivisione e deselezionare l’ultima spunta :

Creazione shortcode

Lo shortcode deve essere definito 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 questo caso ho impostato width e height in maniera fissa, nulla vieta di impiegare dei parametri anche per questi valori, ad esempio con width="{{ .Get 2}}".

Richiamare lo shortcode nella pagina

Utilizzando il lettore di Google Drive non è necessario caricare il file pdf all’interno del sito, in quanto l’unico collegamento per caricare il lettore sarà l’id all’interno del link di condivisione.

Id del file

L’Id del file deve essere recuperato a partire dal link di condivisione di Google Drive. Ad esempio, dato il link: https://drive.google.com/file/d/12-yRg6VlVeUrNjioD8rGEybMHh_AMPTl/view?usp=sharing, l’id del file sarà 12-yRg6VlVeUrNjioD8rGEybMHh_AMPTl

All’interno della pagina in formato markdown .md richiamiamo il lettore in questo modo:

1

{{< googlePdfReader "id-del-file" "Titolo del documento" >}}

Demo

Ecco il risultato: Titolo del documento

Conclusioni

In questo articolo abbiamo visto 2 metodi veloci e gratuiti per mostrare un file pdf all’interno di una pagina statica di un sito HUGO. Nel metodo nativo non ci sarà bisogno di utilizzare un file caricato su Google Drive, d’altra parte però consentirà facilmente ad ogni visitatore di scaricare il file pdf e potrebbe comportare dei problemi di visualizzazione nei cellulari.

Extra - Visualizzare codice shortcode come codice sorgente

Scrivendo questo articolo sono incappato in un problema di visualizzazione del codice degli shortcode all’interno dell’articolo stesso. Inserendo la stringa {{< shortcode >}} nel testo o in un riquadro di codice sorgente di una pagina Hugo non avrà l’esito sperato, in quanto il compilatore del sito sostituirà il codice con il relativo template dichiarato. Per mostrare il codice così come è ed inibire la sostituzione bisognerà inserire dei caratteri per commentare la shortcode in questo modo:

1

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