JavaScript blob filename without link

Question

How do you set the name of a blob file in JavaScript when force downloading it through window location  function newFile data        var json   JSON stringify data       var blob   new Blob  json    type   quot octet stream quot         var url    window URL createObjectURL blob       window location assign url      Running the above code downloads a file instantly without a page refresh that looks like  bfefe410-8d9c-4883-86c5-d76c50a24a1d I want to set the filename as my-download json instead

User · Accepted Answer

The only way I m aware of is the trick used by FileSaver js     Create a hidden  lt a gt  tag  Set its href attribute to the blob s URL  Set its download attribute to the filename   Click on the  lt a gt  tag    Here is a simplified example  jsfiddle    var saveData    function          var a   document createElement  a        document body appendChild a       a style    display  none       return function  data  fileName            var json   JSON stringify data               blob   new Blob  json    type   octet stream                 url   window URL createObjectURL blob           a href   url          a download   fileName          a click            window URL revokeObjectURL url                 var data     x  42  s   hello  world   d  new Date          fileName    my-download json    saveData data  fileName     I wrote this example just to illustrate the idea  in production code use FileSaver js instead   Notes   Older browsers don t support the  download  attribute  since it s part of HTML5  Some file formats are considered insecure by the browser and the download fails  Saving JSON files with txt extension works for me

User · Answer

window location assign did not work for me  it downloads fine but downloads without an extension for a CSV file on Windows platform  The following worked for me       var blob   new Blob  csvString     type   text csv            window location assign window URL createObjectURL blob        var link   window document createElement  a        link href   window URL createObjectURL blob          Construct filename dynamically and set to link download     link download   link href split      pop           extension       document body appendChild link       link click        document body removeChild link

User · Answer

saveFileOnUserDevice   function file      content  blob  name  string         if navigator msSaveBlob      For ie and Edge             return navigator msSaveBlob file content  file name                     else              let link   document createElement  a                link href   window URL createObjectURL file content               link download   file name              document body appendChild link               link dispatchEvent new MouseEvent  click    bubbles  true  cancelable  true  view  window                 link remove                window URL revokeObjectURL link href

User · Answer

Same principle as the solutions above  But I had issues with Firefox 52 0  32 bit  where large files   40 MBytes  are truncated at random positions  Re-scheduling the call of revokeObjectUrl   fixes this issue     function saveFile blob  filename      if  window navigator msSaveOrOpenBlob        window navigator msSaveOrOpenBlob blob  filename       else       const a   document createElement  a        document body appendChild a       const url   window URL createObjectURL blob       a href   url      a download   filename      a click        setTimeout      gt          window URL revokeObjectURL url         document body removeChild a          0          jsfiddle example

User · Answer

Working example of a download button  to save a cat photo from an url as  cat jpg    HTML    lt button onclick  downloadUrl  https   i imgur com AD3MbBi jpg    cat jpg    gt Download lt  button gt    JavaScript   function downloadUrl url  filename      let xhr   new XMLHttpRequest      xhr open  GET   url  true     xhr responseType    blob     xhr onload   function e        if  this status    200          const blob   this response        const a   document createElement  a          document body appendChild a         const blobUrl   window URL createObjectURL blob         a href   blobUrl        a download   filename        a click          setTimeout      gt            window URL revokeObjectURL blobUrl           document body removeChild a            0                xhr send

User · Answer

I just wanted to expand on the accepted answer with support for Internet Explorer  most modern versions  anyways   and to tidy up the code using jQuery     document  ready function         saveFile  Example txt    data attachment text    Hello  world          function saveFile  name  type  data        if  data     null  amp  amp  navigator msSaveBlob          return navigator msSaveBlob new Blob  data     type  type     name       var a       lt a style  display  none    gt         var url   window URL createObjectURL new Blob  data    type  type         a attr  href   url       a attr  download   name          body   append a       a 0  click        window URL revokeObjectURL url       a remove        Here is an example Fiddle  Godspeed

User · Answer

This is my solution  From my point of view  you can not bypass the  lt a gt     x000D   x000D  function export2json     x000D    const data     x000D      a   111   x000D      b   222   x000D      c   333  x000D       x000D    const a   document createElement  a    x000D    a href   URL createObjectURL  x000D      new Blob  JSON stringify data  null  2      x000D        type   application json  x000D         x000D       x000D    a setAttribute  download    data json    x000D    document body appendChild a   x000D    a click    x000D    document body removeChild a   x000D    x000D   lt button onclick  export2json    gt Export data to json file lt  button gt  x000D   x000D   x000D

User · Answer

Late  but since I had the same problem I add my solution   function newFile data  fileName        var json   JSON stringify data         IE11 support     if  window navigator  amp  amp  window navigator msSaveOrOpenBlob            let blob   new Blob  json    type   application json             window navigator msSaveOrOpenBlob blob  fileName         else     other browsers         let file   new File  json   fileName   type   application json             let exportUrl   URL createObjectURL file           window location assign exportUrl           URL revokeObjectURL exportUrl

[javascript] JavaScript blob filename without link

Examples related to javascript

Examples related to html

Examples related to download

Examples related to blob

Examples related to html5-filesystem