I have a very similar requirement specified here.
I need to have the user's browser start a download manually when $('a#someID').click();
But I cannot use the window.href method, since it replaces the current page contents with the file you're trying to download.
Instead I want to open the download in new window/tab. How is this possible?
32 Answers
Use an invisible <iframe>:
<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
document.getElementById('my_iframe').src = url;
};
</script>
To force the browser to download a file it would otherwise be capable of rendering (such as HTML or text files), you need the server to set the file's MIME Type to a nonsensical value, such as application/x-please-download-me or alternatively application/octet-stream, which is used for arbitrary binary data.
If you only want to open it in a new tab, the only way to do this is for the user to a click on a link with its target attribute set to _blank.
In jQuery:
$('a#someID').attr({target: '_blank',
href : ');
Whenever that link is clicked, it will download the file in a new tab/window.
2019 modern browsers update
This is the approach I'd now recommend with a few caveats:
- A relatively modern browser is required
- If the file is expected to be very large you should likely do something similar to the original approach (iframe and cookie) because some of the below operations could likely consume system memory at least as large as the file being downloaded and/or other interesting CPU side effects.
fetch(')
.then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
// the filename you want
a.download = 'todo-1.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
alert('your file has downloaded!'); // or you know, something with better UX...
})
.catch(() => alert('oh no!'));
2012 original jQuery/iframe/cookie based approach
I have created the jQuery File Download plugin (Demo) (GitHub) which could also help with your situation. It works pretty similarly with an iframe but has some cool features that I have found quite handy:
Very easy to setup with nice visuals (jQuery UI Dialog, but not required), everything is tested too
User never leaves the same page they initiated a file download from. This feature is becoming crucial for modern web applications
successCallback and failCallback functions allow for you to be explicit about what the user sees in either situation
In conjunction with jQuery UI a developer can easily show a modal telling the user that a file download is occurring, disband the modal after the download starts or even inform the user in a friendly manner that an error has occurred. See the Demo for an example of this. Hope this helps someone!
Here is a simple use case demo using the plugin source with promises. The demo page includes many other, 'better UX' examples as well.
$.fileDownload('some/file.pdf')
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
function downloadURI(uri, name)
{
var link = document.createElement("a");
// If you don't know the name or want to use
// the webserver default set name = ''
link.setAttribute('download', name);
link.href = uri;
document.body.appendChild(link);
link.click();
link.remove();
}
Check if your target browser(s) will run the above snippet smoothly:
I'm surprised not a lot of people know about the download attribute for a elements. Please help spread the word about it! You can have a hidden html link, and fake a click on it. If the html link has the download attribute it downloads the file, not views it, no matter what. Here's the code. It will download a cat picture if it can find it.
document.getElementById('download').click();
<a href="" download id="download" hidden></a>
Note: This is not supported on all browsers:
I recommend using the download attribute for download instead of jQuery:
<a href="your_link" download> file_name </a>
This will download your file, without opening it.
If you are already using jQuery, you could take adventage of it to produce a smaller snippet
A jQuery version of Andrew's answer:
var $idown; // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
if ($idown) {
$idown.attr('src',url);
} else {
$idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
}
},
//... How to use it:
downloadURL(');
This could be helpful if you are not require to navigate another page. This is base javascript function, so can be used in any platform where backend is in Javascript
window.location.assign('any url or file path')
Works on Chrome, Firefox and IE8 and above.
var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();
Simple example using an iframe
function downloadURL(url) {
var hiddenIFrameID = 'hiddenDownloader',
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
};
Then just call the function wherever you want:
downloadURL('path/to/my/file');
I ended up using the below snippet and it works in most browsers, not tested in IE though.
let data = JSON.stringify([{email: "", name: "test"}, {email: "", name: "anothertest"}]);
let type = "application/json", name = "testfile.json";
downloader(data, type, name)
function downloader(data, type, name) {
let blob = new Blob([data], {type});
let url = window.URL.createObjectURL(blob);
downloadURI(url, name);
window.URL.revokeObjectURL(url);
}
function downloadURI(uri, name) {
let link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
Update
function downloadURI(uri, name) {
let link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
function downloader(data, type, name) {
let blob = new Blob([data], {type});
let url = window.URL.createObjectURL(blob);
downloadURI(url, name);
window.URL.revokeObjectURL(url);
}
Only seven years later here comes a one line jQuery solution using a form instead of an iframe or link:
$('<form></form>')
.attr('action', filePath)
.appendTo('body').submit().remove();
I've tested this in
- Chrome 55
- Firefox 50
- Edge IE8-10
- iOS 10 (Safari/Chrome)
- Android Chrome
If anyone knows of any downsides with this solution I'd be very happy to hear about them.
Full demo:
<html>
<head><script src=""></script></head>
<body>
<script>
var filePath = window.prompt("Enter a file URL","");
$('<form></form>').attr('action', filePath).appendTo('body').submit().remove();
</script>
</body>
</html>
I don't know if the question is just too old, but setting window.location to a download url will work, as long as the download mime type is correct (for example a zip archive).
var download = function(downloadURL) {
location = downloadURL;
});
download('); //correct usage
download('); //DON'T
You can also use the package fs-browsers.
It has nice and easy download method for client-side.
It goes like this:
import { downloadFile } from 'fs-browsers';
downloadFile(url-to-the-file);
To improve Imagine Breaker 's answer, this is supported on FF & IE :
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.dispatchEvent(evt);
}
In other words, just use a dispatchEvent function instead of click();
Maybe just have your javascript open a page that just downloads a file, like when you drag a download link to a new tab:
Window.open("
Org/downloads/ardiuno/WgiWho=?:8080")
With the opened window open a download page that auto closes.
Most Complete and Working (Tested) Code for Downloading Data For FireFox, Chrome and IE Code is Following. Assume that Data is in texarea field, that has id='textarea_area' and filename is name of file where data will be downloaded.
function download(filename) {
if (typeof filename==='undefined') filename = ""; // default
value = document.getElementById('textarea_area').value;
filetype="text/*";
extension=filename.substring(filename.lastIndexOf("."));
for (var i = 0; i < extToMIME.length; i++) {
if (extToMIME[i][0].localeCompare(extension)==0) {
filetype=extToMIME[i][1];
break;
}
}
var pom = document.createElement('a');
pom.setAttribute('href', 'data: '+filetype+';charset=utf-8,' + '\ufeff' + encodeURIComponent(value)); // Added BOM too
pom.setAttribute('download', filename);
if (document.createEvent) {
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { // IE
blobObject = new Blob(['\ufeff'+value]);
window.navigator.msSaveBlob(blobObject, filename);
} else { // FF, Chrome
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
}
} else if( document.createEventObject ) { // Have No Idea
var evObj = document.createEventObject();
pom.fireEvent( 'onclick' , evObj );
} else { // For Any Case
pom.click();
}
}
and then just call
<a href="javascript:download();">Download</a>
For Download Initiating.
Array for setting correct MIME type for download dialog CAN BE following:
// ----------------------- Extensions to MIME --------- //
// List of mime types
// combination of values from Windows 7 Registry and
// from C:\Windows\System32\inetsrv\config\applicationHost.config
// some added, including .7z and .dat
var extToMIME = [
[".323", "text/h323"],
[".3g2", "video/3gpp2"],
[".3gp", "video/3gpp"],
[".3gp2", "video/3gpp2"],
[".3gpp", "video/3gpp"],
[".7z", "application/x-7z-compressed"],
[".aa", "audio/audible"],
[".AAC", "audio/aac"],
[".aaf", "application/octet-stream"],
[".aax", "audio/vnd.audible.aax"],
[".ac3", "audio/ac3"],
[".aca", "application/octet-stream"],
[".accda", "application/msaccess.addin"],
[".accdb", "application/msaccess"],
[".accdc", "application/msaccess.cab"],
[".accde", "application/msaccess"],
[".accdr", "application/msaccess.runtime"],
[".accdt", "application/msaccess"],
[".accdw", "application/msaccess.webapplication"],
[".accft", "application/msaccess.ftemplate"],
[".acx", "application/internet-property-stream"],
[".AddIn", "text/xml"],
[".ade", "application/msaccess"],
[".adobebridge", "application/x-bridge-url"],
[".adp", "application/msaccess"],
[".ADT", "audio/vnd.dlna.adts"],
[".ADTS", "audio/aac"],
[".afm", "application/octet-stream"],
[".ai", "application/postscript"],
[".aif", "audio/x-aiff"],
[".aifc", "audio/aiff"],
[".aiff", "audio/aiff"],
[".air", "application/vnd.adobe.air-application-installer-package+zip"],
[".amc", "application/x-mpeg"],
[".application", "application/x-ms-application"],
[".art", "image/x-jg"],
[".asa", "application/xml"],
[".asax", "application/xml"],
[".ascx", "application/xml"],
[".asd", "application/octet-stream"],
[".asf", "video/x-ms-asf"],
[".ashx", "application/xml"],
[".asi", "application/octet-stream"],
[".asm", "text/plain"],
[".asmx", "application/xml"],
[".aspx", "application/xml"],
[".asr", "video/x-ms-asf"],
[".asx", "video/x-ms-asf"],
[".atom", "application/atom+xml"],
[".au", "audio/basic"],
[".avi", "video/x-msvideo"],
[".axs", "application/olescript"],
[".bas", "text/plain"],
[".bcpio", "application/x-bcpio"],
[".bin", "application/octet-stream"],
[".bmp", "image/bmp"],
[".c", "text/plain"],
[".cab", "application/octet-stream"],
[".caf", "audio/x-caf"],
[".calx", "application/vnd.ms-office.calx"],
[".cat", "application/vnd.ms-pki.seccat"],
[".cc", "text/plain"],
[".cd", "text/plain"],
[".cdda", "audio/aiff"],
[".cdf", "application/x-cdf"],
[".cer", "application/x-x509-ca-cert"],
[".chm", "application/octet-stream"],
[".class", "application/x-java-applet"],
[".clp", "application/x-msclip"],
[".cmx", "image/x-cmx"],
[".cnf", "text/plain"],
[".cod", "image/cis-cod"],
[".config", "application/xml"],
[".contact", "text/x-ms-contact"],
[".coverage", "application/xml"],
[".cpio", "application/x-cpio"],
[".cpp", "text/plain"],
[".crd", "application/x-mscardfile"],
[".crl", "application/pkix-crl"],
[".crt", "application/x-x509-ca-cert"],
[".cs", "text/plain"],
[".csdproj", "text/plain"],
[".csh", "application/x-csh"],
[".csproj", "text/plain"],
[".css", "text/css"],
[".csv", "text/csv"],
[".cur", "application/octet-stream"],
[".cxx", "text/plain"],
[".dat", "application/octet-stream"],
[".datasource", "application/xml"],
[".dbproj", "text/plain"],
[".dcr", "application/x-director"],
[".def", "text/plain"],
[".deploy", "application/octet-stream"],
[".der", "application/x-x509-ca-cert"],
[".dgml", "application/xml"],
[".dib", "image/bmp"],
[".dif", "video/x-dv"],
[".dir", "application/x-director"],
[".disco", "text/xml"],
[".dll", "application/x-msdownload"],
[".dll.config", "text/xml"],
[".dlm", "text/dlm"],
[".doc", "application/msword"],
[".docm", "application/vnd.ms-word.document.macroEnabled.12"],
[".docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
[".dot", "application/msword"],
[".dotm", "application/vnd.ms-word.template.macroEnabled.12"],
[".dotx", "application/vnd.openxmlformats-officedocument.wordprocessingml.template"],
[".dsp", "application/octet-stream"],
[".dsw", "text/plain"],
[".dtd", "text/xml"],
[".dtsConfig", "text/xml"],
[".dv", "video/x-dv"],
[".dvi", "application/x-dvi"],
[".dwf", "drawing/x-dwf"],
[".dwp", "application/octet-stream"],
[".dxr", "application/x-director"],
[".eml", "message/rfc822"],
[".emz", "application/octet-stream"],
[".eot", "application/octet-stream"],
[".eps", "application/postscript"],
[".etl", "application/etl"],
[".etx", "text/x-setext"],
[".evy", "application/envoy"],
[".exe", "application/octet-stream"],
[".exe.config", "text/xml"],
[".fdf", "application/vnd.fdf"],
[".fif", "application/fractals"],
[".filters", "Application/xml"],
[".fla", "application/octet-stream"],
[".flr", "x-world/x-vrml"],
[".flv", "video/x-flv"],
[".fsscript", "application/fsharp-script"],
[".fsx", "application/fsharp-script"],
[".generictest", "application/xml"],
[".gif", "image/gif"],
[".group", "text/x-ms-group"],
[".gsm", "audio/x-gsm"],
[".gtar", "application/x-gtar"],
[".gz", "application/x-gzip"],
[".h", "text/plain"],
[".hdf", "application/x-hdf"],
[".hdml", "text/x-hdml"],
[".hhc", "application/x-oleobject"],
[".hhk", "application/octet-stream"],
[".hhp", "application/octet-stream"],
[".hlp", "application/winhlp"],
[".hpp", "text/plain"],
[".hqx", "application/mac-binhex40"],
[".hta", "application/hta"],
[".htc", "text/x-component"],
[".htm", "text/html"],
[".html", "text/html"],
[".htt", "text/webviewhtml"],
[".hxa", "application/xml"],
[".hxc", "application/xml"],
[".hxd", "application/octet-stream"],
[".hxe", "application/xml"],
[".hxf", "application/xml"],
[".hxh", "application/octet-stream"],
[".hxi", "application/octet-stream"],
[".hxk", "application/xml"],
[".hxq", "application/octet-stream"],
[".hxr", "application/octet-stream"],
[".hxs", "application/octet-stream"],
[".hxt", "text/html"],
[".hxv", "application/xml"],
[".hxw", "application/octet-stream"],
[".hxx", "text/plain"],
[".i", "text/plain"],
[".ico", "image/x-icon"],
[".ics", "application/octet-stream"],
[".idl", "text/plain"],
[".ief", "image/ief"],
[".iii", "application/x-iphone"],
[".inc", "text/plain"],
[".inf", "application/octet-stream"],
[".inl", "text/plain"],
[".ins", "application/x-internet-signup"],
[".ipa", "application/x-itunes-ipa"],
[".ipg", "application/x-itunes-ipg"],
[".ipproj", "text/plain"],
[".ipsw", "application/x-itunes-ipsw"],
[".iqy", "text/x-ms-iqy"],
[".isp", "application/x-internet-signup"],
[".ite", "application/x-itunes-ite"],
[".itlp", "application/x-itunes-itlp"],
[".itms", "application/x-itunes-itms"],
[".itpc", "application/x-itunes-itpc"],
[".IVF", "video/x-ivf"],
[".jar", "application/java-archive"],
[".java", "application/octet-stream"],
[".jck", "application/liquidmotion"],
[".jcz", "application/liquidmotion"],
[".jfif", "image/pjpeg"],
[".jnlp", "application/x-java-jnlp-file"],
[".jpb", "application/octet-stream"],
[".jpe", "image/jpeg"],
[".jpeg", "image/jpeg"],
[".jpg", "image/jpeg"],
[".js", "application/x-javascript"],
[".json", "application/json"],
[".jsx", "text/jscript"],
[".jsxbin", "text/plain"],
[".latex", "application/x-latex"],
[".library-ms", "application/windows-library+xml"],
[".lit", "application/x-ms-reader"],
[".loadtest", "application/xml"],
[".lpk", "application/octet-stream"],
[".lsf", "video/x-la-asf"],
[".lst", "text/plain"],
[".lsx", "video/x-la-asf"],
[".lzh", "application/octet-stream"],
[".m13", "application/x-msmediaview"],
[".m14", "application/x-msmediaview"],
[".m1v", "video/mpeg"],
[".m2t", "video/vnd.dlna.mpeg-tts"],
[".m2ts", "video/vnd.dlna.mpeg-tts"],
[".m2v", "video/mpeg"],
[".m3u", "audio/x-mpegurl"],
[".m3u8", "audio/x-mpegurl"],
[".m4a", "audio/m4a"],
[".m4b", "audio/m4b"],
[".m4p", "audio/m4p"],
[".m4r", "audio/x-m4r"],
[".m4v", "video/x-m4v"],
[".mac", "image/x-macpaint"],
[".mak", "text/plain"],
[".man", "application/x-troff-man"],
[".manifest", "application/x-ms-manifest"],
[".map", "text/plain"],
[".master", "application/xml"],
[".mda", "application/msaccess"],
[".mdb", "application/x-msaccess"],
[".mde", "application/msaccess"],
[".mdp", "application/octet-stream"],
[".me", "application/x-troff-me"],
[".mfp", "application/x-shockwave-flash"],
[".mht", "message/rfc822"],
[".mhtml", "message/rfc822"],
[".mid", "audio/mid"],
[".midi", "audio/mid"],
[".mix", "application/octet-stream"],
[".mk", "text/plain"],
[".mmf", "application/x-smaf"],
[".mno", "text/xml"],
[".mny", "application/x-msmoney"],
[".mod", "video/mpeg"],
[".mov", "video/quicktime"],
[".movie", "video/x-sgi-movie"],
[".mp2", "video/mpeg"],
[".mp2v", "video/mpeg"],
[".mp3", "audio/mpeg"],
[".mp4", "video/mp4"],
[".mp4v", "video/mp4"],
[".mpa", "video/mpeg"],
[".mpe", "video/mpeg"],
[".mpeg", "video/mpeg"],
[".mpf", "application/vnd.ms-mediapackage"],
[".mpg", "video/mpeg"],
[".mpp", "application/vnd.ms-project"],
[".mpv2", "video/mpeg"],
[".mqv", "video/quicktime"],
[".ms", "application/x-troff-ms"],
[".msi", "application/octet-stream"],
[".mso", "application/octet-stream"],
[".mts", "video/vnd.dlna.mpeg-tts"],
[".mtx", "application/xml"],
[".mvb", "application/x-msmediaview"],
[".mvc", "application/x-miva-compiled"],
[".mxp", "application/x-mmxp"],
[".nc", "application/x-netcdf"],
[".nsc", "video/x-ms-asf"],
[".nws", "message/rfc822"],
[".ocx", "application/octet-stream"],
[".oda", "application/oda"],
[".odc", "text/x-ms-odc"],
[".odh", "text/plain"],
[".odl", "text/plain"],
[".odp", "application/vnd.oasis.opendocument.presentation"],
[".ods", "application/oleobject"],
[".odt", "application/vnd.oasis.opendocument.text"],
[".one", "application/onenote"],
[".onea", "application/onenote"],
[".onepkg", "application/onenote"],
[".onetmp", "application/onenote"],
[".onetoc", "application/onenote"],
[".onetoc2", "application/onenote"],
[".orderedtest", "application/xml"],
[".osdx", "application/opensearchdescription+xml"],
[".p10", "application/pkcs10"],
[".p12", "application/x-pkcs12"],
[".p7b", "application/x-pkcs7-certificates"],
[".p7c", "application/pkcs7-mime"],
[".p7m", "application/pkcs7-mime"],
[".p7r", "application/x-pkcs7-certreqresp"],
[".p7s", "application/pkcs7-signature"],
[".pbm", "image/x-portable-bitmap"],
[".pcast", "application/x-podcast"],
[".pct", "image/pict"],
[".pcx", "application/octet-stream"],
[".pcz", "application/octet-stream"],
[".pdf", "application/pdf"],
[".pfb", "application/octet-stream"],
[".pfm", "application/octet-stream"],
[".pfx", "application/x-pkcs12"],
[".pgm", "image/x-portable-graymap"],
[".pic", "image/pict"],
[".pict", "image/pict"],
[".pkgdef", "text/plain"],
[".pkgundef", "text/plain"],
[".pko", "application/vnd.ms-pki.pko"],
[".pls", "audio/scpls"],
[".pma", "application/x-perfmon"],
[".pmc", "application/x-perfmon"],
[".pml", "application/x-perfmon"],
[".pmr", "application/x-perfmon"],
[".pmw", "application/x-perfmon"],
[".png", "image/png"],
[".pnm", "image/x-portable-anymap"],
[".pnt", "image/x-macpaint"],
[".pntg", "image/x-macpaint"],
[".pnz", "image/png"],
[".pot", "application/vnd.ms-powerpoint"],
[".potm", "application/vnd.ms-powerpoint.template.macroEnabled.12"],
[".potx", "application/vnd.openxmlformats-officedocument.presentationml.template"],
[".ppa", "application/vnd.ms-powerpoint"],
[".ppam", "application/vnd.ms-powerpoint.addin.macroEnabled.12"],
[".ppm", "image/x-portable-pixmap"],
[".pps", "application/vnd.ms-powerpoint"],
[".ppsm", "application/vnd.ms-powerpoint.slideshow.macroEnabled.12"],
[".ppsx", "application/vnd.openxmlformats-officedocument.presentationml.slideshow"],
[".ppt", "application/vnd.ms-powerpoint"],
[".pptm", "application/vnd.ms-powerpoint.presentation.macroEnabled.12"],
[".pptx", "application/vnd.openxmlformats-officedocument.presentationml.presentation"],
[".prf", "application/pics-rules"],
[".prm", "application/octet-stream"],
[".prx", "application/octet-stream"],
[".ps", "application/postscript"],
[".psc1", "application/PowerShell"],
[".psd", "application/octet-stream"],
[".psess", "application/xml"],
[".psm", "application/octet-stream"],
[".psp", "application/octet-stream"],
[".pub", "application/x-mspublisher"],
[".pwz", "application/vnd.ms-powerpoint"],
[".qht", "text/x-html-insertion"],
[".qhtm", "text/x-html-insertion"],
[".qt", "video/quicktime"],
[".qti", "image/x-quicktime"],
[".qtif", "image/x-quicktime"],
[".qtl", "application/x-quicktimeplayer"],
[".qxd", "application/octet-stream"],
[".ra", "audio/x-pn-realaudio"],
[".ram", "audio/x-pn-realaudio"],
[".rar", "application/octet-stream"],
[".ras", "image/x-cmu-raster"],
[".rat", "application/rat-file"],
[".rc", "text/plain"],
[".rc2", "text/plain"],
[".rct", "text/plain"],
[".rdlc", "application/xml"],
[".resx", "application/xml"],
[".rf", "image/vnd.rn-realflash"],
[".rgb", "image/x-rgb"],
[".rgs", "text/plain"],
[".rm", "application/vnd.rn-realmedia"],
[".rmi", "audio/mid"],
[".rmp", "application/vnd.rn-rn_music_package"],
[".roff", "application/x-troff"],
[".rpm", "audio/x-pn-realaudio-plugin"],
[".rqy", "text/x-ms-rqy"],
[".rtf", "application/rtf"],
[".rtx", "text/richtext"],
[".ruleset", "application/xml"],
[".s", "text/plain"],
[".safariextz", "application/x-safari-safariextz"],
[".scd", "application/x-msschedule"],
[".sct", "text/scriptlet"],
[".sd2", "audio/x-sd2"],
[".sdp", "application/sdp"],
[".sea", "application/octet-stream"],
[".searchConnector-ms", "application/windows-search-connector+xml"],
[".setpay", "application/set-payment-initiation"],
[".setreg", "application/set-registration-initiation"],
[".settings", "application/xml"],
[".sgimb", "application/x-sgimb"],
[".sgml", "text/sgml"],
[".sh", "application/x-sh"],
[".shar", "application/x-shar"],
[".shtml", "text/html"],
[".sit", "application/x-stuffit"],
[".sitemap", "application/xml"],
[".skin", "application/xml"],
[".sldm", "application/vnd.ms-powerpoint.slide.macroEnabled.12"],
[".sldx", "application/vnd.openxmlformats-officedocument.presentationml.slide"],
[".slk", "application/vnd.ms-excel"],
[".sln", "text/plain"],
[".slupkg-ms", "application/x-ms-license"],
[".smd", "audio/x-smd"],
[".smi", "application/octet-stream"],
[".smx", "audio/x-smd"],
[".smz", "audio/x-smd"],
[".snd", "audio/basic"],
[".snippet", "application/xml"],
[".snp", "application/octet-stream"],
[".sol", "text/plain"],
[".sor", "text/plain"],
[".spc", "application/x-pkcs7-certificates"],
[".spl", "application/futuresplash"],
[".src", "application/x-wais-source"],
[".srf", "text/plain"],
[".SSISDeploymentManifest", "text/xml"],
[".ssm", "application/streamingmedia"],
[".sst", "application/vnd.ms-pki.certstore"],
[".stl", "application/vnd.ms-pki.stl"],
[".sv4cpio", "application/x-sv4cpio"],
[".sv4crc", "application/x-sv4crc"],
[".svc", "application/xml"],
[".swf", "application/x-shockwave-flash"],
[".t", "application/x-troff"],
[".tar", "application/x-tar"],
[".tcl", "application/x-tcl"],
[".testrunconfig", "application/xml"],
[".testsettings", "application/xml"],
[".tex", "application/x-tex"],
[".texi", "application/x-texinfo"],
[".texinfo", "application/x-texinfo"],
[".tgz", "application/x-compressed"],
[".thmx", "application/vnd.ms-officetheme"],
[".thn", "application/octet-stream"],
[".tif", "image/tiff"],
[".tiff", "image/tiff"],
[".tlh", "text/plain"],
[".tli", "text/plain"],
[".toc", "application/octet-stream"],
[".tr", "application/x-troff"],
[".trm", "application/x-msterminal"],
[".trx", "application/xml"],
[".ts", "video/vnd.dlna.mpeg-tts"],
[".tsv", "text/tab-separated-values"],
[".ttf", "application/octet-stream"],
[".tts", "video/vnd.dlna.mpeg-tts"],
[".txt", "text/plain"],
[".u32", "application/octet-stream"],
[".uls", "text/iuls"],
[".user", "text/plain"],
[".ustar", "application/x-ustar"],
[".vb", "text/plain"],
[".vbdproj", "text/plain"],
[".vbk", "video/mpeg"],
[".vbproj", "text/plain"],
[".vbs", "text/vbscript"],
[".vcf", "text/x-vcard"],
[".vcproj", "Application/xml"],
[".vcs", "text/plain"],
[".vcxproj", "Application/xml"],
[".vddproj", "text/plain"],
[".vdp", "text/plain"],
[".vdproj", "text/plain"],
[".vdx", "application/vnd.ms-visio.viewer"],
[".vml", "text/xml"],
[".vscontent", "application/xml"],
[".vsct", "text/xml"],
[".vsd", "application/vnd.visio"],
[".vsi", "application/ms-vsi"],
[".vsix", "application/vsix"],
[".vsixlangpack", "text/xml"],
[".vsixmanifest", "text/xml"],
[".vsmdi", "application/xml"],
[".vspscc", "text/plain"],
[".vss", "application/vnd.visio"],
[".vsscc", "text/plain"],
[".vssettings", "text/xml"],
[".vssscc", "text/plain"],
[".vst", "application/vnd.visio"],
[".vstemplate", "text/xml"],
[".vsto", "application/x-ms-vsto"],
[".vsw", "application/vnd.visio"],
[".vsx", "application/vnd.visio"],
[".vtx", "application/vnd.visio"],
[".wav", "audio/wav"],
[".wave", "audio/wav"],
[".wax", "audio/x-ms-wax"],
[".wbk", "application/msword"],
[".wbmp", "image/vnd.wap.wbmp"],
[".wcm", "application/vnd.ms-works"],
[".wdb", "application/vnd.ms-works"],
[".wdp", "image/vnd.ms-photo"],
[".webarchive", "application/x-safari-webarchive"],
[".webtest", "application/xml"],
[".wiq", "application/xml"],
[".wiz", "application/msword"],
[".wks", "application/vnd.ms-works"],
[".WLMP", "application/wlmoviemaker"],
[".wlpginstall", "application/x-wlpg-detect"],
[".wlpginstall3", "application/x-wlpg3-detect"],
[".wm", "video/x-ms-wm"],
[".wma", "audio/x-ms-wma"],
[".wmd", "application/x-ms-wmd"],
[".wmf", "application/x-msmetafile"],
[".wml", "text/vnd.wap.wml"],
[".wmlc", "application/vnd.wap.wmlc"],
[".wmls", "text/vnd.wap.wmlscript"],
[".wmlsc", "application/vnd.wap.wmlscriptc"],
[".wmp", "video/x-ms-wmp"],
[".wmv", "video/x-ms-wmv"],
[".wmx", "video/x-ms-wmx"],
[".wmz", "application/x-ms-wmz"],
[".wpl", "application/vnd.ms-wpl"],
[".wps", "application/vnd.ms-works"],
[".wri", "application/x-mswrite"],
[".wrl", "x-world/x-vrml"],
[".wrz", "x-world/x-vrml"],
[".wsc", "text/scriptlet"],
[".wsdl", "text/xml"],
[".wvx", "video/x-ms-wvx"],
[".x", "application/directx"],
[".xaf", "x-world/x-vrml"],
[".xaml", "application/xaml+xml"],
[".xap", "application/x-silverlight-app"],
[".xbap", "application/x-ms-xbap"],
[".xbm", "image/x-xbitmap"],
[".xdr", "text/plain"],
[".xht", "application/xhtml+xml"],
[".xhtml", "application/xhtml+xml"],
[".xla", "application/vnd.ms-excel"],
[".xlam", "application/vnd.ms-excel.addin.macroEnabled.12"],
[".xlc", "application/vnd.ms-excel"],
[".xld", "application/vnd.ms-excel"],
[".xlk", "application/vnd.ms-excel"],
[".xll", "application/vnd.ms-excel"],
[".xlm", "application/vnd.ms-excel"],
[".xls", "application/vnd.ms-excel"],
[".xlsb", "application/vnd.ms-excel.sheet.binary.macroEnabled.12"],
[".xlsm", "application/vnd.ms-excel.sheet.macroEnabled.12"],
[".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
[".xlt", "application/vnd.ms-excel"],
[".xltm", "application/vnd.ms-excel.template.macroEnabled.12"],
[".xltx", "application/vnd.openxmlformats-officedocument.spreadsheetml.template"],
[".xlw", "application/vnd.ms-excel"],
[".xml", "text/xml"],
[".xmta", "application/xml"],
[".xof", "x-world/x-vrml"],
[".XOML", "text/plain"],
[".xpm", "image/x-xpixmap"],
[".xps", "application/vnd.ms-xpsdocument"],
[".xrm-ms", "text/xml"],
[".xsc", "application/xml"],
[".xsd", "text/xml"],
[".xsf", "text/xml"],
[".xsl", "text/xml"],
[".xslt", "text/xml"],
[".xsn", "application/octet-stream"],
[".xss", "application/xml"],
[".xtp", "application/octet-stream"],
[".xwd", "image/x-xwindowdump"],
[".z", "application/x-compress"],
[".zip", "application/x-zip-compressed"]
];
// ----------------------- End of Extensions to MIME --------- //
You can simply make use of the Download attribute in HTML. Using good ol' Javascript, you can use this feature to download the file directly. The download attribute of the anchor tag should point to the link where the file to be downloaded is hosted.
Firstly, point the URL to your resource path:
var url = 'your url goes here';
Create an anchor tag, with the needed attributes as below:
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
Append the anchor tag to the body element of the webpage.
document.body.appendChild(elem);
Now trigger the click event programmatically. Clicking on the anchor tag will trigger the download.
$('#downloadAnchor').click();
Putting it all together:
var url = 'your url goes here';
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
document.body.appendChild(elem);
$('#downloadAnchor').click();
Additional Information: Nothing fancy in the above code, just client-side JavaScript which works from Chrome Devtools' Console, but powerful and also opens up a lot of possibilities like webpage crawling.
For e.g. the following chunk of code executed in the Devtools console will open all the links in the page in a new tab: Just goto this webpage , open devtools and run this script in the browser console and watch the power of JavaScript unfurl. (Note: The below code is purely for educational purposes only.)
Make sure you enable pop-ups for that site, else your anchor clicks will get disabled by the default pop-up blocker.
var links = document.getElementsByClassName("_3ATBKe");
for(var i=0;i<links.length;i++){
var title = document.getElementsByClassName("_3ATBKe")[i].firstElementChild.firstElementChild.innerText.replaceAll('|','-').replaceAll(':','x');
console.log('Opening..'+title);
links[i].firstElementChild.click();
}
Note: This is not just limited to anchor clicks, you can download almost anything you find on your webpage. If something (image, audio, video) loads on your webpage, you can probably write a script to download it, even if the provision is not provided to you from the UI.
for me this is working ok tested in chrome v72
function down_file(url,name){
var a = $("<a>")
.attr("href", url)
.attr("download", name)
.appendTo("body");
a[0].click();
a.remove();
}
down_file(')
There are so many little things that can happen when trying to download a file. The inconsistency between browsers alone is a nightmare. I ended up using this great little library.
Nice thing about it is that its flexible for not only urls but for client side data you want to download.
- text string
- text dataURL
- text blob
- text arrays
- html string
- html blob
- ajax callback
- binary files
Only pass link of the file. It will download the file with it's original name.
function downloadFileWithLink(href) {
var link = document.createElement("a");
let name = (href?.split("/") || [])
name = name[name?.length-1]
link.setAttribute('download', name);
link.href = href;
document.body.appendChild(link);
link.click();
link.remove();
}
These functions are used in stacktrace.js:
/**
* Try XHR methods in order and store XHR factory.
*
* @return <Function> XHR function or equivalent
*/
var createXMLHTTPObject = function() {
var xmlhttp, XMLHttpFactories = [
function() {
return new XMLHttpRequest();
}, function() {
return new ActiveXObject('Msxml2.XMLHTTP');
}, function() {
return new ActiveXObject('Msxml3.XMLHTTP');
}, function() {
return new ActiveXObject('Microsoft.XMLHTTP');
}
];
for (var i = 0; i < XMLHttpFactories.length; i++) {
try {
xmlhttp = XMLHttpFactories[i]();
// Use memoization to cache the factory
createXMLHTTPObject = XMLHttpFactories[i];
return xmlhttp;
} catch (e) {
}
}
}
/**
* @return the text from a given URL
*/
function ajax(url) {
var req = createXMLHTTPObject();
if (req) {
try {
req.open('GET', url, false);
req.send(null);
return req.responseText;
} catch (e) {
}
}
return '';
}
I suggest you use the mousedown event, which is called BEFORE the click event. That way, the browser handles the click event naturally, which avoids any code weirdness:
(function ($) {
// with this solution, the browser handles the download link naturally (tested in chrome and firefox)
$(document).ready(function () {
var url = '/private/downloads/myfile123.pdf';
$("a#someID").on('mousedown', function () {
$(this).attr("href", url);
});
});
})(jQuery);
Excelent solution from Corbacho, I just adapted to get rid o the var
function downloadURL(url) {
if( $('#idown').length ){
$('#idown').attr('src',url);
}else{
$('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
}
}
Firefox and Chrome tested:
var link = document.createElement('a');
link.download = 'fileName.ext'
link.href = '
// Because firefox not executing the .click() well
// We need to create mouse event initialization.
var clickEvent = document.createEvent("MouseEvent");
clickEvent.initEvent("click", true, true);
link.dispatchEvent(clickEvent);
This is actually the "chrome" way solution for firefox (I am not tested it on other browsers, so please leave comments about the compilability)
I have had good results with using a FORM tag since it works everywhere and you don't have to create temporarily files on server. The method works like this.
On the client side (page HTML) you create an invisible form like this
<form method="POST" action="/download.php" target="_blank" id="downloadForm">
<input type="hidden" name="data" id="csv">
</form>
Then you add this Javascript code to your button:
$('#button').click(function() {
$('#csv').val('---your data---');
$('#downloadForm').submit();
}
The on the server-side you have the following PHP code in download.php:
<?php
header('Content-Type: text/csv');
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=out.csv');
header('Content-Transfer-Encoding: binary');
header('Connection: Keep-Alive');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . strlen($data));
echo $_REQUEST['data'];
exit();
You can even create zip files of your data like this:
<?php
$file = tempnam("tmp", "zip");
$zip = new ZipArchive();
$zip->open($file, ZipArchive::OVERWRITE);
$zip->addFromString('test.csv', $_REQUEST['data']);
$zip->close();
header('Content-Type: application/zip');
header('Content-Length: ' . filesize($file));
header('Content-Disposition: attachment; filename="file.zip"');
readfile($file);
unlink($file);
The best part is it does not leave any residual files on your server since everything is created and destroyed on the fly!
let args = {"data":htmlData,"filename":exampleName}
To create a HTMl file and download
window.downloadHTML = function(args) {
var data, filename, link;
var csv = args.data;
if (csv == null) return;
filename = args.filename || 'report.html';
data = 'data:text/html;charset=utf-8,' + encodeURIComponent(csv);
console.log(data);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);}
To create and download a CSV
window.downloadCSV = function(args) {
var data, filename, link;
var csv = args.data;
if (csv == null) return;
filename = args.filename || 'report.csv';
if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
data = encodeURI(csv);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
You have to do it from two sides, from the server and from the client (web app).
From the server, set the header called Content-Disposition
// nodejs express
res.set('Content-Disposition', `attachment; filename="${self.creationName}"`)
With the above header, the server will tell the browser that the response is a file and it should be downloaded and saved with given name, otherwise the browser may save the file as something like "attachments (1).zip"
Next we look at the client, we create an anchor link and automatically click it.
function downloadThroughAnchorLink(downloadUrl: string, fileName: string) {
const a = document.createElement('a')
a.href = downloadUrl;
// We provided a header called Content-Disposition so we dont need to set "a.download" here
// a.download = fileName || 'download'
a.click()
}
That should do it.
The answer submitted by hitesh on Dec 30 '13 does in fact work. It just requires a little adjusting:
The PHP file can call itself. In other words, just create a file named saveAs.php, and put this code into it...
<a href="saveAs.php?file_source=YourDataFile.pdf">Download pdf here</a>
<?php
if (isset($_GET['file_source'])) {
$fullPath = $_GET['file_source'];
if($fullPath) {
$fsize = filesize($fullPath);
$path_parts = pathinfo($fullPath);
$ext = strtolower($path_parts["extension"]);
switch ($ext) {
case "pdf":
header("Content-Disposition: attachment; filename=\"".$path_parts["basename"]."\""); // use 'attachment' to force a download
header("Content-type: application/pdf"); // add here more headers for diff. extensions
break;
default;
header("Content-type: application/octet-stream");
header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
}
if($fsize) {//checking if file size exist
header("Content-length: $fsize");
}
readfile($fullPath);
exit;
}
}
?>
Note: Not supported in all browsers.
I was looking for a way to download a file using jquery without having to set the file url in the href attribute from the beginning.
jQuery('<a/>', {
id: 'downloadFile',
href: '
style: 'display:hidden;',
download: ''
}).appendTo('body');
$("#downloadFile")[0].click();
<script src=""></script>
I use @rakaloof's solution without JQuery (because you don't need it here). Thank you for the idea! Here is a vanillaJS form-based solution:
const uri = '
let form = document.createElement("form");
form.setAttribute('action', uri);
document.body.appendChild(form);
form.submit();
document.body.removeChild(document.body.lastElementChild);