Ajax方式实现文件下载失败

背景:实现文件下载导出

问题描述

前端发送ajax【get/post】请求，后端生成excel文件，最后用response输出文件流，没有报错也没有文件下载提示。

遇到过这个问题的还是不少，问题出在ajax本身，解决方法和原因也都找到。

原因:文件的下载是以二进制形式进行的，ajax无法解析后台返回的文件流，所以无法处理二进制流response输出来下载文件

  ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，ajax没法解析后台返回的文件流，所以无法处理二进制流response输出来下载文件。
　　　ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的接收类型只能是string字符串，不是流类型，所以无法实现文件下载。但用ajax仍然可以获得文件的内容，该文件将被保留在内存中，无法将文件保存到磁盘。
　这是因为JavaScript无法和磁盘进行交互，否则这会是一个严重的安全问题，js无法调用到浏览器的下载处理机制和程序，会被浏览器阻塞。

解决方式

• 隐藏表单，用提交表单的形式
• 用window.open() 或 window.location.href()
• 创建iframe，iframe的src可以是文件地址url来直接下载文件

1）使用window.location.href=dataUrl;就可以实现。

window.location.href=basePath+‘invoiceFormBillAttachAction/downloadAttaches.do?ID=‘+ID+‘&REMARK=‘+REMARK;

2) 使用隐藏iframe实现无刷新下载文件

      <a href=@H_404_55@"@H_404_55@#@H_404_55@" onclick=@H_404_55@"@H_404_55@downloadFile()@H_404_55@">download</a>
      <iframe id=@H_404_55@"@H_404_55@ifile@H_404_55@" style=@H_404_55@"@H_404_55@display:none@H_404_55@"></iframe>
      function downloadFile(){
        var dom=document.getElementById(@H_404_55@‘@H_404_55@ifile@H_404_55@‘);
        dom.src=@H_404_55@"@H_404_55@http:xxxx.com@H_404_55@";
     }

3) 分装form表单请求

download() {
          if (this.clouddiskIds.length == 0) {
              alert (@H_404_55@"@H_404_55@请选择要下载的文件！@H_404_55@")
              return
          }
          if (this.clouddiskIds.length > 1) {
              alert (@H_404_55@"@H_404_55@只能选择一个文件！@H_404_55@")
              return
          }
          // this.formData.fileName = this.clouddiskList[0].fileName;
          // this.formData.filePath = this.clouddiskList[0].filePath;
          // alert (this.clouddiskIds[0])
          // 请求地址
          var url = @H_404_55@"@H_404_55@http://localhost:8080/wingCloud/customer/download@H_404_55@";
          // 分装form表单
          var form = $(@H_404_55@"@H_404_55@<form></form>@H_404_55@").attr(@H_404_55@"@H_404_55@action@H_404_55@",url).attr(@H_404_55@"@H_404_55@method@H_404_55@",@H_404_55@"@H_404_55@post@H_404_55@");
          // 封装参数
          form.append($(@H_404_55@"@H_404_55@<input></input>@H_404_55@").attr(@H_404_55@"@H_404_55@type@H_404_55@",@H_404_55@"@H_404_55@hidden@H_404_55@").attr(@H_404_55@"@H_404_55@name@H_404_55@",@H_404_55@"@H_404_55@id@H_404_55@").attr(@H_404_55@"@H_404_55@value@H_404_55@",this.clouddiskIds[0]));
          // form.append($("<input></input>").attr("type","hidden").attr("name","filePath").attr("value",this.formData.filePath));
          // 提交
          form.appendTo(@H_404_55@‘@H_404_55@body@H_404_55@‘).submit().remove();
      }