Now the HTML5 spec defines a very useful download attribute on hyperlinks that basically allows to force download behavior on client-side, regardless of what comes in Content-Type and Content-Disposition from the server:
In some cases, resources are intended for later use rather than
immediate viewing. To indicate that a resource is intended to be
downloaded for use later, rather than immediately used, the download
attribute can be specified on the a or area element that creates the
hyperlink to that resource.
<...>
The download attribute, if present, indicates that the author intends
the hyperlink to be used for downloading a resource. The attribute may
have a value; the value, if any, specifies the default filename that
the author recommends for use in labeling the resource in a local file
system.
So all you need to do is add the attribute to your hyperlink and the browsers that support it would understand that the content needs to be downloaded:
<a href="http://example.com/media.mp3" download>Download Your File</a>
You can even suggest a different name for the downloaded file by setting the attribute value:
<a href="http://example.com/media.mp3" download="check this out.mp3">Download Your File</a>
More info and demos:
Browser support: caniuse.com
Downloading generated content
You can even make a link that will download a content that you generated, as long as there is a way to get a base64-encoded data URI for it:
<a href="data:application/octet-stream;base64,YOUR_ENCODED_DATA" download="song.mp3">Download</a>
For more details on saving generated content, refer to this article by Eli Grey:
Saving generated files on the client-side
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
