Coder Perfect

Filename of a JavaScript blob without a link


When using window.location to force download a blob file, how do you set the file’s name in JavaScript?

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);

Using the above code, you can download a file that looks like this without having to reload the page:


Instead, I’d like to name the file my-download.json.

Asked by Ash Blue

Solution #1

The only method I’m aware of is FileSaver.js’s trick:

Here’s a simple (jsfiddle) example:

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a); = "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; = fileName;;

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

I created this example to demonstrate the concept; in real code, FileSaver.js should be used instead.


Answered by kol

Solution #2

I just wanted to add support for Internet Explorer (at least the most recent versions) and clean up the code using jQuery to the acceptable answer:

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

Fiddle is a good example. Godspeed.

Answered by Alexandru

Solution #3

The principles are the same as in the previous solutions. However, I encountered problems with Firefox 52.0 (32 bit), which truncated huge files (>40 MBytes) at random points. This problem is resolved by rescheduling the call to revokeObjectUrl().

function saveFile(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    const a = document.createElement('a');
    const url = window.URL.createObjectURL(blob);
    a.href = url; = filename;;
    setTimeout(() => {
    }, 0)

jsfiddle example

Answered by Kim Nyholm

Solution #4

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

Answered by ben

Solution #5

saveFileOnUserDevice = function(file){ // content: blob, name: string
        if(navigator.msSaveBlob){ // For ie and Edge
            return navigator.msSaveBlob(file.content,;
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(file.content);
            link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));

Answered by Jean-Philippe

Post is based on