解决IE浏览器与其它浏览器下载文件兼容问题（纯前端）

在非IE浏览器，这个还是比较简单的，相信基本上都知道

<a href="地址" target="_blank" download="下载下来的文件名"></a>

这个地址，应该都不会填错吧，然后就是download这个属性在IE浏览器是不支持的，我百度了好久也是没有找到完美的解决方法，经过本人几天的死扣，最终还是解决了，在项目上亲测的哦，下面上代码

首先这是一个没有后台参与的文件下载，第一步（和大家说一下，这个我是用vue做的，哪个框架对于方法是没有影响的）：

//首先创建个get请求，设置responseType:'blob'
const loadFile = function(urls){//怕个地址不是后台给我的，就是我的目标地址return Axios.get(urls,{responseType:'blob'}).then((data)=>{if(data){return data;}return Promise.reject({message:'下载文件失败'})})
}
//创建好之后 ，我是将这个请求方法添加到vue原型中供全局使用的
//Vue.prototype.$api = {loadFile}
//具体怎么用的，相信大家也都知道，这个就不多说

接下来就是怎么用了

html:
请点击 <span @click="downLoad('../static/1111.txt')">下载</span>
//方法里传的地址是我要下载的文件，这个看每个人的情况哦js:downLoad(url){this.$api.loadFile(url).then((res)=>{if (window.navigator.msSaveBlob) {//这个是IE浏览器独有的方法，用来判断当时是不是IE浏览器var data = new Blob([res.data])window.navigator.msSaveBlob(data,'1111.txt');//此方法即可下载成功}else {// 谷歌浏览器 创建a标签 添加download属性下载var aLink = document.createElement('a');aLink.href = url;aLink.download = '1111.txt'; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var event;if (window.MouseEvent) {event = new MouseEvent('click');}else {event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);}aLink.dispatchEvent(event);}})}

解决IE浏览器与其它浏览器下载文件兼容问题（纯前端）相关推荐

成功解决Git Bash运行脚本命令下载文件到默认C盘路径的问题
成功解决Git Bash运行脚本命令下载文件到默认C盘路径的问题目录解决问题解决思路解决方法解决问题解决Git Bash运行脚本命令下载文件到默认C盘路径的问题 1.默认下载到文件夹为解 ...
post请求下载文件(兼容IE)
post请求下载文件(兼容IE) 有时候由于下载文件的url携带的参数过多,导致整个url长度超过get请求的上限,这个时候需要更换为post请求,具体实现如下 function downLoadFi ...
H5页面实现下载文件兼容移动端
H5页面实现下载文件兼容移动端问题1:之前写的H5 blob方式下载主要是以后台返回文件流的方式进行下载 pc端没有问题发现有些手机不支持移动端的下载的方式改成通过文件Url直接下载或打开但 ...
解决常用浏览器上传与下载文件中问乱码问题
解决浏览器下载与上传文件中问乱码问题问题: 我们在写后端Servlet程序处理下载与上传问题时我们知道下载的文件名,可以与本地文件名不同(假如你的浏览器访问的时本地资源) 如果说此时你的文件名是中 ...
各个浏览器a标签href下载文件链接长度过长，导致下载失败解决方案
一.问题: 开发中遇到下载exel文档:后端小哥返回来base64位的exel文件:刚开始文件比较小:本人使用创建a标签给href纸箱base64位文件 var a = document.create ...
win10 IE浏览器显示无法安全下载文件
这里写自定义目录标题问题如图: 解决办法: 直接右键点击文件选择保留即可
前端常用的【文件下载操作2】不获取后端文件流【纯前端】实现：el-table表格下载为Excel文件【sheetJS XLSX】
--how are u gonna spend your life?(你将如何度过这一生) --I am not sure,but I do know,I am going to live every ...
Android 调用第三方浏览器打开网址或下载文件
/*** 调用第三方浏览器打开* @param context* @param url 要浏览的资源地址*/public static void openBrowser(Context context ...
IE浏览器下点击下载文件没反应
今天测试系统中的文件下载时,点击文件下载后,浏览器没反应,在网上找了下原因是IE的临时文件夹目录没有了,设置一下即可. 方法如下: 设置下IE的临时文件夹即可

解决IE浏览器与其它浏览器下载文件兼容问题（纯前端）

在非IE浏览器，这个还是比较简单的，相信基本上都知道

首先这是一个没有后台参与的文件下载，第一步（和大家说一下，这个我是用vue做的，哪个框架对于方法是没有影响的）：

接下来就是怎么用了

解决IE浏览器与其它浏览器下载文件兼容问题（纯前端）相关推荐

最新文章

热门文章