Question

我有一个名为'/ 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"                        
                                });
                            }
                          }
                      ],

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

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

Answer 1

在现代浏览器中，您可以通过创建包含文件内容的Blob（在您收到Ajax的情况下），为其创建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);

this question

如果您的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

Answer 2

由于直接从浏览器访问端点时会下载，因此您可以在按钮内设置锚标记，并将锚标记的href属性设置为指向csv文件的URL。我已创建这里有一个示例：

<!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>

如果您在浏览器中试用此代码，则会出现一个对话框，用于保存文件。

在您的情况下，您需要使用自己的视频网址替换。

window.location + “/ downloadUserAction绘制= 3＆安培;搜索％5Bvalue％5D = NLP_SEARCH与秩序％5B0％5D％5Bcolumn％5D = 6＆安培;为了％5B0％5D％5Bdir％5D = desc” 的

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

2 个答案: