Download csv file as response on AJAX request

In modern browsers, you can prompt a download by creating a Blob with your file contents (in your case received by Ajax), creating a URL for it, and using the download attribute:

const saveData = (function () {
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        const blob = new Blob([data], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

const data="a,b,c\n5,6,7",
    fileName = "my-csv.csv";

saveData(data, fileName);

JSFiddle

If your Ajax endpoint URL has the proper headers (or possibly even if it isn’t as long as you use the download attribute), you can forego the Blob and Ajax and just add the URL to the link with the download attribute. Adapting @pritesh’s code,

const saveData = (function () {
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (url, fileName) {
        a.href = url;
        a.download = fileName;
        a.click();
    };
}());

const url="http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv", // Replace with your own URL: window.location + "/downloadUserAction?draw=3&search%5Bvalue%5D=NLP_SEARCH&order%5B0%5D%5Bcolumn%5D=6&order%5B0%5D%5Bdir%5D=desc"
    fileName = "my-csv.csv";

saveData(url, fileName);

JSFiddle

Leave a Comment