Hugo PDF

This shortcode allows you to add PDF file to your pages using browser native PDF renderer. Therefore, no additional Javascripts needed.

Installation Link to heading

Option 1 Link to heading

Copy the only layouts/shortcodes/pdf.html file to your layouts/shortcodes/ website directory and you are good to go.

Option 2 Link to heading

theme = "hugo-pdf"
# use with existing theme
theme = [current-theme,hugo-pdf]
git submodule add -f --name hugo-pdf https://github.com/sytranvn/hugo-pdf.git themes/hugo-pdf

Or use this as a theme.

  • Add this to your config.toml theme
  • And clone this repo to your theme directory as submodule.

Usage Link to heading

Default Link to heading

{{< pdf src="./path/to/example.pdf" >}}

Customize size Link to heading

# Adjust size
{{< pdf src="./path/to/example.pdf" width="30%" height="400px" >}}

Zoom and page Link to heading

# Adjust zoom level and page
{{< pdf src="./path/to/example.pdf#view=Fit&page=1" width="100%" height="500px" >}}

More options Link to heading

You can also add parameters to url to customize PDF viewer.

ParametersValueDescriptionBrowser
toolbar1,0Toggle toolbarChrome
viewFit, FitH, FitVFit content (both, horizontal, vertical)Chrome
zoomnumberZoom by n%Chrome, FF
pagenumberSelect page to renderChrome, FF, Safari
nameddeststringAnchor position like headerChrome

Issues Link to heading

On mobile webview, this solution does not work. User need to download open the pdf them self.