77

How do I initialize an automatic download of a file in Internet Explorer?

For example, in the download page, I want the download link to appear and a message: "If you download doesn't start automatically .... etc". The download should begin shortly after the page loads.

In Firefox this is easy, you just need to include a meta tag in the header, <meta http-equiv="Refresh" content="n;url"> where n is the number of seconds and url is the download URL. This does not work in Internet Explorer. How do I make this work in Internet Explorer browsers?

1
  • any idea how to do in chrome?
    – iDebD_gh
    Apr 24, 2014 at 8:54

19 Answers 19

112

SourceForge uses an <iframe> element with the src="" attribute pointing to the file to download.

<iframe width="1" height="1" frameborder="0" src="[File location]"></iframe>

(Side effect: no redirect, no JavaScript, original URL remains unchanged.)

10
  • 1
    Could somebody explain how that should work? I don't see delay for 'n' seconds... Thank you in advance.
    – Budda
    Aug 10, 2010 at 20:08
  • 1
    This is also how audible.com does it apparently.
    – 3on
    Jun 30, 2013 at 22:41
  • 9
    Ooh that is clever. You could make it display:none, too. Also, @Budda, some simple Javascript (Oh, no, Javascript?!?!) can add that HTML in after n seconds: HTML: <iframe id="download" width="1" height="1" style="display:none"></iframe> Javascript: function startDownload () { document.getElementById("download").src="[File Location]"; } setTimeout (startDownload, n * 1000);
    – Cosine
    Sep 2, 2013 at 0:41
  • 3
    I like the idea of using this, but it will have issues with certain file types. For example if you wish to provide a download link for a PDF or image (or any content that a browser can display), the browser would just try and display it silently in the hidden iframe. Dec 4, 2014 at 14:41
  • 7
    @NathanHornby, use Content-Disposition: attachment; filename=manual.pdf header on server side and everything will be ok.
    – zealotous
    Jan 14, 2015 at 13:39
53

I hate when sites complicate download so much and use hacks instead of a good old link.

Dead simple version:

<a href="file.zip">Start automatic download!</a>

It works! In every browser!


If you want to download a file that is usually displayed inline (such as an image) then HTML5 has a download attribute that forces download of the file. It also allows you to override filename (although there is a better way to do it):

<a href="report-generator.php" download="result.xls">Download</a>

Version with a "thanks" page:

If you want to display "thanks" after download, then use:

<a href="file.zip" 
   onclick="if (event.button==0) 
     setTimeout(function(){document.body.innerHTML='thanks!'},500)">
 Start automatic download!
</a>

Function in that setTimeout might be more advanced and e.g. download full page via AJAX (but don't navigate away from the page — don't touch window.location or activate other links).

The point is that link to download is real, can be copied, dragged, intercepted by download accelerators, gets :visited color, doesn't re-download if page is left open after browser restart, etc.

That's what I use for ImageOptim

22
  • 9
    I like the simplicity of your answer. May 23, 2009 at 10:05
  • 3
    @DavidRobbins and i like the simplicity of your comment. :D Aug 31, 2012 at 11:03
  • 1
    One word of caution. At least in my Chrome 21, the attempt to follow @href gets cancelled if the script from setTimeout tries to move to another page. So this really only works when you can show the thank you page inline. Oct 27, 2012 at 17:32
  • 2
    I totally agree with using a good old link, but there is a problem with this: clients. Sometimes they want what they want no matter what you try and tell them. They've seen it on other sites, and that's what they want on their site.
    – raydowe
    Jan 29, 2013 at 15:44
  • 1
    @porneL I don't understand. I thought you were suggesting just using a link to the file INSTEAD of the automatic download after X seconds.
    – raydowe
    Jan 29, 2013 at 15:49
24

I recently solved it by placing the following script on the page.

setTimeout(function () { window.location = 'my download url'; }, 5000)

I agree that a meta-refresh would be nicer but if it doesn't work what do you do...

4
  • 26
    should be setTimeout(function () { window.location = 'my download url'; }, 5000) (no strings to setTimeout please)
    – sharat87
    Nov 18, 2010 at 10:00
  • 2
    @Cerberus: because of the general idea.
    – Ralph
    Dec 27, 2012 at 13:45
  • 1
    Probably, the most simple solution. Jul 11, 2014 at 18:47
  • or put into code behind like this: Page.ClientScript.RegisterStartupScript(Me.GetType, "filedownload", "setTimeout(function () { window.location = 'http://" & Page.Request.Url.Authority & filename & "'; }, 0)", True)
    – user890332
    Dec 3, 2015 at 21:39
22

I had a similar issue and none of the above solutions worked for me. Here's my try (requires jquery):

$(function() {
  $('a[data-auto-download]').each(function(){
    var $this = $(this);
    setTimeout(function() {
      window.location = $this.attr('href');
    }, 2000);
  });
});

Usage: Just add an attribute called data-auto-download to the link pointing to the download in question:

<p>The download should start shortly. If it doesn't, click
<a data-auto-download href="/your/file/url">here</a>.</p>

It should work in all cases.

1
  • 1
    I like that. Nice and clean and you can add it to any link you want. I love finding cool new uses for the data-* attribute!
    – daGUY
    Oct 29, 2012 at 16:48
8

A simple bit of jQuery solved this problem for me.

