Web前端js下载流文件
2024-10-19 19:43:46
前端下载文件大概有以下种:
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);
最新文章
- iOS APP 如何做才安全
- 执行mvn 报错 source-1.5 中不支持 diamond运算符
- Eclipse下使用SVN版本控制
- BZOJ 1468 &; 点分治
- kwm备忘
- 通过telnet连接查看memcache服务器(转)
- 用Processon在线绘制UML的尝试
- 文成小盆友python-num14 - web 前端基础 html ,css, JavaScript
- [置顶] IOS培训资料
- IIS - HTTP 错误 500.21 - Internal Server Error 处理程序“WebServiceHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
- CENTOS安装部署zabbix
- 201521123068 《java程序设计》 第11周学习总结
- 【译】10分钟学会Pandas
- canvas画一个时钟
- 解决[babel] note:the code generator has deoptimised the styling...
- WebService简单介绍(一)
- linux 扩展根分区
- openresty 集成lua-resty-mail +smtp2http 扩展灵活的mail 服务
- CentOS下 RabbitMQ单机安装配置
- [py]django第三方分页器django-pure-pagination实战