Download csv file as response on AJAX request

前端未结

关注

 2  1052

I have an endpoint called \'/downloadUserAction\' that collects data and downloads a csv file. The challenge I am having is that the file won\'t get downloaded when calling

相关标签:

2条回答

执笔经年

2020-12-03 02:35

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

0 讨论(0)

野性不改

2020-12-03 02:46
Since it gets downloaded when you access the endpoint directly from the browser so what you can do is set an anchor tag inside the button and set the href attribute of the anchor tag to the url pointing to the csv file.I have created a sample example here:
```
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <button>
        <a href="http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv">Click me</a>
    </button>
</body>
</html>
```
If you try out this code in browser, then onclick a dialog will appear for saving the file.

In your case you need the replace the sample videos url with your own.

window.location + "/downloadUserAction?draw=3&search%5Bvalue%5D=NLP_SEARCH&order%5B0%5D%5Bcolumn%5D=6&order%5B0%5D%5Bdir%5D=desc"
0 讨论(0)
发布评论:

提交评论
- 加载中...