下载 csv 文件作为 AJAX 请求的响应

我有一个名为“/downloadUserAction”的端点，用于收集数据并下载 csv 文件。我面临的挑战是，使用单击功能上的按钮调用端点时不会下载该文件，但只有当我直接在浏览器中访问端点时才会下载该文件。

经过研究，我发现不能使用 AJAX 来下载文件。这是有道理的，因为当我单击按钮时，我看到端点被击中并且文件内容在网络选项卡中传递，但是客户端上没有下载任何文件。

这就是我在 javascript 端所做的全部工作，使用页面上的数据表按钮插件功能来调用我的端点。

$(document).ready(function () {
    var table = $("#userActivity").on('init.dt', function() {
            }).DataTable({
                dom: 'Blfrtip',
                buttons: [
                          {
                            extend: 'csvHtml5',
                            text: 'NLP Search Download',
                            action: function ( e, dt, node, config ) {
                                $.ajax({
                                    url : window.location + "/downloadUserAction?draw=3&search%5Bvalue%5D=NLP_SEARCH&order%5B0%5D%5Bcolumn%5D=6&order%5B0%5D%5Bdir%5D=desc"                        
                                });
                            }
                          }
                      ],

是否有另一种调用我的端点的方法来强制在客户端页面上进行下载？

旁注：我的数据表正在使用服务器端处理，否则我只会使用数据表 csv 导出按钮。

在现代浏览器中，您可以通过使用文件内容（在您的情况下由 Ajax 接收）创建 Blob、为其创建 URL 并使用download属性：

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 https://jsfiddle.net/zzapxtem/2/

如果您的 Ajax 端点 URL 具有正确的标头（或者即使它不是，只要您使用download属性），您可以放弃 Blob 和 Ajax，只需将 URL 添加到具有下载属性的链接即可。改编@pritesh的代码，

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 https://jsfiddle.net/mb5qdaua/2/