数据导出功能,将后端接口返回的 流数据 导出为后端定义的exl文件,兼容IE浏览器写法

<!-- 需要在封装请求的方法中加入响应类型 responseType: "blob" -->
// 导出数据接口
export function test(paramsList, sign) {
	return iAxios({
		url: '/test',
		method: 'post',
		data: paramsList,
		responseType: "blob",
	})
}
<!-- 接口调用时将返回的 流数据 通过 new Blob([res]) 的形式转换数据 -->
test(params,).then(res => {
        if(res) {
        <!--  文件名 -->
          let fileName = '公文数据.xls'; 
        <!--Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。  -->
          let blob = new Blob([res], { type: 'application/x-www-form-urlencoded' });
          <!-- 判断了有该方法即为IE浏览器 -->
          if (window.navigator.msSaveBlob) { 
            try {
                <!-- IE调用 msSaveBlob方法处理流文件 -->
              window.navigator.msSaveBlob(blob, fileName)
            } catch (e) {
              console.log(e);
            }
          } else {
            <!-- 其他浏览器, 定义a标签的形式触发下载 -->
            const linkNode = document.createElement('a');
            <!-- 在dom中添加a标签  -->
            document.body.appendChild(linkNode);
            <!-- a标签元素隐藏 -->
            linkNode.style.display = 'none';
            <!-- a标签的 href属性路径设置为一个生成的 Blob url 地址 -->
            linkNode.href = URL.createObjectURL(blob);
            <!-- a标签的download属性规定下载文件的名称 -->
            linkNode.download = fileName; 
            <!--  模拟在按钮上的一次鼠标单击 -->
            linkNode.click(); 
            <!-- 释放URL 对象 -->
            URL.revokeObjectURL(linkNode.href); 
            <!-- 移除dom上的a标签 -->
            document.body.removeChild(linkNode);
          }
        }
      })

需要注意的是,流数据接口返回的 result 只是单纯的以流的形式存在的数据,所以打印result 是会得到undfinde,axios封装响应拦截器的时候,最好判断一下是否是流形式的数据,如果是则不做拦截或者处理操作,否则响应拦截器获取不到res内容就会直接返回undfined, 此时就算成功下载文件,文件中的内容也会只有undfinde

 if (config && config.status) {
			if(config.status === 200) {
                <!-- 通过响应头中的 content-type 来判断当前是否是流文件,如果是流文件的话,返回的Promise包裹的返回数据将会是undfinde,此时放行,不做 status是否成功的判断即可 -->
				if(config.headers['content-type'] == "application/octet-stream;charset=utf-8") {
					return Promise.resolve(config.data)
				} else {
					if(config.data.status === 200) {
						return Promise.resolve(config.data)
					} else if(config.data.status === 1003) {
						console.log(`1003 -> token校验失败, 信息为: ${config.data.data}`)
						window.location.href= "http://oa.sh.cmcc/wps/portal";
					} else if(config.data.status === 2000) {
						console.log(`2000 -> 统一异常, 信息为: ${config.data.data}`)
					} else if(config.data.status === 500) {
						console.log(`500  ->  业务失败, 信息为: ${config.data.data}`)
					}
				}
			} 
}