Easiest way to open a download window without navigating away from the page

Question

What is the best cross browser way to open a download dialog  let s assume we can set content-disposion attachment in the headers  without navigating away from the current page  or opening popups  which doesn t work well in Internet Explorer IE  6

User · Answer

I ve been looking for a good way to use javascript to initiate the download of a file  just as this question suggests   However these answers not been helpful     I then did some xbrowser testing and have found that an iframe works best on all modern browsers IE 8    downloadUrl    http   example com download file zip   var downloadFrame   document createElement  iframe     downloadFrame setAttribute  src  downloadUrl   downloadFrame setAttribute  class   screenReaderText     document body appendChild downloadFrame      class  screenReaderText  is my class to style content that is present but not viewable   css    screenReaderText      border  0     clip  rect 0 0 0 0      height  1px     margin  -1px     overflow  hidden     padding  0     position  absolute     width  1px       same as  visuallyHidden in html5boilerplate   I prefer this to the javascript window open method because if the link is broken the iframe method simply doesn t do anything as opposed to redirecting to a blank page saying the file could not be opened     window open downloadUrl   download window    toolbar 0 location no directories 0 status 0 scrollbars 0 resizeable 0 width 1 height 1 top 0 left 0    window focus

User · Answer

Put this in the HTML head section  setting the url var to the URL of the file to be downloaded    lt script type  text javascript  gt    function startDownload              var url  http   server folder file ext            window open url   Download           lt  script gt    Then put this in the body  which will start the download automatically after 5 seconds    lt script type  text javascript  gt    setTimeout  startDownload     5000     starts download after 5 seconds    lt  script gt      From here

User · Answer

Modifying the location of window might cause some issue especially when you have a persistent connection like websocket  So I always resort to good old iframe solution   HTML   lt input type  button  onclick  downloadButtonClicked    value  Download   gt               lt iframe style  display none   name  hiddenIframe  id  hiddenIframe  gt  lt  iframe gt    Javascript  function downloadButtonClicked            Simulate a link click     var url    your download url here       var elem   document createElement  a        elem href   url      elem target    hiddenIframe       elem click

User · Answer

After hours of trying  the function is born    I had a scenario where I had to display loader in time while the file is preparing for download   Working in Chrome  Safari and Firefox  function ajaxDownload url  filename    file   method    get   data       callbackSuccess        gt      callbackFail        gt              ajax           url  url          method   GET           xhrFields                responseType   blob                     success  function  data                   create link element             let a   document createElement  a                     url   window URL createObjectURL data                   initialize              a href   url              a download   filename                  append element to the body                  a must  due to Firefox             document body appendChild a                   trigger download             a click                    delay a bit deletion of the element             setTimeout function                    window URL revokeObjectURL url                   document body removeChild a                  100                   invoke callback if any              callbackSuccess data                      error  function  err                   invoke fail callback if any             callbackFail err

User · Answer

7 years have passed and I don t know whether it works for IE6 or not  but this prompts OpenFileDialog in FF and Chrome   var file path    host path file ext   var a   document createElement  A    a href   file path  a download   file path substr file path lastIndexOf        1   document body appendChild a   a click    document body removeChild a

User · Answer

I always add a target   blank  to the download link  This will open a new window  but as soon as the user clicks save  the new window is closed

User · Answer

