Set filename when downloading a file through javascript

Question

I've taken over the following snippet:

            $.ajax({
                contentType: 'application/json; charset=utf-8',
                type: 'POST',
                url: '/api/generalapi/generatecsv',
                data: data,
                success: function (response) {
                    window.open("data:text/csv;base64," + response, '', '');
                }
            });

I've tried adding

filename=orders.csv

to the window.open but the file still always comes down as "download". No extension or anything.

Is there any way of controlling the filename using the above code?

Tudor Constantin · Accepted Answer · 2016-05-19 06:06:05Z

1

try with something like this:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        url: '/api/generalapi/generatecsv',
        data: data,
        success: function (response) {
            saveContent("text/csv;base64," + response, 'orders.csv');
        }
    });

The key part is link.download = fileName;, which adds the HTML5 download attribute to the dynamically created link used for the download.

answered May 19, 2016 at 6:06

Tudor Constantin

26.9k7 gold badges54 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CJe Over a year ago

As this has to work in IE is my best option then to have the backend return the entire file thereby defining the filename?

Tudor Constantin Over a year ago

indeed, IE doesn't support this, so yes, the option is to solve it from the backend

Collectives™ on Stack Overflow

Set filename when downloading a file through javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related