$(function() {
   $(window).bind('load', function() {
      $("div.downloadProject").delay(1500).append('<iframe width="0" height="0" frameborder="0" src="[YOUR FILE SRC]"></iframe>'); 
   });
});

In my HTML, I simply have

<div class="downloadProject"></div>

All this does is wait a second and a half, then append the div with the iframe referring to the file that you want to download. When the iframe is updated onto the page, your browser downloads the file. Simple as that. :D

6

I used this, seems working and is just simple JS, no framework:

Your file should start downloading in a few seconds. 
If downloading doesn't start automatically
<a id="downloadLink" href="[link to your file]">click here to get your file</a>.

<script> 
    var downloadTimeout = setTimeout(function () {
        window.location = document.getElementById('downloadLink').href;
    }, 2000);
</script>

NOTE: this starts the timeout in the moment the page is loaded.

1
  • Regarding your flag, that would be something to raise on our meta site. I believe this has come up before, however (there are quite a few similar complaints, but I can't find one directly matching this)
    – Tim Post
    Oct 4, 2012 at 3:45
6

Works on Chrome, firefox and IE8 and above:

var link = document.createElement('a');
document.body.appendChild(link);
link.href = url;
link.click();
2
  • works in firefox only if its from the same origin download link
    – ash123
    Apr 14, 2017 at 15:11
  • @ash123 try this : function downloadURI(uri, name) { var link = document.createElement("a"); link.download = name; link.href = uri; link.click(); } Apr 16, 2017 at 17:26
5

This is what I'm using in some sites (requires jQuery).:

$(document).ready(function() {
    var downloadUrl = "your_file_url";
    setTimeout("window.location.assign('" + downloadUrl + "');", 1000);
});

The file is downloaded automatically after 1 second.

0
3

I checked and found, it will work on button click via writing onclick event to Anchor tag or Input button

onclick='javascript:setTimeout(window.location=[File location], 1000);'
3

Back to the roots, i use this:

<meta http-equiv="refresh" content="0; url=YOURFILEURL"/>

Maybe not WC3 conform but works perfect on all browsers, no HTML5/JQUERY/Javascript.

Greetings Tom :)

3

One more :

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();
3

I hope this will works all the browsers. You can also set the auto download timing.

<html>
<head>
<title>Start Auto Download file</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('a[data-auto-download]').each(function(){
var $this = $(this);
setTimeout(function() {
window.location = $this.attr('href');
}, 2000);
});
});
</script>
</head>
<body>
<div class="wrapper">
<p>The download should start shortly. If it doesn't, click
<a data-auto-download href="auto-download.zip">here</a>.</p>
</div>
</body>
</html>
1
  • 1
    This answer saves my day. I have a follow up question: if I change "auto-download.zip" to a url like "stackoverflow.com/questions/156686/…", it does not work. My purpose is to download the stackoverflow page as html. Jul 18, 2020 at 7:58
2

Be sure to serve up the file without a no-cache header! IE has issues with this, if user tries to "open" the download without saving first.

1

This seemed to work for me - across all browsers.

 <script type="text/javascript">
    window.onload = function(){
     document.location = 'somefile.zip';
    }
    </script>
2
  • 2
    The lack of such approach is that browser waits for all banners loading... Sometime that takes some time and user is unable to get file due to stupid banners...
    – Budda
    Aug 9, 2010 at 17:08
  • Except for some browsers + the content is one that could be viewed directly in the browser (like video files), does not actually force the download in all circumstances.
    – mix3d
    Sep 8, 2019 at 5:50
1

For those trying to trigger the download using a dynamic link it's tricky to get it working consistently across browsers.

I had trouble in IE10+ downloading a PDF and used @dandavis' download function (https://github.com/rndme/download).

IE10+ needs msSaveBlob.

1

I think this will work for you. But visitors are easy if they got something in seconds without spending more time and hence they will also again visit your site.

<a href="file.zip" 
   onclick="if (event.button==0) 
     setTimeout(function(){document.body.innerHTML='thanks!'},500)">
 Start automatic download!
</a>
0

Nice jquery solution:

jQuery('a.auto-start').get(0).click();

You can even set different file name for download inside <a> tag:

Your download should start shortly. If not - you can use
<a href="/attachments-31-3d4c8970.zip" download="attachments-31.zip" class="download auto-start">direct link</a>.
1
  • Not all browsers let you click an anchor tag with JS. Safari, for example, especially if the url is cross-domain
    – mix3d
    Sep 8, 2019 at 5:52
0
<meta http-equiv="Refresh" content="n;url">

That's It. Easy, Right?

<meta http-equiv="Refresh" content="n;url">

0

This is an old question but in case anyone wants to use automatic download of files with Flask, Python. You can do this:

from flask import Flask, make_response, send_from_directory

file_path = "Path containing the file" #e.g Uploads/images

@app.route("/download/<file_name>")
def download_file(file_name):
    resp = make_response(send_from_directory(file_path, file_name)
    resp.headers['Content-Disposition'] = f"attachment; filename={file_name}"
    return resp

Inside a template or html page, index for example

<div>
  <a class="btn btn-outline-warning" href={{url_for( 'download_file', name='image.png' )}} ">Download Image</a>
</div>

Clicking on the link will download the file without opening another page. For more info on:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.