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.
