以及对二进制流的处理。
document.querySelector("#downloadexcel").onclick = function() { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "https://localhost:5001/api/Magicodes/excel", true); //也可以使用Post xmlhttp.responseType = 'blob'; xmlhttp.setRequestHeader("Magicodes-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); xmlhttp.send(); // readyState == 4 为请求完成,status == 200为请求成功返回的状态 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var name = xmlhttp.getResponseHeader("Content-disposition"); var filename = name.substring(20, name.length); var blob = new Blob([xmlhttp.response], { type: 'text/xlsx' }); var Url = URL.createObjectURL(blob); var link = document.createElement('a'); link.href = Url; link.download = filename; link.click(); } } } jQuery Ajax使用对于jQuery Ajax和XMLHttpRequest的注意事项是一致的。详细可参考如下代码示例,不过目前对于示例的演示只是针对于Excel导出的,关于其他格式的导出,可参考我们前面介绍的Magicodes-Type常量内容,当然对于其他文件的导出同样也是对responseType、以及blob类型进行修改。
$("#downloadexcel").click(function() { $.ajax({ url: "https://localhost:5001/api/Magicodes/excel", type: 'GET', headers: { 'Magicodes-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }, xhrFields: { responseType: 'blob' }, success: function(data, status, xhr) { var name = xhr.getResponseHeader("Content-disposition"); var filename = name.substring(20, name.length); var blob = new Blob([data], { type: 'text/xlsx' }); var Url = URL.createObjectURL(blob); var link = document.createElement('a'); link.href = Url; link.download = filename; link.click(); } }); })