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. BootStrap【三、组件】

    特有标签属性 role 用于浏览器识别 aria-label 用于浏览器识别 tabIndex 用于浏览器识别 data- 自定义数据属性 图标 直接引用官方图标库中的class 官方图标库 Demo ...

  2. java_变量和常量

    一.变量(可以改变的量) 1.命名规则: a.遵循标识符命名规则: 1.关键字是不能用作标识符的 2.区分大小写 3.可以包含数字.字母.下划线.美元符号$,但是不能以数字作为开头 b.尽量使用有意义 ...

  3. 两个对象的 hashCode()相同,则 equals()也一定为 true,对吗?(未完成)

    两个对象的 hashCode()相同,则 equals()也一定为 true,对吗?(未完成)

  4. gerapy+scrapyd组合管理分布式爬虫

    Scrapyd是一款用于管理scrapy爬虫的部署和运行的服务,提供了HTTP JSON形式的API来完成爬虫调度涉及的各项指令.Scrapyd是一款开源软件,代码托管于Github上. 点击此链接h ...

  5. Linux的.a、.so和.o文件及链接时的命名

    在说明Linux的.a..so和.o文件关系之前,先来看看windows下obj,lib,dll,exe的关系 windows下obj,lib,dll,exe的关系 lib是和dll对应的.lib是静 ...

  6. git 获得当前分支名及其对应的远程分支

    git 获得当前分支名及其对应的远程分支 git symbolic-ref -q --short HEADgit rev-parse --abbrev-ref --symbolic-full-name ...

  7. jquery.table2excel,将HTML的table标签数据导出成excel

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...

  8. centos 解决 mysql command not found

    执行命令: mysql -V 报错内容: -bash: mysql: command not found 报错原因:系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下,当然会找不到命令 ...

  9. 入门 uCOS 操作系统的一点建议

    原创: 鱼鹰Osprey  鱼鹰谈单片机 3月2日 预计阅读时间: 4 分钟 对于想入门操作系统的读者,我的建议是先学 uCOS II.原因有以下几点: 1.最为重要的原因是网上相关资源非常丰富,这对 ...

  10. Finding Lane Lines on the Road

    Finding Lane Lines on the Road The goals / steps of this project are the following: Make a pipeline ...