jQuery的下载,需要承载一个插件去做

今天遇到一个问题,后台给的接口由于需要前端传入过多的参数,只能接受用post去下载文件。
正常情况下第一反应是用xhr对象去发送post请求,结果并没有触发浏览器的下载。

看了一下responseHeader里已经设置了content-dispositon:attachment,但是返回的流媒体会存在于接口返回的Response中。
试着window.open(URL.createObjectURL(new Blob(res))),只是inline的形式打开了这个文件,并没有触发浏览器下载行为。

最后发现,其实不是header的问题,问题是AJAX并不会唤起浏览器的下载窗口,AJAX设计的初衷就是用来实现异步刷新的,用以改善原始的form表单提交刷新页面的问题。具体的官方证据暂时还没找到,只有stackoverflow。

所以选择有以下:
1.说服后端使用get方式。

get的请求方式可以用window.open(url,'_self');配置使用

    1. 不适用AJAX,创建一个隐形的表单来提交,设置formtarget_blank来弹出下载对话框(推荐使用)。
    2. 如果是get请求也不建议直接使用AJAX去请求,否则传回来的流还是需要处理,建议使用隐形的a标签
    3. URL.createObjectURL(new Blob(res),利用前端H5提供的adownload属性来下载。IE11都不兼容。
    4. IE10、IE11有一个方法window.navigator.msSaveBlob可以将File或Blob对象保存到本地磁盘。
    5. 最坏的打算就是拿到那些流,转换为base64,可以直接放入a标签的href
      function download() {
      
      var url = 'download/?filename=aaa.txt';
      
      var xhr = new XMLHttpRequest();
      
      xhr.open('GET', url, true); // 也可以使用POST方式,根据接口
      
      xhr.responseType = "blob"; // 返回类型blob
      
      // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
      
      xhr.onload = function () {
      
         // 请求完成
      
         if (this.status === 200) {
      
             // 返回200
      
             var blob = this.response;
      
             var reader = new FileReader();
      
             reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a表情href
      
             reader.onload = function (e) {
      
                 // 转换完成,创建一个a标签用于下载
      
                 var a = document.createElement('a');
      
                 a.download = 'data.xlsx';
      
                 a.href = e.target.result;
      
                 $("body").append(a);    // 修复firefox中无法触发click
      
                 a.click();
      
                 $(a).remove();
      
             }
      
         }
      };

如何应对POST方式下载文件的接口的更多相关文章

  1. 呵呵哒,LNMP下通过fread方式下载文件时,中文名称文件找不到文件

    哎,整整折腾一个下午. 本来好好的,thinkphp 自动的uniq方式保存的文件名,非要使用原文件名,真心蛋疼~~ 然后就只好写个脚本 把原来的所有文件都重新命名一下 - - 然后把数据库对应字段也 ...

  2. ajax方式下载文件

    在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定<a>标签的href属 ...

  3. Http方式下载文件

    代码: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System ...

  4. C# Http方式下载文件到本地类改进版

    在上文基础上增加了远程文件是否存在和本地文件是否存在的判断. 类代码: using System; using System.Collections.Generic; using System.Lin ...

  5. C# Http方式下载文件到本地类

    直接上代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  6. C# Http方式下载文件到本地

    下文代码是从网络(http://www.cnblogs.com/hayden/archive/2012/04/26/2472815.html)得来,亲测好用.我中修改了下格式和注释,版权属于原作者“舒 ...

  7. QT实现,通过URL下载文件的接口实现

    今天来把坑填上. 具体就是提供一个URL,并通过这个URL下载文件. MyDownloader.h: #ifndef MYDOWNLOADER_H #define MYDOWNLOADER_H cla ...

  8. asp.net已流的方式下载文件

    string filePath = context.Server.MapPath("~/" + uploadFolder+"/"+file_name);//路径 ...

  9. java通过http方式下载文件

    package com.qiyi; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...

随机推荐

  1. 生成ID之雪花算法

    package com.shopping.test; /** * SnowFlake的结构如下(每部分用-分开):<br> * 0 - 0000000000 0000000000 0000 ...

  2. mount的bind选项

      mount 的 bind 选项将第一个目录克隆到第二个.一个目录中的改变将会在另一个中出现 - 毕竟,它是同一磁盘上的同一个块. 使用 bind 与对同一设备进行两次挂载的区别在于:您可以挂载子目 ...

  3. 轻量化模型之SqueezeNet

    自 2012 年 AlexNet 以来,卷积神经网络在图像分类.目标检测.语义分割等领域获得广泛应用.随着性能要求越来越高,AlexNet 已经无法满足大家的需求,于是乎各路大牛纷纷提出性能更优越的 ...

  4. TCP 的三次握手和四次挥手,TCP 的流量控制和拥塞控制

    70.TCP协议的三次握手与四次挥手70.1.TCP报文结构   1.源端口号:表示发送端端口号,字段长为16位.  2.目标端口号:表示接收端口号,字段长为16位.  3.序列号:表示发送数据的位置 ...

  5. okhttp拦截器之CallServerInterceptor解析

    今天来学习OkHttp的最后一个拦截器,如下: 看一下它的javadoc说明: 其作用有两个:发起网络请求和接收服务器响应,下面具体来看一下它的intercept(): 下面具体来看一下: 接着就是读 ...

  6. 单元测试框架之unittest(一)

    一.单元测试的含义 unittest单元测试框架的设计灵感来源于Junit(Java语言的单元测试框架),它与其他语言的单元测试框架风格相类似,支持自动化测试.为测试共享setUp和shutDown. ...

  7. @Configuration的使用 和作用(转)

    从Spring3.0,@Configuration用于定义配置类,可替换xml配置文件,被注解的类内部包含有一个或多个被@Bean注解的方法,这些方法将会被AnnotationConfigApplic ...

  8. 题解 【NOIP2006】作业调度方案

    [NOIP2006]作业调度方案 Description 我们现在要利用 m 台机器加工 n 个工件,每个工件都有 m 道工序,每道工序都在不同的指定的机器上完成.每个工件的每道工序都有指定的加工时间 ...

  9. jquery实现ajax提交表单数据或json数据

  10. has(expr|ele)保留包含特定后代的元素,去掉那些不含有指定后代的元素。

    has(expr|ele) 概述 保留包含特定后代的元素,去掉那些不含有指定后代的元素.大理石平台等级 .has()方法将会从给定的jQuery对象中重新创建一组匹配的对象.提供的选择器会一一测试原先 ...