Web前端js下载流文件
前端下载文件大概有以下种:
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下载流文件的更多相关文章
- 前端JS 下载大文件解决方案
问题场景 点击导出按钮,提交请求,下载excel大文件(超过500M),该文件没有预生成在后端, 直接以文件流的形式返回给前端. 解决方案 在Vue项目中常用的方式是通过axios配置请求,读取后端返 ...
- JAVA web端JS下载excel文件
JSP代码如下: JSP端引入jquery.easyui.min.js库: <script type="text/javascript" src="<c:ur ...
- web前端对上传的文件进行类型大小判断的js自定义函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax下载,前端js下载(转)
前面一直做过下载的功能.就是后台将文件流写入response里面,然后就好了.前台会自动弹出下载提示等. 今天打算做一个ajax下载.想当然的结果死活浏览器没反应.我擦. 然后浏览器调试,发现resp ...
- web前端js过滤敏感词
web前端js过滤敏感词 这里是用文本输入框还有文本域绑定了失去焦点事件,然后再遍历敏感词数组进行匹配和替换. var keywords=["阿扁","呵呵", ...
- 前端JS下载文件总结
Data URLs Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件. 例如:可以直接在HTML中的img元素直接使用Data URLs : data:[&l ...
- Web 端 js 导出csv文件(使用a标签)
前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...
- [转] web前端js构造无法销毁的类UUID识别码,识别浏览器设备唯一性
用户行为统计在如今的前端生态中已是稀松寻常,如各种站长统计工具.识别用户访问客户端唯一性是必要的实现,对于web前端获取的设备信息,一般容易想到的是通过navigator.userAgent,但相同设 ...
- WEB前端JS与UI框架
前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...
随机推荐
- Windows下GO开发环境配置
GO下载 https://golang.org/dl/ IDE-goland下载 http://www.jetbrains.com/go/ 本次安装go1.9.3 ...
- FreeMarker的空值运算符和逻辑运算符
1.空值处理运算符 如果你在模板中使用了变量但是在代码中没有对变量赋值,那么运行生成时会抛出异常.但是有些时候,有的变量确实是null,怎么解决这个问题呢? 判断某变量是否存在:“??” 用法为:va ...
- Mysql 多字段去重
使用group by去重现在有如下表 id name age1 张三 232 李四 343 张三 234 李四 32 需求 : 按照name和age字段联合去重 sql如下 select * from ...
- 4. mysql 1449 : The user specified as a definer ('test'@'%') does not exist 解决方法
权限问题,授权 给 root 所有sql 权限 mysql> grant all privileges on *.* to test@"%" identified by & ...
- java多态和继承
继承定义:子类继承父类的特征和行为,使得子类具有父类的各种属性和方法.或子类从父类继承方法,使得子类具有父类相同的行为. 多态定义看了很多,都觉得不够贴切,后来在一个同学的笔记中看到了如下的定义觉得很 ...
- java中常用工具类
目录 一. org.apache.commons.io.IOUtils 二. org.apache.commons.io.FileUtils 三. org.apache.commons.lang.St ...
- APP-4-百度地图定位
APP-3-百度地图应用 需要根据上一步完成百度地图应用的测试,本文介绍Hbuilder通过MUI框架完成百度地图的定位. 1.代码部分 <!DOCTYPE html> <html& ...
- leetcode 题解: Gray Code
第一眼看到就是枚举,回溯法. n位的ans就是在n-1的ans的基础上,每一个在首位加上1. 但是有个难点,要保证相邻两数之间只有一位在变化,怎么办? 首先 00 00 01 00 01 11 10 ...
- cp命令 复制目录
格式:cp -R {源目录地址} {目标目录地址} 假设文件夹download下有两个目录 download/a download/b 现在想将文件夹a复制到文件夹b下,执行 cp -R downlo ...
- js中实现cookie的增删改查(document.cookie的使用详情)
一.设置cookie的值 1.每个cookie都是一个名称/值对,名称/值对用等号连接,并将该名称/值对赋值给document.cookie即可.如:document.cookie="id= ...