If you just add a PDF to a Go To URL action it will display the PDF rather than download it.
However following a request for a Download button please see the attached project.
The rest of this post is a deep dive into how it all works but you could just download the project.
The attached project shows how to do this using either a Polygon or Point Hotspot.
To force a download you would use something that looks like this in a text element:
Code: Select all
<a href="myfile.pdf" download="myfile.pdf">Click to Download</a>
You can use an id to target the link using JavaScript, now don't worry this is just a simple case of copy and paste.
In the project, the PDF is added to Assets as found under the Advanced tab of the HTML5 output.
The Hotspot, Polygon or Point needs its ID changed, I am using "pdf".
Also, I then enter the file name and file extension of the PDF in the Hotspots Description text field.
This is the only data you need to set in the hotspot but of course, you can add a title if needed.
So that's the Hotspot set up, now over to the Skin Editor.
As mentioned above we need a text box with a link to download, but we want to use a hotspot.
In the skin, you will see a Text Box with the ID _download_pdf_code.
This has the code:
Code: Select all
<a href="assets/$(hd)" download="$(hd)" id="pdf_download"></a>
And this has an ID, id="pdf_download".
Also, there is no text to be displayed.
The text box can be hidden.
So what triggers the download?
Well, you will also see in the skin a Container with the ID: hs_pdf_trigger.
You will see this has an action:
Code: Select all
javascript:document.getElementById("pdf_download").click();
On Mouse Click, it will use a Go To URL action to trigger the JavaScript call to cause a "Click" to the ID "pdf_download".
The container has a Hotspot Proxy ID set, "pdf" so whenever the Polygon or Point Hotspot is clicked this triggers the Mouse Click in the container.
So what is going is the Hotspot triggers the Mouse Click in the Container, in turn, this triggers a JavaScrtip call to trigger the link in the Text Element, and in so doing forces a download of the PDF.
This works with most browser apart from Firefox, this still asks you what it should do:
If you wanted to use a button to download the PDF then you would have the File path directly added in the _download_pdf_code Text Box.
So for example:
Code: Select all
<a href="assets/single_page.pdf" download="single_page.pdf" id="pdf_download"></a>
However, you could use a text variable, as an example, you could add a Text Variable, var_pdf.
Then in the above code replace the file name with the variable placeholder:
Code: Select all
<a href="assets/$(*var_pdf)" download="$(*var_pdf)" id="pdf_download"></a>
Regards,