Displaying PDFs within your Tumult Hype Documents

knowledgebase

#1

Embedding a Single PDF page

Drag and drop your PDF file into Hype and it will be rendered as an image. Just like other image types, it will follow the resource optimization rules (retina images will be generated by default).

Embedding Multi-Page PDFs

Mozilla has taken the lead on creating a cross-browser method of displaying PDFs as a regular DOM element. Their PDF.js project renders multi-page PDFs on desktop or mobile browsers.

To use this awesome project in your Tumult Hype document, you’ll first need to configure it outside of Hype. First, download the latest version from here. If you unzip the project, you’ll see a file called ‘viewer.html’ which is the actual demo. Make sure you get the ‘prebuilt’ version of the project.

Due to security restrictions in browsers, this project will not load in local browsers. It needs to be uploaded to a web server first.

This example project loads compressed.tracemonkey-pldi-09.pdf. To use your own PDF, place it in the same directory where this PDF is.

Open viewer.js, and edit it. You’ll see that on line 28, the PDF file is referenced. Update that file to be the name of your PDF file. That line by default reads:

var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';

Once you update this line to read your filename, you can upload the entire pdfjs folder to your website. Next, load the view.js URL and make sure it works.

In Hype, select Insert > HTML Widget, and switch the Element Inspector. You can fill in the full URL of your PDF.js viewer.html as your Source URL and adjust the size of your HTML widget to the size you wish.

Opening in the same window

Linking within the Inner HTML of an element with a standard link will open the PDF page within your browser window:

<a href="http://forums.tumult.com/pdf.pdf">Link to PDF</a>

Or, you can open it within a new window:

<a href="http://forums.tumult.com/pdf.pdf" target="_blank" >Link to PDF</a>

Forcing a download

To force a download and not load the PDF within your browser, you’ll need to add an additional attribute to your href tag:

<a href="http://example.com/file.pdf" download >Download PDF</a>

You can also directly link to PDFs in your resource folder:

<a href="${resourcesFolderName}/file.pdf" download >Download PDF</a>

Before you load your PDF file from your resource library, you’ll need to uncheck ‘Automatically optimize when exporting’ in the resources library.

Please note that the ‘download’ attribute is not supported in all browsers:

http://caniuse.com/#search=download

Offline PDFs

Checking ‘Create offline application cache’ will download PDFs in the resource library on your document’s first load.

Examples

This document demonstrates linking, embedding, and shows the behavior of an HTML widget containing a PDF.js project: PDF-Example.zip (858.6 KB)

Optimizing PDFs

Use Shrinkit by Panic or Small PDF.com.

More reading

Read more about supported file formats in Hype.


Anything we’re missing? Reply below.


Supported File Formats
#2

#3

5 posts were split to a new topic: Click to download a PDF in resources library


#7

Works! Thanks!


(Ralf Kepnik) #8

Thanks Daniel, it´s a great one. For the data protection regulation 2018 (very optimally!

In the last version you can find the ( var DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf’; ) in the line 10054


#9

Are you looking at the built-in Firefox PDF.js renderer? Is everything working for you?


(Ralf Kepnik) #10

Hi Daniel, yes I take the PDF.js / * Copyright 2017 Mozilla Foundation Version 2.0.
There is the ( var DEFAULT_URL = ‘…pdf’; ) in the line 10054. Just wanted to give an info to all who are looking for.

It is going very well! Look here: http://nextgreen.digital/datenschutz.html