Download file on button click jquery

Question

Simple question, i think.

I have an html button: <button type="button" class="btn btn-success">Download</button> .

On click i have to start the download of a file placed in the same folder as the project. I've never used anything to download a file so i have no clue how to do it and i'm not understanding from other question either. Could someone tell me how to do it explaining why i have to do it in a certain way? All of this should be preferable in jquery, but even basic js is fine. Thanks.

Answer 1

using <a> does the job without involving javascript

<a href="./file-path/file-name" class="btn btn-success" download>Download</a>

The download attribute will force download the viewable content. Otherwise, It will be rendered instead of downloading.

Answer 2

Indeed should do the work for you. To better understand the functionality think of the following function

function DownloadUsingAnchorElement(fileUrl, fileName)
{
  const anchor = document.createElement("a");
  anchor.href = fileUrl;
  anchor.download = fileName;
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
}

Check as well : https://www.w3schools.com/tags/att_a_download.asp

Answer 3

document.querySelector('button').addEventListener('click', () => {
  const link = document.createElement('a')
  link.setAttribute('download', 'filename')
  link.setAttribute('href', './path-to-file/filename.ext')
  link.click()
})

Answer 4

you can also do this way

<button type="button" class="btn btn-success" id="downloadButton">Download</button>

$(document).ready(function () {
      $("#downloadButton").click(function (e) {
          e.preventDefault();
          window.location.href = "your file path";
      });
});