下载 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?

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

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

推荐答案

在现代浏览器中，您可以通过使用您的文件内容(在您的情况下由 Ajax 接收)创建一个 Blob，为其创建一个 URL，以及使用 download 属性:

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
5,6,7',
    fileName = "my-csv.csv";

saveData(data, fileName);

JSFiddle

如果您的 Ajax 端点 URL 具有正确的标头(或者即使它不是只要您使用 download 属性)，您就可以放弃 Blob 和 Ajax，只需添加 URL到具有下载属性的链接.改编@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屋！