Download file on button click jquery-CodePudding

Simple question, i think.

I have an html button: <button type="button" >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.

CodePudding user response：

using <a> does the job without involving javascript

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

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

you can also do this way

<button type="button"  id="downloadButton">Download</button>

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