Prompting for download - javascript

Whats the best method to prompt a user to download something? In the past I've used window.open('file.pdf'); but I can see popup blockers having a problem with this. Of course I'll include a manual link aswel.
I basically want something like the Microsoft Download page. So whats the script that prompts this?

Redirect using javascript.
function redirect() {
window.location = 'http://www.url.to/your.file';
}

Content-Disposition: attachment; filename="file.pdf"
To do this you may want to pass your file.pdf through a server script that forces that header on it.
What you see on that download page is just a location change. And if that page returns the download header the browser won't change page.

Set a content disposition header with an attachment value

Related

Need to download a file from webpage to local drive

I has a requirement like when user clicks on a download button instead of showing the content in browser, i want to save it to the localdisk(perticular location) of the user desktop. Is it possible to do??
If yes,Please help me with possibilities..
Thanks in advance
No a website can't decide where it can save something. Everything goes to download folder by default. You have to be using some sort of plugin with permissions or make like browser addon/extension.
If you want to prompt download then you could set send headers in php:
Content-Disposition: attachment; filename="fname.ext"
and
Content-Type: application/force-download
Or you could set attribute download to link in html
<a href="file.abc" download>Click Me</a>
Utility of HTTP header "Content-Type: application/force-download" for mobile?
http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
http://www.php.net/manual/en/function.header.php
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
You shall just point the file name like this to download.
But you cannot decide the path by your code.
Download the File
Note : Do not try this in jsfiddle or in codepen because they will rename the link with their custom so that the file will be displayed within their output. So, try it in your web server or in your localhost.

Standard way of doing a "thanks_for_downloading.html" + "Save file..." after a link?

Let's look at FireFox.
They have a nice big Call To Action button: "Firefox 3.6 - Free Download"
You click that, it links you to a new page: "Thanks for downloading Firefox! Your download should begin in a few seconds."
Then a few seconds later up pops: "FIREFOX.exe - Do you want to save or discard this file?"
This is pretty standard download behavior for applications accross the web. How is it done, in the simplest way?
There are two parts to this:
Forcing the browser to download the file, rather than trying to display it (with .exe that's no problem, but you might want to do it with an image, movie, or HTML file too).
Prompting the browser to download the file.
Let's pretend we just want the browser to download a file, without wanting to change the page. We can create a link like this, and it'll work as expected:
Download File
Your browser probably doesn't know how to handle a zip file, so it downloads "download.zip" straight to a file named after the filename in the URL. If you wanted to download a JPG instead, though, this wouldn't work:
Save this Sunset!
Your browser knows how to display a JPEG, so it redirects the page and shows the JPEG. Now we need to tell the browser not to show it, but to download it instead. To do that, we have to send it some specific HTTP headers in the response from the server.
Apache can handle this by specifying headers in .htaccess, but I'll stay away from a particular technology, opting to just talk about the mechanism.
So we send the following header to the browser along with the image:
Content-disposition: attachment; filename=the_sunset_of_a_lifetime.jpg;
The first header, content-disposition, tells your browser that we want the file to be an attachment, or in other words, it should be saved, not displayed. The filename attribute tells it the name to use to save the file (rather than "sunset.jpg", the file will be named "the_sunset_of_a_lifetime.jpg").
Now the link to download the "sunset.jpg" file works like we want. But how do we get the browser to download it without the user clicking on the link so we can show a "Thank You" page and prompt the download to start? A simple <meta> tag can do the trick, telling the browser to redirect the page after a set period of time:
<meta http-equiv="refresh" content="2;url=/images/sunset.jpg">
When your "thank you" page loads with that meta tag in the head, it'll wait for 2 seconds and then try to load the image. It'll get the headers we set in the last step, and download it instead of displaying it, and the user will stay put on the page like we want.
Example content of thanks_for_downloading.html:
<strong>Thanks for downloading XY</strong>
<script type="text/javascript">
window.onload = function(){
window.location.href = "path/to/XY.exe";
};
</script>
The Download-link is just a link to the thanks_for_downloading.html page
The call to action button is a regular link to the "Thank you" page. Then on the "Thank you" page, use javascript to redirect the user to the file you are downloading by setting the "window.location" property to the file's URL.

Initiating a download with javascript

I need to dynamically initiate a download with javascript. I have seen how people do this by doing something like
window.open("some url", "Download");
but I need to do it without changing the url of the current page (and not using frames if I can help it, or created and destroying a frame dynamically). Anybody know how to do this?
You don't need window.open(). It's plain ugly and prone to popupblockers (where you have no control over in clients). Just window.location is sufficient if the response header of the requested download URL contains Content-Disposition: attachment. This won't change the current URL in the browser address bar nor the current page, but just pop a Save As dialogue.
E.g.
window.location = 'http://download.winzip.com/winzip145.exe';

Javascript or jQuery: Download and redirect

Currently some guys programmed this in a HTML page:
<script>
location='http://example.com/downloadable.zip';
</script>
They want to redirect the user to another page once the file has started downloading. I can only modify this page but not the destination page.
What would be a good and clean javascript solution for making a user download the file and once he had accepted (or rejected) it, redirect him to another location? The solution may be jQuery code
NOTE: The downloading and redirection must be done automatically when accessing the page
Perhaps setup a link that calls a function. The function would in turn then send the download link, and then redirect.
This is just a guess based upon your description, as I don't know the full general setup, but it's what I would do going on what I know.
This seems like a hack. Have you tried an HTML meta tag with refresh? Also, you can add a link if the download fails.

Using Javascript to send an HTTP attachment to the user (open browser's Save as... dialog)

I'm new to web development, so I apologize if this question is noobish. I want to serve a file that is on the server's hard drive to the user when requested (ie, send an HTTP attachment to trigger the browser's "Save as..." dialog) in Javascript. The user clicks on a button on the page, the server generates a customized data file based on some of his/her account settings (and other parameters), and then the "Save as..." dialog should pop up. How should I go about implementing this in Javascript?
edit: for your reference, the server has Glassfish and Apache
Jane,
The save-as dialog only appears on page load. You need to redirect your user either directly to the file you want them to save, or to a server-side page that serves up the file.
Once you know the address of the file, do something like
window.location = http://yourserver.com/generatedfiles/file_2342342.txt
Alternatively, do something like this:
window.location = http://yourserver.com/getgeneratedfile.aspx?fileID=2342342
...which would redirect the user to a page that feeds the generated file. You then need to specify the content-disposition and filename in the header that comes from that page, as mentioned in Gandalf's reply.
Edit: Ah, you're using Apache. Probably won't have ASPX files on there then.
Set the Http Response header:
Content-Disposition: attachment; filename=myfile.txt
Or something like this
Save this page
#aric's answer is correct; however, window.location will cause load/unload events to get fired which may not be desirable for your application. In this case, you can likely direct a hidden iframe to the url to cause the save dialog to appear without losing your page's state.
Also, 'SaveAs' is probably an IE specific value for document.execCommand as it doesn't exist in Firefox.

Categories