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

我有一个名为'/ downloadUserAction'的端点，用于收集数据并下载csv文件。我遇到的挑战是，当使用点击功能上的按钮调用端点时，文件不会被下载，但只有当我直接在浏览器中访问端点时才会下载文件。下载csv文件作为对AJAX请求的响应

经研究，我发现了一些发现，结论是你不能使用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"       
           }); 
          } 
          } 
         ],

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

side-note：我的数据表正在使用服务器端处理，否则我只会使用datatables csv exporting按钮。

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：

来源

2017-10-09 Daniel Gebrahanus

在现代浏览器中，你可以通过你的文件内容创建的Blob（在阿贾克斯收到你的情况下），因为它创建一个URL，并使用download属性提示下载

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

来源

2017-10-09 03:33:08

因为当你从浏览器直接访问端点，所以你可以做的是设置按钮内的锚标记和设置的href属性它会下载锚标记指向CSV file.I的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>

如果你尝试在浏览器的代码，然后的onclick将出现一个对话框用于保存文件。

在你的情况下，你需要用你自己的替换示例视频网址。

window.location的+ “/ downloadUserAction？绘制= 3 &搜索％5Bvalue％5D = NLP_SEARCH &顺序％5B0％5D％5Bcolumn％5D = 6 &顺序％5B0％5D％5Bdir％5D =降序“

来源

2017-10-09 03:36:51 pritesh

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

回答

相关问题