前端下载文件大概有以下种:

1)a标签链接下载

<a href="url">点击链接下载</a>

2)表单form提交下载

var form = $("<form></form>").attr("action", url).attr("method", "post");
form.append($("<input></input>").attr("type", "hidden").attr("name", "参数1").attr("value", "值1"));
form.append($("<input></input>").attr("type", "hidden").attr("name", "参数2").attr("value", "值2"));
form.appendTo('body').submit().remove();
//url为请求地址

3)使用XMLHttpRequest对象下载

var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('参数1', "值1");
formData.append('参数2',"值2");
xhr.open('POST', url, true);
xhr.setRequestHeader("token", token); //可以带请求头
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
var blob = this.response;
//var responseHeaders = xhr.getAllResponseHeaders();
//var ContentDisposition = this.getResponseHeader("Content-Disposition");
//var filename = this.getResponseHeader("Content-Disposition").split('filename=')[1];
// 获取文件名,需要在后端响应头暴露("Access-Control-Expose-Headers", "Content-Disposition"); var filename = "xxxx.xxx";
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else { blob.type = "application/octet-stream";
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url); }
}else if(this.status == 404){
alert("file does not exist!");
}else{
alert("failed to download file! ");
} };
xhr.send(formData);

Web前端js下载流文件的更多相关文章

  1. 前端JS 下载大文件解决方案

    问题场景 点击导出按钮,提交请求,下载excel大文件(超过500M),该文件没有预生成在后端, 直接以文件流的形式返回给前端. 解决方案 在Vue项目中常用的方式是通过axios配置请求,读取后端返 ...

  2. JAVA web端JS下载excel文件

    JSP代码如下: JSP端引入jquery.easyui.min.js库: <script type="text/javascript" src="<c:ur ...

  3. web前端对上传的文件进行类型大小判断的js自定义函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. ajax下载,前端js下载(转)

    前面一直做过下载的功能.就是后台将文件流写入response里面,然后就好了.前台会自动弹出下载提示等. 今天打算做一个ajax下载.想当然的结果死活浏览器没反应.我擦. 然后浏览器调试,发现resp ...

  5. web前端js过滤敏感词

    web前端js过滤敏感词 这里是用文本输入框还有文本域绑定了失去焦点事件,然后再遍历敏感词数组进行匹配和替换. var keywords=["阿扁","呵呵", ...

  6. 前端JS下载文件总结

    Data URLs Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件. 例如:可以直接在HTML中的img元素直接使用Data URLs : data:[&l ...

  7. Web 端 js 导出csv文件(使用a标签)

    前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...

  8. [转] web前端js构造无法销毁的类UUID识别码,识别浏览器设备唯一性

    用户行为统计在如今的前端生态中已是稀松寻常,如各种站长统计工具.识别用户访问客户端唯一性是必要的实现,对于web前端获取的设备信息,一般容易想到的是通过navigator.userAgent,但相同设 ...

  9. WEB前端JS与UI框架

    前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...

随机推荐

  1. hive之窗口函数

    窗口函数 1.相关函数说明 COVER():指定分析函数工作的数据窗口大小,这个数据窗口大小可能会随着行的变而变化 CURRENT ROW:当前行 n PRECEDING:往前n行数据 n FOLLO ...

  2. maven包下载失败

    使用文件搜索工具(楼主用的是 Everything) 输入.lastupdate删除所有以.lastupdate结尾的文件.然后简单修改.pom(比如加空格) 保存,然后eclipse就会重新下载ja ...

  3. tkinter简单打开网址 + 执行系统命令

    from tkinter import * import webbrowser root = Tk() text = Text(root,width=30,height = 5) text.pack( ...

  4. 关于微信支付接口,curl错误代码58

    微信支付接口,curl错误代码58 之前的微信付款到用户零钱都是好好的,今天运营来找我, 我想了了下,就是进行了网站搬家 看了下 微信支付相关的证书配置文件 知道了,在这个 要改下证书的路径 WxPa ...

  5. 29.Mongodb可视化工具 Studio 3t

    Studio 3T 链接地址:https://pan.baidu.com/s/1X-Sqk50Xm76NJIZOz0ehFw 密码:td2a 安装配置成功链接本地如图所示:

  6. 精通Web Analytics 2.0 (12) 第十章:针对潜在的网站分析陷阱的最佳解决方案

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第十章:针对潜在的网站分析陷阱的最佳解决方案 是时候去处理网站分析中最棘手的一些问题了,然后获得属于你的黑带,这是成为分析忍者的 ...

  7. <转载>Bootstrap 入门教程 http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 系列

    Bootstrap建立了一个响应式的12列格网布局系统,它引入了fixed和fluid-with两种布局方式.我们从全局样式(Global Style),格网系统(Grid System),流式格网( ...

  8. Python Requests库网络爬取全代码

    #爬取京东商品全代码 import requestsurl = "http://item.jd.com/2967929.html"try: r = requests.get(url ...

  9. 天天向上的力量 III(python在pycharm实现)

    '''描述一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值相差多少呢?其中,N的取值范 ...

  10. TP的di

    依赖注入的意思是通过反射分析类所依赖的其他类,从容器中获取相应的对象并自动注入到类里面 首先依赖注入和控制反转说的是同一个东西,是一种设计模式,这种设计模式用来减少程序间的耦合,鄙人学习了一下,看TP ...