How to trigger a file download when clicking an HTML button or JavaScript

Question

This is crazy but I don t know how to do this  and because of how common the words are  it s hard to find what I need on search engines  I m thinking this should be an easy one to answer   I want a simple file download  that would do the same as this    lt a href  file doc  gt Download  lt  a gt    But I want to use an HTML button  e g  either of these    lt input type  button  value  Download   gt   lt button gt Download  lt  button gt    Likewise  is it possible to trigger a simple download via JavaScript       fileRequest   click function       code to download           I m definitely not looking for a way to create an anchor that looks like a button  use any back-end scripts  or mess with server headers or mime types

User · Answer

Anywhere between your  lt body gt  and  lt  body gt  tags  put in a button using the below code    lt button gt       lt a href  file doc  download gt Click to Download  lt  a gt   lt  button gt    This is sure to work

User · Answer

If your looking for a vanilla JavaScript  no jQuery  solution and without using the HTML5 attribute you could try this      x000D   x000D  const download   document getElementById  fileRequest    x000D   x000D  download addEventListener  click   request   x000D   x000D  function request     x000D      window location    document docx   x000D    x000D   dwnld-cta   x000D      border-radius  15px 15px  x000D      width  100px  x000D      line-height  22px x000D    x000D   lt h1 gt Download File lt  h1 gt  x000D   lt button id  fileRequest  class  dwnld-cta  gt Download lt  button gt  x000D   x000D   x000D

User · Answer

You can hide the download link and make the button click it    lt button onclick  document getElementById  link   click    gt Download  lt  button gt   lt a id  link  href  file doc  download hidden gt  lt  a gt

User · Answer

Bootstrap Version   lt a class  btn btn-danger  role  button  href  path to file     download  proposed file name  gt    Download  lt  a gt    Documented in Bootstrap 4 docs  and works in Bootstrap 3 as well

User · Answer

For me ading button instead of anchor text works really well    lt a href  file doc  gt  lt button gt Download  lt  button gt  lt  a gt    It might not be ok by most rules  but it looks pretty good

User · Answer

If you can t use form  another approach with downloadjs fit nice  Downloadjs use blob and html 5 file API under the hood   lt div onClick      gt  downloadjs url  filename     gt   it s jsx react syntax  but can be used in pure html Note  Edited to fix layout issue above

User · Answer

There is a difference between loading a file and downloading a file  The following html code loads a file   lt a href  quot http   www fbi gov top-secret pdf quot  gt loading on the same tab lt  a gt   After clicking on this link  your current tab will be replaced with the pdf-file that can then be downloaded  On right-clicking on this link  you can choose the menu item save link as for downloading the file directly  If you wish to obtain a save as dialog on clicking on such a link  you might want to take the following code   lt a href  quot http   www fbi gov top-secret pdf download 1 quot  gt save as    lt  a gt   Your browser will download this file immediately if you choose to use a download directory in your options  Otherwise  your browser will be offering a save as-dialog  You can also choose a button for downloading   lt button type  quot submit quot  onclick  quot window open  http   www fbi gov top-secret pdf download 1   quot  gt      save as     lt  button gt   If you wish to load the link on a new tab  you take  lt a href  quot http   www fbi gov top-secret pdf quot  target  quot  blank quot  gt loading on a new tab lt  a gt   A form element does not heed the directive  download 1  It only heeds the directive target  quot  blank quot    lt form method  quot get quot  action  quot http   www fbi gov top-secret pdf quot  target  quot  blank quot  gt       lt button type  quot submit quot  gt loading on a new tab lt  button gt   lt  form gt

User · Answer

You can trigger a download with the HTML5 download attribute    lt a href  path to file  download  proposed file name  gt Download lt  a gt    Where    path to file is a path that resolves to an URL on the same origin  That means the page and the file must share the same domain  subdomain  protocol  HTTP vs  HTTPS   and port  if specified   Exceptions are blob  and data   which always work   and file   which never works   proposed file name is the filename to save to  If it is blank  the browser defaults to the file s name    Documentation  MDN  HTML Standard on downloading  HTML Standard on download  CanIUse

User · Answer

I think this is the solution you were looking for   lt button type  submit  onclick  window location href  file doc   gt Download  lt  button gt    I hade a case where my Javascript generated a CSV file  Since there is no remote URL to download it I use the following implementation   downloadCSV  function data       var MIME TYPE    text csv        var blob   new Blob  data    type  MIME TYPE        window location href   window URL createObjectURL blob

User · Answer

With jQuery       fileRequest   click function               hope the server sets Content-Disposition  attachment      window location    file doc

User · Answer

Another way of doing in case you have a complex URL such as file doc foo bar amp jon doe is to add hidden field inside the form   lt form method  get  action  file doc  gt     lt input type  hidden  name  foo  value  bar    gt     lt input type  hidden  name  john  value  doe    gt     lt button type  submit  gt Download Now lt  button gt   lt  form gt    inspired on  Cfreak answer which is not complete

User · Answer

HTML    lt button type  submit  onclick  window open  file doc    gt Download  lt  button gt

User · Answer

The solution I have come up with is that you can use download attribute in anchor tag but it will only work if your html file is on the server  but you may have a question like while designing a simple html page how can we check that for that you can use VS code live server or bracket live server and you will see your download attribute will work but if you will try to open it simply by just double clicking html page it open the file instead of downloading it  conclusion  attribute download in anchor tag only works if your html file is no server

User · Answer

For the button you can do   lt form method  get  action  file doc  gt      lt button type  submit  gt Download  lt  button gt   lt  form gt

User · Answer

Old thread but it s missing a simple js solution   let a   document createElement  a   a href   item url a download   item url split      pop   document body appendChild a  a click   document body removeChild a

User · Answer

you can add  tag without any text but with link  and when you click the button like you have in code   just run the    yourlinkclass   click   function

User · Answer

What about    lt input type  button  value  Download Now   onclick  window location    file doc    gt

User · Answer

This is what finally worked for me since the file to be downloaded was determined when the page is loaded   JS to update the form s action attribute   function setFormAction         document getElementById  myDownloadButtonForm   action     some code to get the filename      Calling JS to update the form s action attribute    lt body onLoad  setFormAction     gt    Form tag with the submit button    lt form method  get  id  myDownloadButtonForm  action    gt      Click to open document         lt button type  submit  gt Open Document lt  button gt   lt  form gt    The following did NOT work    lt form method  get  id  myDownloadButtonForm  action  javascript someFunctionToReturnFileName     gt

User · Answer

You can do it with  trick  with invisible iframe  When you set  src  to it  browser reacts as if you would click a link with the same  href   As opposite to solution with form  it enables you to embed additional logic  for example activating download after timeout  when some conditions are met etc    It is also very silient  there s no blinking new window tab like when using window open   HTML    lt iframe id  invisible  style  display none   gt  lt  iframe gt    Javascript   function download         var iframe   document getElementById  invisible        iframe src    file doc

User · Answer

If you use the  lt a gt  tag  do not forget to use the entire url which leads to the file -- i e     lt a href  http   www example com folder1 file doc  gt Download lt  a gt

User · Answer

download attribute do it    lt a class  btn btn-success btn-sm  href   file path file type  download gt        lt span gt download  lt  span gt  amp nbsp  lt i class  fa fa-download  gt  lt  i gt    lt  a gt

[javascript] How to trigger a file download when clicking an HTML button or JavaScript

Examples related to javascript

Examples related to html

Examples related to download