前端通用下载文件方法(兼容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 ...
随机推荐
- centos7 安装Virtualenv
若想在同一个服务器上,存在多个不同的解析器版本,使用虚拟环境 1.安装虚拟环境 pip3 install virtualenv 2.创建虚拟环境 virtualenv --no-site-packag ...
- Linux 新手入门教程
Linux 新手入门教程 1991年10月5日,Linus Torvalds 在互联网上发布消息,宣布他自己开发的内核系统诞生了.他将内核源代码保存在芬兰最大的 FTP 网站上,命名为 Linux,取 ...
- altium designer的pcb板如何移动到原点?
可以把所有的都选中,然后将光标移到起点处,将所有的移到原点的地方,但这种做法很多时候都不好:比较好的办法就是将原点设置到起点上来. 具体做法是:edit--origin --set. 这时光标成了十字 ...
- WIN8输入法的问题
在win8下输入法的添加和删除,使用第三方的软件很难处理好,而且容易造成系统的不稳定.比如搜狗输入法有个输入法管理器. 正确的做法: 1.Win+C打开侧边栏,点击 设置,选择“更改电脑设置” 这个选 ...
- 关于元素间的边距重叠问题与BFC
一.边距重叠常见情况 1.垂直方向上相邻元素的重叠 (水平方向上不会发生重叠) 2. 垂直方向上父子元素间的重叠 二.BFC 1.什么是 BFC BFC(Block Formatting Contex ...
- spring源码分析系列 (15) 设计模式解析
spring是目前使用最为广泛的Java框架之一.虽然spring最为核心是IOC和AOP,其中代码实现中很多设计模式得以应用,代码看起来简洁流畅,在日常的软件设计中很值得借鉴.以下是对一些设计模式的 ...
- RCNN,Fast RCNN,Faster RCNN 的前生今世:(2)R-CNN
Region CNN(RCNN)可以说是利用深度学习进行目标检测的开山之作.作者Ross Girshick多次在PASCAL VOC的目标检测竞赛中折桂,2010年更带领团队获得终身成就奖,如今供职于 ...
- nginx 故障转移
当我们的服务器某台出现问题的时候,怎么办.... nginx在反向代理到真实服务器(上游服务器)的时候,如果真实服务器出现了宕机,或延迟卡顿的情况下,直接轮询下一个节点. 其中主要配置如下: ###n ...
- vue组件传值的三种方式,文字版解释
父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...
- jsp+ tinymce粘贴word
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...