Download File with the help of JavaScript

[wawane7256]

I have created a function to download the file, but the issue is it opens the file on the same tab, I a trying to force download that file.
I read other threads but didn’t get the answer as I was expected and helpful.

Please help me create this function that downloads the file.
I have tried this code as below

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = 'name';
  link.href = uri;
  link.click();
  link.remove();
}

downloadURI('https://example.com/myfile.pdf', 'customefilename.pdf');

[Thallius]

@wawane7256

a trying to force download this file in the system.

What do you want? I don’t understand what the system is

[wawane7256]

I mean I want to download it

[rpkamp]

The download attribute should do the trick and is supported by most browsers.

It does state that the download attribute only works when the file is on the same domain as the site itself. You can’t force-download from other domains. Not sure if that’s what you want to do, but that might be the issue here.

Also, I do see a small error, that the name is always hardcoded to name, rather than the name provided to the function.

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name; // <- name instead of 'name'
  link.href = uri;
  link.click();
  link.remove();
}

downloadURI('https://example.com/myfile.pdf', 'customefilename.pdf');

[m3g4p0p]

Yes in order to force download the file it should have a Content-Disposition: attachment response header, but that would have to be set on the server side… if the file is getting served from somewhere else, I suppose you might fetch it with your own backend first, and serve the file from there.

[Archibald]

@rpkamp

The download attribute should do the trick

I find the download attribute does not do the trick in Firefox, at least for PDF files.

From MDN for the anchor element (link):

How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.

I find Firefox opens PDFs in the browser itself (when the link has a download attribute). That wouldn’t be too bad if they open in a new tab but they don’t. I have therefore given up using the download attribute: setting links to open in a new tab instead. However as Firefox has so few users these days perhaps I should use the download attribute after all.

[softmoon]

I don’t understand why your anchor-element doesn’t just have the target=‘_blank’ attribute? That would open the file in a new tab, and the user could then choose to save it. Not too bad for a PDF. However, see the note on filetype headers below - that should work for this method, also. Just add the line:

list.target=‘_blank’

I’ve been using a variation of this code below since before the “download” attribute was available (or before I was aware of it!). I use an iframe element, styled with CSS to be unshown to the user. (position:fixed; left: -1000; top: -1000; width: 1px; height: 1px;)
For a PDF, your browser may still want to open it, though. If your iframe is hidden, they see nothing! If you want to actually download and go right to having the browser “save” the file, it should be served with a “application/unknown” filetype header. I actually use this to get the browser to save a JSON file I create with JavaScript, and then convert to a blob, then an Object-URL from the blob, then set the href on the iframe element to the Object.

saveFile=function(filePath)  {
  const iframe=document.getElementById('local_filesaver') || document.createElement('iframe');
  if (!iframe.id)  {
    iframe.id='local_filesaver';
    iframe.style.display='none';
    document.body.appendChild(iframe);  }
 iframe.setAttribute('src', filePath);  }