下载csv文件作为对AJAX请求的响应 [英] Download csv file as response on AJAX request

问题描述

我有一个名为'/ downloadUserAction'的端点，它收集数据并下载csv文件。我遇到的挑战是，当使用点击功能上的按钮调用端点时，文件将无法下载，但只有在我直接在浏览器中访问端点时才会下载。

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 endpoint using a button on click function, however it'll download only when I access the endpoint directly in the browser.

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

Upon research, I've came across findings that concluded that you cannot use AJAX to download files. That makes sense, since when I click on my button I see the endpoint being hit and the file contents being passed in the network tab, however no file gets downloaded on the client.

这就是我只是在javascript端使用我页面上的数据表按钮插件功能来调用我的端点。

This is all I'm simply doing on the javascript side using data tables button plug-in feature on my page to call my endpoint.

$(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"                        
                                });
                            }
                          }
                      ],

还有另一种方法我的端点会强制在客户端页面上下载吗？

Is there another method of calling my endpoint that will force a download on the client page?

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

side-note: my data table is using server side processing otherwise I would've just used datatables csv exporting button.

推荐答案

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

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

如果你的Ajax端点URL有正确的标题（或者甚至可能只要你使用<$ c） $ c>下载属性），您可以放弃Blob和Ajax，只需将URL添加到带有download属性的链接即可。改编@ pritesh的代码，

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

这篇关于下载csv文件作为对AJAX请求的响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！