Using HTML5 Blob Object-URL File API          Save a text as file using HTML  lt a gt  temporary element and Blob     see https   stackoverflow com questions 49988202 macos-webview-download-a-html5-blob-file     param fileName String     param fileContents String JSON String     author Loreto Parisi    var saveBlobAsFile   function fileName fileContents        if typeof Blob    undefined        using Blob         var textFileAsBlob   new Blob  fileContents     type   text plain              var downloadLink   document createElement  a            downloadLink download   fileName          if  window webkitURL    null                downloadLink href   window webkitURL createObjectURL textFileAsBlob                     else               downloadLink href   window URL createObjectURL textFileAsBlob               downloadLink onclick   document body removeChild event target               downloadLink style display    none               document body appendChild downloadLink                     downloadLink click          else           var pp   document createElement  a            pp setAttribute  href    data text plain charset utf-8     encodeURIComponent fileContents            pp setAttribute  download   fileName           pp onclick   document body removeChild event target           pp click             saveBlobAsFile    x000D   x000D      x000D     Save a text as file using HTML  lt a gt  temporary element and Blob x000D      see https   stackoverflow com questions 49988202 macos-webview-download-a-html5-blob-file x000D      param fileName String x000D      param fileContents String JSON String x000D      author Loreto Parisi x000D      x000D  var saveBlobAsFile   function fileName  fileContents    x000D    if  typeof Blob      undefined        using Blob x000D      var textFileAsBlob   new Blob  fileContents     x000D        type   text plain  x000D          x000D      var downloadLink   document createElement  a    x000D      downloadLink download   fileName  x000D      if  window webkitURL    null    x000D        downloadLink href   window webkitURL createObjectURL textFileAsBlob   x000D        else   x000D        downloadLink href   window URL createObjectURL textFileAsBlob   x000D        downloadLink onclick   document body removeChild event target   x000D        downloadLink style display    none   x000D        document body appendChild downloadLink   x000D        x000D      downloadLink click    x000D      else   x000D      var pp   document createElement  a    x000D      pp setAttribute  href    data text plain charset utf-8     encodeURIComponent fileContents    x000D      pp setAttribute  download   fileName   x000D      pp onclick   document body removeChild event target   x000D      pp click    x000D      x000D      saveBlobAsFile x000D   x000D  var jsonObject     x000D     name    John   x000D     age   31  x000D     city    New York  x000D     x000D  var fileContents   JSON stringify jsonObject  null  2   x000D  var fileName    data json   x000D   x000D  saveBlobAsFile fileName  fileContents  x000D   x000D   x000D

User · Answer

I know the question was asked 7 years and 9 months ago but many posted solutions doesn t seem to work  for example using an  lt iframe gt  works only with FireFox and doesn t work with Chrome   Best solution   The best working solution to open a file download pop-up in JavaScript is to use a HTML link element  with no need to append the link element to the document body as stated in other answers   You can use the following function   function downloadFile filePath       var link document createElement  a        link href   filePath      link download   filePath substr filePath lastIndexOf        1       link click        In my application  I am using it this way   downloadFile  report xls myCustomReport xlsx      Working Demo    x000D   x000D  function downloadFile filePath    x000D    var link   document createElement  a    x000D    link href   filePath  x000D    link download   filePath substr filePath lastIndexOf        1   x000D    link click    x000D    x000D   x000D  downloadFile  http   www adobe com content dam Adobe en accessibility pdfs accessing-pdf-sr pdf    x000D   x000D   x000D    Note    You have to use the link download attribute so the browser doesn t open the file in a new tab and fires the download pop-up  This was tested with several file types  docx  xlsx  png  pdf

User · Answer

How about    lt meta http-equiv  refresh  content  5 url http   site com file ext  gt    This way works on all browsers  i think  and let you put a message like   If the download doesn t start in five seconds  click here    If you need it to be with javascript   well     document write   lt meta http-equiv  refresh  content  5 url http   site com file ext  gt       Regards

User · Answer

A small hidden iframe can work for this purpose    That way you don t have to worry about closing the pop up

User · Answer

This javascript is nice that it doesn t open a new window or tab   window location assign url

User · Answer

If the link is to a valid file url  simply assigning window location href will work   However  sometimes the link is not valid  and an iFrame is required   Do your normal event preventDefault to prevent the window from opening  and if you are using jQuery  this will work       lt iframe gt    attr  src   downloadThing attr  href    appendTo  body   on  load   function          this  remove

[javascript] Easiest way to open a download window without navigating away from the page

Examples related to javascript