浏览器 实现文件下载 完成回调 兼容ie11

本文介绍如何通过GET或POST请求获取文件资源,并利用XMLHttpRequest和FileReader在浏览器中实现下载完成后的回调。特别提及了在IE11中的兼容处理方法。
摘要由CSDN通过智能技术生成

首先保证 改文件资源能够通过get请求或者 post请求拿到,基于此基础上我们可以实现得知下载完成后的回调 代码如下

const getFileAndCallback = (url, callback) => {
	//定义执行作用域
	const that = this;
	//首先 初始化一个原生ajax对象
	const xhr = new XMLHttpRequest();
	//建立xhr请求
	xhr.open("GET", url, true);
	//定义xhr传输格式未blob
	xhr.responseType = "blob";
	//xhr回调函数
	xhr.onload = function(){
		//接口成功响应
		if (this.status === 200){
                  const blob = this.response;
                  //定义fileReader对象
                  const fileReader = new FileReader();
                  //使用fileReader原生api 读取xhr 存入fileReader对象
                  fileReader.readAsDataUrl(blob);
                  //监听fileReader的加载回调
                  fileReader.onload = async function(e){
                      //兼容ie11的写法
                      //ie 11对文件数据的存储转换api是window.navigator.msSaveBlob(this.response, "文件名/fileName") 或者  window.navigator.msSaveOrOpenBlob(this.response, "文件名/ fileName");
                      if (window.navigator.msSaveOrOpenBlob){
                          try {
                              window.navigator.msSaveOrOpenBlob(this.response, ""文件名/fileName"")
                          }catch(e){
                              //日志记录解析失败的情况 理论上不会出现
                          }
                      }else{
                          //ie11意外的文件下载用的是a标签download
                          let a = document.createElement('a');
                          a.download = "文件名/fileName";
                          a.href = e.target.result;
                          a.click();
                      }
                  };
                  //此时已经下载完成 执行回调
                   callback();
              }
          }
      }

//实现方法如上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ok060

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值