View dialog screen to download with javascript

Question

I have an MVC project where there’s a button that does the download of files but when clicking the button opens a new guide in the browser and the files are automatically downloaded, as in the examples shown in this link:

https://www.w3schools.com/jsref/met_win_open.asp

My code works perfectly:
var url = "http://10.155.XXX.XXX/site_do_fornecedor/arquivo_para_download.aspx?id=" window.open(url + 10 + '10/12/2019', "_Blank", "width=200, height=100");

But I would like the screen to be displayed diálogo where the user decides which directory to save the files in.

Example

When I click the button download the javascript code described above is executed and a Chrome window is opened:

How do I make this browser window not appear ?

I implemented the very interesting suggestion of Daniel Mendes:

function downloadMP3(_url, _strArrId, _data) {

    fetch(_url + _strArrId + "&Date=09/12/2019")
        .then(data => {
            data.blob()
                .then(blob => {
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement("a");
                    link.href = url;
                    link.download = url;
                    link.click();
                })
                .catch(error => {
                    console.log(error);
                });
        })
        .catch(error => {
            console.log(error);
        });
}

However the following error message was displayed:

From what I see the destination URL has to enable the CORS that’s right ?

Answer 1

Hard,

If you refer to the browser dialog that allows you to choose where to save the file, this is an option of the browser itself, where there is a configuration that the browser performs the donwload automatically, without displaying the dialog and saving in the folder also set in the settings of the same:

---

There is the possibility of you creating your confirmation dialog, but with this, the user may end up having to confirm twice and you can not interfere in where the file will be saved.

For this confirmation, the javascript itself already has methods for this:

confirm("Efetuar o download?");

https://developer.mozilla.org/en-US/docs/Web/API/window/confirm

---

Now if the problem is your own dialog created by window.open, you can refactor the code by removing its dialog and creating for example a tag <a> and click on it, see an example below:

function download() {
  fetch("https://developer.mozilla.org/static/img/embed/promos/devedition-logo.63846dba2e2f.png")
  .then(data => {
    data.blob()
    .then(blob => {
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");

      link.href = url;
      link.download = "63846dba2e2f.png";

      link.click();
    })
    .catch(error => {
      console.log(error);
    });
  })
  .catch(error => {
    console.log(error);
  });
}

<button onclick="download()">Fazer download</button>