下载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);
在现代浏览器中,你可以通过你的文件内容创建的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);
因为当你从浏览器直接访问端点,所以你可以做的是设置按钮内的锚标记和设置的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 =降序“