如何应对POST方式下载文件的接口
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');配置使用
- 不适用
AJAX,创建一个隐形的表单来提交,设置form的target为_blank来弹出下载对话框(推荐使用)。 - 如果是get请求也不建议直接使用
AJAX去请求,否则传回来的流还是需要处理,建议使用隐形的a标签 - URL.createObjectURL(new Blob(res),利用前端H5提供的a的
download属性来下载。IE11都不兼容。 - IE10、IE11有一个方法
window.navigator.msSaveBlob可以将File或Blob对象保存到本地磁盘。 - 最坏的打算就是拿到那些流,转换为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方式下载文件的接口的更多相关文章
- 呵呵哒,LNMP下通过fread方式下载文件时,中文名称文件找不到文件
哎,整整折腾一个下午. 本来好好的,thinkphp 自动的uniq方式保存的文件名,非要使用原文件名,真心蛋疼~~ 然后就只好写个脚本 把原来的所有文件都重新命名一下 - - 然后把数据库对应字段也 ...
- ajax方式下载文件
在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定<a>标签的href属 ...
- Http方式下载文件
代码: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System ...
- C# Http方式下载文件到本地类改进版
在上文基础上增加了远程文件是否存在和本地文件是否存在的判断. 类代码: using System; using System.Collections.Generic; using System.Lin ...
- C# Http方式下载文件到本地类
直接上代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...
- C# Http方式下载文件到本地
下文代码是从网络(http://www.cnblogs.com/hayden/archive/2012/04/26/2472815.html)得来,亲测好用.我中修改了下格式和注释,版权属于原作者“舒 ...
- QT实现,通过URL下载文件的接口实现
今天来把坑填上. 具体就是提供一个URL,并通过这个URL下载文件. MyDownloader.h: #ifndef MYDOWNLOADER_H #define MYDOWNLOADER_H cla ...
- asp.net已流的方式下载文件
string filePath = context.Server.MapPath("~/" + uploadFolder+"/"+file_name);//路径 ...
- java通过http方式下载文件
package com.qiyi; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...
随机推荐
- 【pycharm】pycharm断点调试
step into:单步执行,遇到子函数就进入并且继续单步执行(简而言之,进入子函数): step over:在单步执行时,在函数内遇到子函数时不会进入子函数内单步执行,而是将子函数整个执行完再停止, ...
- 轻量化模型之SqueezeNet
自 2012 年 AlexNet 以来,卷积神经网络在图像分类.目标检测.语义分割等领域获得广泛应用.随着性能要求越来越高,AlexNet 已经无法满足大家的需求,于是乎各路大牛纷纷提出性能更优越的 ...
- Linux 硬盘UUID相同处理方法
OVF模板部署的linux虚拟机磁盘id是相同的,当同一个模板生成的虚拟机挂载虚拟机磁盘时就会遇到两个磁盘UUID相同的情况,导致系统启动后只能识别一个磁盘.这里介绍一下LVM分区的磁盘UUID相同的 ...
- CAFFE(FAQ.1):Ubuntu 配置caffe 框架之数据库读取错误:ImportError: No module named lmdb解决办法
Z: 在安装了caffe框架后需要读取大量的数据进行学习训练.比如在MNIST识别训练中,一般直接读图片会比较耗时,我们一般将图片转存为数据库中.目前主流的数据库有以下两种选择: LevelDB Lm ...
- shell 中的通配符:
shell 中的通配符: *: 代表 0 个或者多个任意字符 ?: 代表一定有一个的任意字符 []: 代表一定有一个在括号内的字符(非任意字符).例如[abcd]代表一定有一个字符,可能是 abcd ...
- 4'.deploy.prototxt
1: 神经网络中,我们通过最小化神经网络来训练网络,所以在训练时最后一层是损失函数层(LOSS), 在测试时我们通过准确率来评价该网络的优劣,因此最后一层是准确率层(ACCURACY). 但是当我们真 ...
- 【2019 CCPC 秦皇岛】J - MUV LUV EXTRA
原题: 题意: 给你两个整数a和b,再给你一个正小数,整数部分忽略不计,只考虑小数部分的循环节,对于所有可能的循环节,令其长度为l,在小数部分循环出现的长度为p,最后一个循环节允许不完整,但是缺少的部 ...
- js技术javascript 该重视
当下,js大有挤压php java asp.net之类后端语言的趋势,直接js html5 socket与后端python c c++ 等通信 更不用提二维 三维计算展示 方面 医院呼叫 报警 处理 ...
- vue.js 父子组件间 props 数据同步处理
常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...
- 【概率dp】vijos 3747 随机图
没有养成按状态逐步分析问题的思维 题目描述 在一张图内,两点$i,j$之间有$p$的概率的概率生成一条边.求该图不出现大小$\ge 4$连通块的概率. $n \le 100,答案在实数意义下$ 题目分 ...