Download File through JavaScript

Question

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 this file in the system. 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');

1. There is a typo in your code: `link.download = name;`. 2. Other than this approach you may want to open a PDF file using browser: `window.open('https://example.com/myfile.pdf', '_blank');` This way users can probably view the pdf and download it if they want to. — c0m1t, Aug 07 '22 at 13:33
3. Also you can use `Blob` [See this answer](https://stackoverflow.com/a/25911218/5289334) — c0m1t, Aug 07 '22 at 13:40

score 0 · Answer 1 · answered Aug 07 '22 at 13:26

0

Seems like - as with normal links - you need to set the target attribute.

Note: snippet won't work here because popups are blocked. This means that it does work.

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

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

answered Aug 07 '22 at 13:26

IT goldman

14,885
2
14
28

Thanks for answering but this is opening the file in a new tab instead of douenload. not helpful. I am sorry but.. – Aug 07 '22 at 13:33
1

That depends on the browser default behavior when downloading pdf. Try another file type, not an image or pdf. – IT goldman Aug 07 '22 at 13:35

Paul Kuhle · Answer 2 · 2022-08-08T20:37:49.773

0

If you want to open the file in a new tab, you can simply add a target="_blank" attribute (link.setAttribute("target", "_blank");).

If you want to forcefully download the file instead of opening/previewing it in the browser, you can convert the file URI to a blob. For example:

async function downloadURI(uri, name) {
  const link = document.createElement("a");
  link.download = name;
  const data = await fetch(uri).then((res) => res.blob())
  link.href = window.URL.createObjectURL(
    new Blob([data], { type: 'application/pdf' })
  );
  link.click();
  link.remove();
  window.URL.revokeObjectURL(link.href);
}

JS Fiddle: https://jsfiddle.net/sh4dfm6a/

edited Aug 08 '22 at 20:37

answered Aug 07 '22 at 13:36

Paul Kuhle

326
2
6

line number 4 error saying in js fiddle – Aug 07 '22 at 13:53
Oops, the `=` was in the wrong place. Now it works. I've also added a JS Fiddle for you. – Paul Kuhle Aug 07 '22 at 20:51
Sorry, the specific example PDF in the original JS Fiddle didn't work because of the server's CORS settings. I've updated my example with a PDF from wikipedia, which doesn't require the `no-cors` setting. – Paul Kuhle Aug 08 '22 at 20:36
It works exactly the way it is supposed to work. With the Firefox file settings set to "Open in Firefox", the file is downloaded and immediately opened in Firefox from the local path in your Downloads folder. When you open the PDF in a new tab, it opens the PDF from the remote URI. Note that this does answer your original question, which was about forcing the download, not overriding the user preference whether the downloaded file is shown automatically in the browser or not. – Paul Kuhle Aug 09 '22 at 07:20

score 0 · Answer 3 · answered Aug 08 '22 at 01:50

here is a typical js download function sample. In your code, firstly you should replace 'name' with name, using the variable given.

function loadPdfFile(uri, pFileName) {
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = pFileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

}

The reason why it only opens the PDF might be you are running your code locally, you could try to put it to your server and test.

score -1 · Answer 4 · answered Aug 07 '22 at 13:30

-1

if you need to open it in new tab just add target attribute like below EX

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

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

answered Aug 07 '22 at 13:30

Ramy Ragab

129
9

not working, it is just open in new tab and I already coded this is past but not working – Aug 07 '22 at 13:34

Download File through JavaScript

4 Answers4