Force Download PDF

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

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:

Code: Select all

<a href="myfile.pdf" download="myfile.pdf">Click to Download</a>
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.
1.png
1.png (5.8 KiB) Viewed 3155 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
2.png (12.09 KiB) Viewed 3155 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
3.png (23.82 KiB) Viewed 3155 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>
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:

4.png
4.png (86.98 KiB) Viewed 3155 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
5.png (22.45 KiB) Viewed 3155 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
6.png (88.17 KiB) Viewed 3155 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>
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:

Code: Select all

<a href="assets/$(*var_pdf)" download="$(*var_pdf)" id="pdf_download"></a>
Then you can use a Set Variable Value action to change the file name in the text variable.
Regards,
Attachments
PDFDownload.zip
(30.82 KiB) Downloaded 249 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Martin,

Thanks again.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Shytsko
Posts: 80
Joined: Sat Dec 31, 2011 10:56 am
Location: Minsk, Belarus
Contact:

Hi, Martin!
Thank you so much! Checked it, works well!
1. Can I send to Viber or WhatsApp? To a phone number.
2. Is it possible to indicate the address on the site where the .pdf or .jpg file is located and send it to the Email, Vibe or WhatsApp

Redards,
Peter.
Post Reply