前端通用下载文件方法(兼容IE)
之前在网上看到一个博主写的前端通用的下载文件的方法,个人觉得很实用,所以mark一下,方便以后查阅
源文地址(源文还有上传/下载excel文件方法)
因为项目要求要兼容IE浏览器,所以完善了一下之前博主的方法
- IE 浏览器:使用微软自带的msSaveBlob 方法,a标签的download属性不支持IE
- 谷歌浏览器(只测试过谷歌):创建a标签 ,添加download属性,模拟鼠标点击事件

//这里res.data是返回的blob对象
var blob = new Blob([res.data.fileData], {type: 'application/json;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
var href = window.URL.createObjectURL(blob); //创建下载的链接
if (window.navigator.msSaveBlob) {
try {
window.navigator.msSaveBlob(blob, 'model.json')
} catch (e) {
console.log(e);
}
} else {
// 谷歌浏览器 创建a标签 添加download属性下载
var downloadElement = document.createElement('a');
downloadElement.href = href;
downloadElement.target = '_blank';
downloadElement.download = 'model.json'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}
前端通用下载文件方法(兼容IE)的更多相关文章
- 前端通过url下载文件方法
前端通过url下载文件方法 产生背景 浏览器通过url下载文件,当浏览器识别出资深能播放的资源文件,就不会走下载流程,会直接打开 解决方法 1.让后台转成请求的方式,输出文件流(如果想实现批量下载-因 ...
- .NET两种常见上传下载文件方法
1.FTP模式 代码如下: (1)浏览 /// <summary> /// 浏览文件 /// </summary> /// <param name="tbCon ...
- js页面(页面上无服务端控件,且页面不刷新)实现请求一般处理程序下载文件方法
对于js页面来说,未使用服务端控件,点击下载按钮时不会触发服务端事件,且不会提交数据到服务端页面后台进行数据处理,所以要下载文件比较困难.且使用jQ的post来请求一般处理程序也不能实现文件的下载,根 ...
- net下载文件方法汇总
//TransmitFile实现下载 protected void Button1_Click1(object sender, EventArgs e) { /* 微软为Response对象提供了一个 ...
- 页面下载文件方法,post与get
一般下载文件,常见使用的是window.open('url'):方法进行下载.若需要带参数,直接在url后面拼接参数,进行传递.window.open方法仅可以进行get方法进行参数提交. 若需要进行 ...
- 前端JS下载文件总结
Data URLs Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件. 例如:可以直接在HTML中的img元素直接使用Data URLs : data:[&l ...
- 前端vue下载文件时blob返回流中怎么获取文件名
我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优 ...
- .net下载文件方法
1.以文件流下载 byte[] fileStr=new byte[5]; MemoryStream btMs = new MemoryStream(fileStr); //以字符流的形式下载文件 by ...
- ASP.NET 后台下载文件方法
void DownLoadFile(string fileName) { string filePath = Server.MapPath(fileName);//路径 //以字符流的形式下载文件 F ...
随机推荐
- Linux之项目的部署
前期准备 python3解释器 uwsgi wsgi(web服务网关接口,就是一个实现了python web应用的协议) virtualenvwrapper 路飞的代码 vue的代码 nginx (一 ...
- JavaScript基础,Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
- Centos7安装autoconf
一.原因 安装此插件的原因:在初始化MySQL数据库时出现提示FATAL ERROR: please install the following Perl modules before executi ...
- WSDL知识点
WSDL 是基于 XML 的用于描述 Web Services 以及如何访问 Web Services 的语言. WSDL简介 1.什么是 WSDL? WSDL 指网络服务描述语言 WSDL 使用 X ...
- Jenkins 邮件配置 || Jenkins 发送邮件失败,提示:Error sending to the following VALID addresses
jenkins---系统管理---系统设置 在Jenkins URL下填写URL链接 在系统管理员邮件地址下填写发件邮箱,这将是以后发送邮件通知的发件人 如果下载了外部邮件通知 配置一下SMTP se ...
- [08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up.
使用idea连接数据库的时候,报错为 [08001] Could not create connection to database server. Attempted reconnect 3 tim ...
- el-select remote 远程搜索 多个共享一个options,options改变时输入框值不显示名称的问题
原因:el-select remote 远程搜索 多个共享一个options,当使用 remote-method 请求数据后,options被改变,value的值不包含在options中,value的 ...
- CDH6.2离线安装(整理版)
1.概述 CDH,全称Cloudera's Distribution, including Apache Hadoop.是Hadoop众多分支中对应中的一种,由Cloudera维护,基于稳定版本的Ap ...
- LG4213 【模板】杜教筛(Sum)和 BZOJ4916 神犇和蒟蒻
P4213 [模板]杜教筛(Sum) 题目描述 给定一个正整数$N(N\le2^{31}-1)$ 求 $$ans_1=\sum_{i=1}^n\varphi(i)$$ $$ans_2=\sum_{i= ...
- 【Python学习】Python3 基础语法
==================================================================================================== ...