我在服务器端有一个Struts2操作用于文件下载。
<action name="download" class="com.xxx.DownAction">
<result name="success" type="stream">
<param name="contentType">text/plain</param>
<param name="inputName">imageStream</param>
<param name="contentDisposition">attachment;filename={fileName}</param>
<param name="bufferSize">1024</param>
</result>
</action>
然而，当我使用jQuery调用动作时:
$.post(
"/download.action",{
para1:value1,
para2:value2
....
},function(data){
console.info(data);
}
);
在Firebug中，我看到数据是用二进制流检索的。我想知道如何打开文件下载窗口，用户可以在本地保存文件?
好的，基于ndpu的代码这里有一个改进的(我认为)ajax_download;-
function ajax_download(url, data) {
var $iframe,
iframe_doc,
iframe_html;
if (($iframe = $('#download_iframe')).length === 0) {
$iframe = $("<iframe id='download_iframe'" +
" style='display: none' src='about:blank'></iframe>"
).appendTo("body");
}
iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
if (iframe_doc.document) {
iframe_doc = iframe_doc.document;
}
iframe_html = "<html><head></head><body><form method='POST' action='" +
url +"'>"
Object.keys(data).forEach(function(key){
iframe_html += "<input type='hidden' name='"+key+"' value='"+data[key]+"'>";
});
iframe_html +="</form></body></html>";
iframe_doc.open();
iframe_doc.write(iframe_html);
$(iframe_doc).find('form').submit();
}
像这样使用这个;-
$('#someid').on('click', function() {
ajax_download('/download.action', {'para1': 1, 'para2': 2});
});
参数被作为适当的post params发送，就像来自一个输入，而不是像前面的例子一样作为一个json编码的字符串。
注意:要警惕在这些表单上可能出现的变量注入。可能有一种更安全的方式来编码这些变量。或者考虑逃离它们。
如何下载一个文件后收到它的AJAX
当文件创建了很长一段时间，你需要显示PRELOADER时，这很方便
例如，当提交一个web表单:
<script>
$(function () {
$('form').submit(function () {
$('#loader').show();
$.ajax({
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'binary',
xhrFields: {
'responseType': 'blob'
},
success: function(data, status, xhr) {
$('#loader').hide();
// if(data.type.indexOf('text/html') != -1){//If instead of a file you get an error page
// var reader = new FileReader();
// reader.readAsText(data);
// reader.onload = function() {alert(reader.result);};
// return;
// }
var link = document.createElement('a'),
filename = 'file.xlsx';
// if(xhr.getResponseHeader('Content-Disposition')){//filename
// filename = xhr.getResponseHeader('Content-Disposition');
// filename=filename.match(/filename="(.*?)"/)[1];
// filename=decodeURIComponent(escape(filename));
// }
link.href = URL.createObjectURL(data);
link.download = filename;
link.click();
}
});
return false;
});
});
</script>
可选函数被注释掉以简化示例。
不需要在服务器上创建临时文件。
jQuery v2.2.4 OK。旧版本将会有一个错误:
Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').
2019现代浏览器更新
这是我现在推荐的方法，但有几点注意事项:
需要一个相对现代的浏览器
如果文件非常大，您可能会采取与原始方法(iframe和cookie)类似的方法，因为以下一些操作可能会消耗至少与正在下载的文件相同大的系统内存和/或其他有趣的CPU副作用。
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
// the filename you want
a.download = 'todo-1.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
alert('your file has downloaded!'); // or you know, something with better UX...
})
.catch(() => alert('oh no!'));
2012年原创jQuery/iframe/Cookie的方法
Bluish在这一点上是完全正确的，你不能通过Ajax做到这一点，因为JavaScript不能直接将文件保存到用户的计算机(出于安全考虑)。不幸的是，将主窗口的URL指向您的文件下载意味着当文件下载发生时，您几乎无法控制用户体验。
我创建了jQuery文件下载，它允许“类似Ajax”的体验，文件下载完成OnSuccess和OnFailure回调，以提供更好的用户体验。看看我的博客文章，关于这个插件解决的常见问题和一些使用它的方法，还有一个jQuery文件下载的演示。这是来源
下面是一个简单的用例演示，使用带有承诺的插件源代码。演示页面还包括许多其他“更好的用户体验”示例。
$.fileDownload('some/file.pdf')
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
取决于你需要支持什么浏览器，你可以使用https://github.com/eligrey/FileSaver.js/，它允许比jQuery文件下载使用的IFRAME方法更明确的控制。
我尝试下载一个CSV文件，然后在下载完成后做一些事情。所以我需要实现一个适当的回调函数。
使用window.location="…"不是一个好主意，因为下载完成后我无法操作该程序。像这样，改变头，所以这不是一个好主意。
fetch是一个很好的选择，但是它不支持ie11。window.URL.createObjectURL不支持ie11。你可以参考这个。
这是我的密码，它类似于沙赫鲁克·阿拉姆的密码。但你应该注意window。url。createobjecturl可能会造成内存泄漏。你可以参考这个。当响应到达时，数据将被存储到浏览器的内存中。因此，在单击链接之前，文件已经下载。这意味着下载后你可以做任何事情。
$.ajax({
url: 'your download url',
type: 'GET',
}).done(function (data, textStatus, request) {
// csv => Blob
var blob = new Blob([data]);
// the file name from server.
var fileName = request.getResponseHeader('fileName');
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else { // for others
var url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
//Do something after download
...
}
}).then(after_download)
}
