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: "octet/stream"});
    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.

kol · Accepted Answer · 2014-05-21T15:10:41.033

476

The only way I'm aware of is the trick used by FileSaver.js:

Create a hidden <a> tag.
Set its href attribute to the blob's URL.
Set its download attribute to the filename.
Click on the <a> 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.

edited May 21 '14 at 15:10

answered Oct 11 '13 at 23:47

kol

27,881
12
83
120

Oddly it seems to be failing when I copy and paste this into CodePen. Although your code seems legit and good http://codepen.io/ashblue/pen/jEhmH – Ash Blue Oct 13 '13 at 07:53
Your codepen code works for me in Chrome. The json file is saved into the download folder of Chrome. – kol Oct 13 '13 at 08:47
2

@AshBlue The "download" attribute needs HTML5. My code is just an example, you could also try the FileSaver.js demo page: http://eligrey.com/demos/FileSaver.js/ – kol Oct 13 '13 at 08:57
I'm getting "Failed - No file" on Chrome Windows ver 30. Is it maybe a Windows exclusive bug? – Ash Blue Oct 14 '13 at 22:50
The download works for me on a Windows 7 PC, but I got the "Failed - No file" message on Windows XP. Interestingly, The FileSaver.js demo page is able to download files to XP. – kol Oct 15 '13 at 09:05
I've found a workaround: if I change the extension to txt, then the download works. – kol Oct 15 '13 at 09:11
1

Interestingly, if you repeatedly try to download a txt this way (by pressing the Run button on jsfiddle.net again and again), the download sometimes fails. – kol Oct 15 '13 at 09:13
i allready have an save as JSON link. i do the Blob creatin logic in the $("#saveToJson") callback function but the problem is i can't do this.click() unless the function is gonna run itself over and over again. ps: i don't like to create those hidden workaround filds so i wanted to set the attributes of my element when it's clicked. – philx_x Mar 02 '15 at 10:57
@philx_x Since you already have an tag, and create the Blob in its click handler, you don't have to call `.click()` yourself, because it will cause infinite recursion. – kol Mar 02 '15 at 11:21
@xheyhenry FileSaver.js should work in IE10+: https://github.com/eligrey/FileSaver.js/#supported-browsers There is a workaround for IE<10: https://github.com/eligrey/FileSaver.js/#ie--10 – kol Nov 13 '15 at 22:27
4

Just wanted to mention that this solution will not work for files with sizes greater than a particular threshold. e.g-> 2 MB for chrome. This size varies from browser to browser. – manojadams Sep 02 '17 at 15:58
30

This does not work for me because I need to open the file in a new tab. I have to show a PDF in Chrome, but I need to show a user friendly name in the URL toolbar, and if the user wants to download through the download icon, I have to put the same user friendly name in the file. – Adrián Paredes Dec 11 '17 at 14:42
Can I do this kind of thing without using tag and window. Window is not available in all browsers and I do not want to create an tag in my angular app. – Rafael Andrade Jun 28 '18 at 17:56
https://stackoverflow.com/a/52273870/2730032 works for me without needing the trick used here and in the other answers. Is there a reason why it's not more upvoted and that this is still the top answer ? – Ixio Sep 25 '18 at 16:31
@Ixio Isn't `msSaveOrOpenBlob` Internet Explorer specific? – kol Sep 25 '18 at 20:14
@kol probably but I used the technique for other browsers: window.location = URL.createObjectURL(new File(...)) and it works fine for me on Firefox (I don't know about other browsers). – Ixio Sep 26 '18 at 08:00
For some reason, this fails for me when using Babel with Webpack, because the body element is not available yet, even if the code is only called after the document is loaded or not called at all. When using the untranspiled ES6 module source code, it works fine. I changed it to a normal function and declaring a reused a element outside of the function. – Konrad Höffner Oct 09 '18 at 09:58
4

Just to add, you don't need to actually mount the a tag to the body in order for this to work (tried just now in Chrome) – beyond-code Aug 12 '19 at 10:37
How can I make works for the video tag with blob data.[How to set the download file extension for blob data](https://stackoverflow.com/q/71686536/6521116) – LF00 Apr 01 '22 at 01:20
Why is saveData declared as an IIFE? – user210757 Apr 19 '22 at 17:31
weirdly enough, this adds auto file extensions when the filename is without one... I had some logfile called `logfile` and chrome made it `logfile.xml` without any indication from my side (it's not even an xml file) – phil294 Jun 30 '22 at 07:48

score 69 · Answer 2 · edited May 25 '19 at 05:28

69

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 && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([data], { type: type }), name);
    var a = $("<a style='display: none;'/>");
    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.

edited May 25 '19 at 05:28

N8allan

2,138
19
32

answered Apr 27 '16 at 20:08

Alexandru

12,264
17
113
208

Worked perfectly. – N8allan May 25 '19 at 03:23
1

I used the accepted solution but it didn't work at firefox! I still don't know why. Your solution worked in firefox. Thanks. – elahehab Sep 30 '19 at 07:57

Kim Nyholm · Answer 3 · 2020-06-16T18:47:04.597

55

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(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }, 0)
  }
}

