How can I use a html button to download a dmg file?

So I asked this question a while ago and it got immediately closed so I'll give more detail the issue seems to be specific to the dmg file type I've never encountered the problem till now.

I simply want to be able to click a button and then have the dmg downloaded without using much javascript or any.

However using my code the dmg file opens in the browser so you get a bunch of binary gibberish and the file doesn't download if you want to see what I mean head to https://lucas-testing.000webhostapp.com/release then click download for MacOS.

The dmg's file name changes as the version number is part of the name so I use php to get the file information and create a variable storing that website address for example the current link generated by my PHP would be:

var downloadLinkAlt = "https://lucas-testing.000webhostapp.com/release/The City Of Truro Mariners - Management Console-1.0.19.dmg"

My code to then download this link is:

<button onclick="location.href=downloadLinkAlt" id="DownloadByOSAlt" class="btn btn-sm btn-primary mt-3">Download for MacOS</button>

I know for a fact the above code works as it works perfectly with the exact same link but with an exe file extension instead.

Things I have tried:

The download attribute that can be used in HTML5 to force download things like PDF's:

<button onclick="location.href=downloadLinkAlt" id="DownloadByOSAlt" class="btn btn-sm btn-primary mt-3" download>Loading...</button>

Reference: https://www.w3schools.com/tags/att_a_download.asp

Putting the button in a form and using a get request with the link:

<form method="get" action=downloadLinkAlt>
   <button type="submit">Download!</button>
</form>

Reference: https://stackoverflow.com/a/11620761/12887221

Using an invisible iframe that's source is changed when the button is pressed:

document.getElementById('my_iframe').src = downloadLinkAlt;

<iframe id="my_iframe" style="display:none;"></iframe>

Reference: https://stackoverflow.com/a/22231021/12887221

Does anyone have any suggestions as to what to try next?

Solution

It may not be that your methods of performing the download are broken but rather that the webserver isn't serving up the right mime type for the dmg file. That the file is downloading and you're getting what looks like gibberish could be a sign of that. The browser doesn't know what to expect.

To see what mime type the server is sending open up developer tools in your browser, click on network and look at the file you're downloading in the list.

Just googling around seems to indicate that the right mime type for DMG files is application\octet-stream. If it doesn't say this type when you look at it in developer tools then this is likely your problem. If it does then its probably something else. Here's an article on mime types: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types. Scroll down to the bottom for some notes on configuring mime types different web servers (Apache, IIS, etc).

Also noticing that your URL contains spaces. Those should be percent encoded to be valid.

Yet another perhaps more direct way of doing the download would just be to use a hyperlink like:

<a href="URL_to_your_flle.dmg">Download</a>

Which you could style to look like a button.