前端兼容IE的下载文件方法

上个星期碰到了在IE浏览器上无法下载文件但是在谷歌上面却可以的问题，下面是我的代码：

function fetchPost(url, data, fileName) {fetch(url,{method: 'POST',body: data,}).then(response => {if (response.ok) {return response.blob(); // 处理二进制数据流，返回blob对象}else {return Promise.reject(response);}}).then(blob => {let url = window.URL.createObjectURL(blob); // //创建下载的链接let a = document.createElement('a');a.href = url;document.body.appendChild(a)a.download = fileName; // 下载文件的文件名a.click(); // 点击下载document.body.removeChild(a) // 下载完成移除a元素window.URL.revokeObjectURL(url) //释放掉blob对象}).catch(e => {})
}

我用的是fetch而不是ajax，不过和不能下载文件没有关系。
前端文件下载方法有很多，我用的是通过a标签的方式来下载，在谷歌上确实可以下载，但是在IE浏览器上无效，然后上网查询相关的问题，发现是IE不支持这种写法，要给IE做兼容处理：

function fetchPost(url, data, fileName) {fetch(url,{method: 'POST',body: data,}).then(response => {if (response.ok) {return response.blob(); // 处理二进制数据流，返回blob对象}else {return Promise.reject(response);}}).then(blob => {let url = window.URL.createObjectURL(blob); // //创建下载的链接if (window.navigator.msSaveBlob) {// ie 浏览器try {window.navigator.msSaveBlob(blob, fileName)} catch (e) {// console.log(e)}} else {// 谷歌浏览器 创建a标签 添加download属性下载let a = document.createElement('a');a.href = url;document.body.appendChild(a)a.download = fileName; // 下载文件的文件名a.click(); // 点击下载document.body.removeChild(a) // 下载完成移除a元素window.URL.revokeObjectURL(url) //释放掉blob对象}}).catch(e => {})
}

然后在IE上也能愉快的下载了。
然后说说文件名，我上面的代码中是前端直接生成文件名的，不过也有后端把文件名通过’Content-Disposition‘传给前端这种方式，不过后端需要经过特殊处理（怎么处理就不说了，因为我是前端），当我通过这种方式获取文件名的时候问题就出现了，通过网上查看他人的获取方式：

response.headers['Content-Disposition']

试了很多遍都获取不到，一直是undefined，于是当时放弃了这种方式，还是选择前端生成文件名的方式。不过今天因为没什么事情，于是我又重新研究了一下fetch，看了一下官网的api,无意间看到了这个：

意识到可能是上次的获取方式有问题，于是试了下，发现问题解决了，因为一开始的获取方式是针对ajax的，但是我用的是fetch发送请求，因为没有考虑到这一点，所以获取失败，这是针对fetch的获取方式：

response.headers.get('Content-Disposition')

最终还是把问题解决了，但是以后用到新技术的话一定要把官网认真的看一遍。

前端兼容IE的下载文件方法相关推荐

前端通过url链接下载文件
前端通过url链接下载文件网上找到几个相关的方法,如下 // 方法一: const form = document.createElement('form'); form.setAttribute( ...
百度云下载文件方法：PC 和群晖 Docker
百度云下载文件方法:PC 和群晖 Docker 目录 - 百度云下载文件方法:PC 和群晖 Docker     - 1.PC端其它软件         - 1.1.百度云客户端的替代软件    ...
js下载文件方法记录
js下载文件方法记录 downLoadExcel() { this.downloading = true axios.get(/xxxx, { responseType: 'blob', params ...
天翼云盘突破限制无需客户端下载文件方法
天翼云盘突破限制无需客户端下载文件方法在线网盘的市场当中,百度网盘一直处于"主导"地位. 这么肥的一块蛋糕,其他厂商自然不想丢掉,所以他们也一直在做自己的网盘,只是影响力太小.大 ...
Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。
URL文件地址下载方法一.正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载downFile() {if ('download' in document. ...
前端通用下载文件方法（兼容IE10及以上）
之前在网上看到一个博主写的前端通用的下载文件的方法,个人觉得很实用,所以mark一下,方便以后查阅源文地址(源文还有上传/下载excel文件方法) 因为项目要求要兼容IE浏览器,所以完善了一下之前博 ...
JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)
场景简介由于业务需要,经常遇到下载各类文件的需求,其中最头疼的莫过于前端下载图片了,直接给个图片文件地址会变成直接打开图片,而不是弹窗提示另存为,研究了下前端实现文件下载最便捷的方法还是创建 a 标 ...
前端vue项目-关于下载文件pdf/excel
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了看过了很多方法,做个整理吧哈哈哈哈参考的文章链接: https://www.cnblogs.com/jiangweic ...
完美解决前端无法上传大文件方法
1 背景用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

前端兼容IE的下载文件方法

前端兼容IE的下载文件方法相关推荐

最新文章

热门文章