jsfiddle example

edited Jun 16 '20 at 18:47

answered Feb 24 '18 at 23:26

Kim Nyholm

1,055
1
10
19

2

I found that this setTimeout() hack fixes MS Edge, where the file would not download at all. However, only the call to revokeObjectURL() needs to be delayed. – Russell Phillips Dec 17 '18 at 00:56
I found that the "if (window.navigator.msSaveOrOpenBlob)" is what did the trick for me – Jacques Olivier Jan 29 '19 at 14:10

score 38 · Answer 4 · edited Apr 10 '23 at 19:40

38

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 && 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);
    }
}

<button onclick="newFile({a:1}, 'file.json')">Export data to JSON</button>

edited Apr 10 '23 at 19:40

Community

1
1

answered Sep 11 '18 at 10:28

ben

397
3
3

8

Thanks @ben. This is working fine. No dom elements, nothing like to trigger like click event. It just works awesome with proper extension. But the given file name is not considered, downloading ".csv" instead of ".csv" – Ram Babu Jan 23 '19 at 04:19
3

Calling `revokeObjectURL` after `location.assign` works fine in Firefox, but breaks the download on Chrome. – Fred Jan 25 '19 at 15:49
Note that "Edge does not support the File constructor." Ref. https://caniuse.com/#feat=fileapi – user1477388 Sep 23 '19 at 18:39
This should be the correct answer. No point in creating useless objects in the DOM tree – Luiz Felipe Feb 17 '20 at 19:25
Now it does, since Jan '20 – Luiz Felipe Feb 17 '20 at 19:26
2

As @RamBabuS says, this is not keeping `fileName`, but besides that works perfectly for me – Manu Artero Mar 05 '20 at 16:41
There is no need to call revokeObjectURL, the URL will automatically be revoked when the creating document (the page you were on) is closed. Which is also why you must use a new tab to view the file (at least in chrome). – junvar Mar 07 '20 at 02:48
Can I download a blob video with this function? – F. Vosnim Jun 03 '20 at 19:13
6

The filename property works in firefox, but not in chrome... anyone a solution for chrome? – Gerros Sep 09 '20 at 08:49
The file name is not working in Chrome, so don't waste your time – Experimenter Dec 13 '21 at 20:17
Great solution, still filename not working in Chrome (or Safari)...Any news on this for these browsers?! – tverilytt Sep 21 '22 at 12:57
That's the way! Good answer. – Erick Willian Jul 18 '23 at 20:28

score 9 · Answer 5 · answered Feb 24 '20 at 14:55

This is my solution. From my point of view, you can not bypass the <a>.

function export2json() {
  const data = {
    a: '111',
    b: '222',
    c: '333'
  };
  const a = document.createElement("a");
  a.href = URL.createObjectURL(
    new Blob([JSON.stringify(data, null, 2)], {
      type: "application/json"
    })
  );
  a.setAttribute("download", "data.json");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

<button onclick="export2json()">Export data to json file</button>

You are leaking a blob url here though. – CherryDT Sep 02 '22 at 07:17 — CherryDT, Sep 02 '22 at 07:17

score 7 · Answer 6 · answered Apr 13 '18 at 15:27

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);
        }
    }

I think you can call `link.click()` instead of dispatching a mouse event. — Fred, Jan 25 '19 at 15:50

score 5 · Answer 7 · answered Sep 03 '19 at 20:31

Working example of a download button, to save a cat photo from an url as "cat.jpg":

HTML:

<button onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg', 'cat.jpg')">Download</button>

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(() => {
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      }, 0);
    }
  };
  xhr.send();
}

well done, thanks for help! – Andrej Gaspar Apr 06 '22 at 13:55 — Andrej Gaspar, Apr 06 '22 at 13:55

score 3 · Answer 8 · answered Oct 07 '19 at 00:38

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);

score 0 · Answer 9 · edited Aug 01 '23 at 03:36

0

Use File instead

File support name, moreover it's created on top of Blob and can be used when you want to obtain a Blob object for a file on the user's file system.

var file = new File([json], name, {type: "octet/stream"});

edited Aug 01 '23 at 03:36

foxiris

3,125
32
32

answered Jul 18 '23 at 20:27

Erick Willian

1,825
11
17

score -1 · Answer 10 · answered Jun 03 '22 at 10:55

-1

this is a good easy solution for it.

function downloadBloob(blob,FileName) {
    var link = document.createElement("a"); // Or maybe get it from the current document
    link.href = blob;
    link.download = FileName;
    link.click();
}

answered Jun 03 '22 at 10:55

segu

31
1
7

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the [help center](https://stackoverflow.com/help/how-to-answer). – Ethan Jun 04 '22 at 13:47
This didn't work for me. You have to add "link.href = window.URL.createObjectURL(blob);" instead of "link.href = blob". Otherwise, it will give you an URL like this "http://localhost:3001/[object%20 Blob]" and the file will be empty and it will not work. – Eduard Mar 24 '23 at 10:34

JavaScript blob filename without link

10 Answers10

Use File instead

Linked

Related