Displaying PDFs within your Tumult Hype Documents

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

Follow these instructions: How to Embed PDF in HTML

If you had 'filename.pdf' in your resource library, you would use this code within an HTML widget:

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Example by Object Tag</title>
  </head>
  <body>
    <h1>PDF Example by Object Tag</h1>
    <object data="${resourcesFolderName}/filename.pdf" type="application/pdf" width="100%" height="500px">
      <p>Unable to display PDF file. <a href="${resourcesFolderName}/filename.pdf">Download</a> instead.</p>
    </object>
  </body>
</html>

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:

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 an <object>:

PDF-Example.hype.zip (930.3 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.

5 Likes

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

Works! Thanks!

1 Like

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

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

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

Hi,

can i hide the toolbar on top of the pdf viewer?

Thanx Andreas

I could not find a specific API to do so, though one may exist. Looking at the page itself it appears the toolbar is crafted just via HTML, using the class toolbar. Therefore you could add CSS on the PDF page like:

.toolbar {
   display: none;
}

It may be a better question posed to PDF.js.