Download Attribute with a File Name Not Working

Chrome Download Attribute not working

After some research I have finally found your problem.

<a> download attribute:

If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.

If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.

Source

HTTP-Header Content-Disposition

download attribute corrupt file name when using query string

The problem is that the attribute value for download is optional, and when set will set what downloaded file will be named as. If you don't set it, then the filename will be what you for it in the href value.

That is, the following is valid, without setting download's value:

<a href="somefile.txt" download>

Since a ? is not a valid filename char, it is being gracefully replaced by the underscore.

The solution then is to not include the ? for the download's value, but keep it in your href value.

SOLUTION:

<a href="{{ $item['url'] }}" class="btn btn-sm btn-default"
                             download="{{ $item['filename'] }}" target="_blank">
   <span class="fa fa-download"></span>
</a>

Where $item['filename'] would be the name of the file to download without the ? and timestamp.

A hyperlink download attribute not working

it turns out, my problem is conflicted by same origin urls. Apprently, I am rquesting from different hosts/site, for further explanation see : https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

HTML5 anchor download filename not working

You're not missing anything, that's how it works. The doc on MDN says:

This attribute is only honored for links to resources with the same-origin.

However, this is not specified in W3C specs, currently it depends on the browser venders.

For Firefox, you could take a look at this issue to get a clue of how it was turned off intentionally.

Download attribute is not working on Chrome

Try this:

<a target="_blank" download="mylogo" href="san-francisco.jpg" title="ImageName">
    <img alt="ImageName" src="san-francisco.jpg" width="104" height="142">
</a>

If it wasn't for this:

download attribute:

If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.

If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.

Source

HTTP-Header Content-Disposition

---

Related Topics