Force Download PDF
Posted: Thu Mar 11, 2021 12:33 pm
Hi,
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:
This will work but will add a link in the text box, not much good if you want to trigger it from a Button or Hotspot.
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:
How this differs from the above code example is it using placeholders to pick up the file name from the Hotspots Description text field, so $(hd).
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:
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:
You would then need a separate text box for each PDF.
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:
Then you can use a Set Variable Value action to change the file name in the text variable.
Regards,
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>- 1.png (5.8 KiB) Viewed 3474 times
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.
- 2.png (12.09 KiB) Viewed 3474 times
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.
- 3.png (23.82 KiB) Viewed 3474 times
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:
- 4.png (86.98 KiB) Viewed 3474 times
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.
- 5.png (22.45 KiB) Viewed 3474 times
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:
- 6.png (88.17 KiB) Viewed 3474 times
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,