Download attribute in <a> downloads the file, but also my page

I am going to base myself on any scenario, the closest thing to what you propose would be, for example, a list of files that are offered for download and that, according to you, you want to hide the URL where those files are.

We will put that list in the form of a link, we will listen to the clicks on each one of them and we will launch from the client a request to the server so that the download is done directly, which is what you require.

From the client we are going to launch a request XMLHttpRequestto the server, sending it the location of the file. We will indicate that a response of the type is expected bloband from the response we will be able to download the file.

VERY IMPORTANT:

The information about the name and location of each file is found in the attribute data-*of each li, as can be seen in the HTML source code.

Here we assume that the following files exist on your server:

 uploads
     pdf
       android.pdf
       js.pdf
       php.pdf

    doc
       swift.doc

    txt
       cobol.txt

The file, if it exists, will be downloaded to the client's computer, without showing the resource link at any time.

It is convenient to control the response of the request XMLHttpRequest, for example, in case the file does not exist, to make an adequate handling of the code.

I have not done so for reasons of brevity.

The code has been tested in a real environment and it works.

I hope it helps you.

JavaScript:

document.addEventListener("DOMContentLoaded", function(event) {
  /*Referencias a los elementos*/
  var liFiles = document.querySelectorAll('.list-files li');
  var divInfo = document.getElementById("info");

  /*Agregamos listener a todos los <li>*/
  liFiles.forEach(function(elem) {
    elem.addEventListener('click', downloadFile, false);
  });

  /*
     *Esta es la función que se ejecutará cada vez que
     *se haga click en alguno de los <li>
  */
  function downloadFile() {
    /*
       *Obtenemos el directorio, el nombre
       *y construimos una ruta completa
    */
    var fileDir = this.dataset.dir;
    var fileName = this.dataset.name;
    var filePath = `${fileDir}/${fileName}`;

    /*Vamos a hacer una petición al servidor buscando el archivo*/
    var req = new XMLHttpRequest();
        req.open("GET", filePath, true);
        req.responseType = "blob";
        req.onload = function(event) {
            var blob = req.response;
            /*
              *Aquí hacemos que el archivo se descargue
              *sin ninguna acción
            */
            var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;
                link.click();
        };

        req.send();

    /*Imprimimos un mensaje*/
    divInfo.textContent = "Archivo descargado... Conviene validar la respuesta y manejar posibles errores.";
  }

});

HTML:

<h2>Archivos disponibles</h2>
<hr />
<ul class="list-files">
  <li data-dir="uploads/pdf" data-name="android.pdf"><a id="ff" href="#">Android</a></li>
  <li data-dir="uploads/doc" data-name="swift.doc"><a href="#">Swift</a></li>
  <li data-dir="uploads/pdf" data-name="js.pdf"><a href="#">Javascript</a></li>
  <li data-dir="uploads/pdf" data-name="php.pdf"><a href="#">PHP</a></li>
  <li data-dir="uploads/txt" data-name="cobol.txt"><a href="#">Cobol</a></li>
</ul>
<div id="info"></div>

It is because of the download attribute that you have put. take it off