Using HTML5/JavaScript to generate and save a file
I’ve been fiddling with WebGL lately, and have gotten a Collada reader working. Problem is it’s pretty slow (Collada is a very verbose format), so I’m going to start converting files to a easier to use format (probably JSON). I already have the code to parse the file in JavaScript, so I may as well use it as my exporter too! The problem is saving. Now, I know that I can parse the file, send the result to the server, and have the browser request the file back from the server as a download. But in reality the server has nothing to do with this particular process, so why get it involved? I already have the contents of the desired file in memory. Is there any way that I could present the user with a download using pure JavaScript? (I doubt it, but might as well ask. ) And to be clear: I am not trying to access the filesystem without the users knowledge! The user will provide a file (probably via drag and drop), the script will transform the file in memory, and the user will be prompted to download the result. All of which should be «safe» activities as far as the browser is concerned. [EDIT]: I didn’t mention it upfront, so the posters who answered «Flash» are valid enough, but part of what I’m doing is an attempt to highlight what can be done with pure HTML5. so Flash is right out in my case. (Though it’s a perfectly valid answer for anyone doing a «real» web app.) That being the case it looks like I’m out of luck unless I want to involve the server. Thanks anyway!
How can I create download link in HTML?
I have a basic idea of HTML. I want to create the download link in my sample website, but I don’t have idea of how to create it. How do I make a link to download a file rather than visit it?
12 Answers 12
In modern browsers that support HTML5, the following is possible:
This will allow you to change the name of the file actually being downloaded.
i used same code for download PFD file and i tested in all browser all are support but in safari this code is not working safari instead of download pdf file open in new tab.
caniuse.com/#search=download%20attribute Works in Chrome, Edge, Firefox, Opera and latest Android 4.4+ browsers, and not in Internet Explorer and Safari.
This is not working for me, I have a .exe file that I want users to download. However, tried to do this myself, to verify, but this ain’t working. It will just bring me to the source code, which I don’t want viewed.
This answer is outdated. We now have the download attribute. (see also this link to MDN)
If by «the download link» you mean a link to a file to download, use
the target=_blank will make a new browser window appear before the download starts. That window will usually be closed when the browser discovers that the resource is a file download.
Note that file types known to the browser (e.g. JPG or GIF images) will usually be opened within the browser.
You can try sending the right headers to force a download like outlined e.g. here. (server side scripting or access to the server settings is required for that.)
why not use the download attribute, if you get a file like a jpg, it will download, instead of just opening.
@Dudeson please specify what «won’t work» and which version(s) of IE you are talking about. (It is now safe to use the approach described TIIUNDER’s much more recent answer below, though. It should get the accept mark.)
@Sergiu the answer is seven years old. I can’t delete it, and the asker hasn’t responded to my request to switch the accept mark. nothing we can do, although I’ll add a link to the more current answer
In addition (or in replacement) to the HTML5’s the browser’s download to disk behavior can also be triggered by the following http response header:
Content-Disposition: attachment; filename=ProposedFileName.txt; This was the way to do before HTML5 (and still works with browsers supporting HTML5).
Is this the full answer? You also need to send a Content Type header and read the file to force the download. May want to and that to your answer. Full answer here: stackoverflow.com/a/1465631/2757916.
this is perfect for server side implementation, just precise also the content type. it is well supported compared to the download attribute
It may be possible to force by proxying the request to a service worker who can add this header but I’m not sure.
A download link would be a link to the resource you want to download. It is constructed in the same way that any other link would be:
To link to the file, do the same as any other page link:
To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:
AddType application/octet-stream EXTENSION Thanks! this is much simpler and is server-wide! 😀 I found this link that elaborates a little bit more. Thank you. htaccess-guide.com/adding-mime-types
That will make all files of that type download only. Fine if that’s what you want, but could cause fits if you forget and want another file of that type to display in-browser instead of download.
This thread is probably ancient by now, but this works in html5 for my local file.
This should open the pdf in a new windows and allow you to download it (in firefox at least). For any other file, just make it the filename. For images and music, you’d want to store them in the same directory as your site though. So it’d be like
There’s one more subtlety that can help here.
I want to have links that both allow in-browser playing and display as well as one for purely downloading. The new download attribute is fine, but doesn’t work all the time because the browser’s compulsion to play the or display the file is still very strong.
BUT.. this is based on examining the extension on the URL’s filename!You don’t want to fiddle with the server’s extension mapping because you want to deliver the same file two different ways. So for the download, you can fool it by softlinking the file to a name that is opaque to this extension mapping, pointing to it, and then using download’s rename feature to fix the name.
I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn’t.
How to create downloadable link to text file?
Or you could just use the new HTML5 property download in the anchor tag of your html.
The code will look something like
It works on firefox and chrome latest version. Should I mention that I didn’t check it in IE? 😛
With the same conditions as mentioned above: the user’s configuration of the browser may still prompt the user to choose between viewing and saving. When the author of the html KNOWS the file is binary and causes consternation if viewed, isn’t there a way for the html author to allow only the option «Save»? It seems like the OP’s question is still unanswered. Are there some file suffixes (e.g. .exe) that behave differently?
Add the following lines to your .htaccess file.
ForceType applicaton/octet-stream Header set Content-Disposition attachment This is so cool Rob. Thanks for the trick 😉 It works nicely for me but if possible, can i have it with Save as.. dialog?
You should get a Save As. dialog using these rules. (If you’re getting an Internal Server error, you’ve probably not loaded the headers module).
No Rob. The file is now saved with just a SINGLE click into default browser download folder. But, extensively i just want the browser to ask with a dialog box to save (as like when we save a link with Right Click—> Save as). But, just asking for the knowledge. This is not really need i know.
@4lvin >_> That’s your browser configuration. The default behaviour without the headers is showing the file as plain text, without saving it. After sending the headers, the browser should treat the file as a download. Your browser is configured to save a file on download, without prompting. In Firefox, this preference can be changed at Preferences > General > Downloads .