• 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="#" 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();
          }



  • 相关阅读:
    Linux系统中的load average
    通过数据库评估存储设备IO性能-Oracle11gIO校准功能介绍
    ORACLE查询字段中含有空格的数据
    JavaScript&Typescript中的时间
    LeetCode
    LeetCode
    面试问题及知识汇总
    Bootstrap布局容器与栅格系统
    JVM垃圾回收(GC)
    9. 专题
  • 原文地址:https://www.cnblogs.com/Steven5007/p/10923537.html
Copyright © 2020-2023  润新知