Ajax方式实现文件下载失败
发布时间:2020-12-16 02:52:02 所属栏目:百科 来源:网络整理
导读:背景:实现文件下载导出 问题描述 前端发送ajax【get/post】请求,后端生成excel文件,最后用response输出文件流,没有报错也没有文件下载提示。 遇到过这个问题的还是不少,问题出在ajax本身,解决方法和原因也都找到。 原因: 文件的下载是以二进制形式进行
背景:实现文件下载导出问题描述前端发送ajax【get/post】请求,后端生成excel文件,最后用response输出文件流,没有报错也没有文件下载提示。
遇到过这个问题的还是不少,问题出在ajax本身,解决方法和原因也都找到。 原因:文件的下载是以二进制形式进行的,ajax无法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件 ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件。
ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的接收类型只能是string字符串,不是流类型,所以无法实现文件下载。但用ajax仍然可以获得文件的内容,该文件将被保留在内存中,无法将文件保存到磁盘。
解决方式
1)使用window.location.href=dataUrl;就可以实现。 window.location.href=basePath+‘invoiceFormBillAttachAction/downloadAttaches.do?ID=‘+ID+‘&REMARK=‘+REMARK;
2) 使用隐藏iframe实现无刷新下载文件 <a href="#" onclick="downloadFile()">download</a> <iframe id="ifile" style="display:none"></iframe> function downloadFile(){ var dom=document.getElementById(‘ifile‘); dom.src="http:xxxx.com"; } 3) 分装form表单请求 download() { if (this.cloudDiskIds.length == 0) { alert ("请选择要下载的文件!") return } if (this.cloudDiskIds.length > 1) { alert ("只能选择一个文件!") return } // this.formData.fileName = this.cloudDiskList[0].fileName; // this.formData.filePath = this.cloudDiskList[0].filePath; // alert (this.cloudDiskIds[0]) // 请求地址 var url = "http://localhost:8080/wingCloud/customer/download"; // 分装form表单 var form = $("<form></form>").attr("action",url).attr("method","post"); // 封装参数 form.append($("<input></input>").attr("type","hidden").attr("name","id").attr("value",this.cloudDiskIds[0])); // form.append($("<input></input>").attr("type","hidden").attr("name","filePath").attr("value",this.formData.filePath)); // 提交 form.appendTo(‘body‘).submit().remove(); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |