前端通用下载文件方法(兼容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 ...
随机推荐
- [bluez] linux下蓝牙鼠标的延迟问题
引言 现在的便携设备,接口越来越少了.所以我们没有理由不用蓝牙鼠标.高大上也不贵. 蓝牙4.0之前,蓝牙设备的问题是特别费电.蓝牙4.0之后省电的要命,我的上一个鼠标Microsoft Designe ...
- centos7小命令
修改时区:timedate [root@centos2 ~]# timedatectl set-timezone Asia/Shanghai 修改语言:localectl [root@centos2 ...
- c#中关于textbox换行
要让一个Windows Form的TextBox显示多行文本就得把它的Multiline属性设置为true. 这个大家都知道,可是当你要在代码中为Text属性设置多行文本[的时候可能会遇到点麻烦:) ...
- Luogu P1339 热浪Heat Wave
Luogu P1339 热浪Heat Wave 裸·单源最短路. 但是! 有以下坑点: 算过复杂度发现Floyd跑不过去就不要用了. 如果建边是双向边,边的数组大小要开两倍! 考场上如果再把初始化的$ ...
- Hibernate中的Session
我们之前也经常使用Session,通过连接服务器将需要保存的值存到服务器的session中,这是之前关于session的简单应用.现在看到Hibernate框架中也有关于Session的定义,该定义是 ...
- 单片机开发之C语言编程基本规范
为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范.本标准规定了程序设计人员进行程序设计时必须遵循的规范.本规范主要针对单片机编程语言和08编译器而言,包括排版.注释.命名.变量 ...
- Spark 的两种核心 Shuffle (HashShuffle 与 与 SortShuffle) 的 的工作流程
1. 参考博客:https://blog.csdn.net/qichangjian/article/details/88039576
- Python3.X下安装Scrapy
Python3.X下安装Scrapy (转载) 2017年08月09日 15:19:30 jingzhilie7908 阅读数:519 标签: python 相信很多同学对于爬虫需要安装Scrap ...
- Vue模板语法(一)
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- js清空数组
js-清空array数组 两种实现方式: 1.splice:删除元素并添加新元素,直接对数组进行修改,返回含有被删除元素的数组. arrayObject.splice(index,howmany,el ...